jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Text added to PIXI

Browse source 
destroy function added to textures too
docs updated
new example added
This commit is contained in:
Mat Groves 2013-04-24 20:54:03 +01:00
parent 7933cadb77
commit 09dbbd5d13
66 changed files with 10970 additions and 681 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Gruntfile.js
View file

@ -16,6 +16,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/DisplayObjectContainer.js',
'<%= dirs.src %>/Sprite.js',
'<%= dirs.src %>/MovieClip.js',
'<%= dirs.src %>/Text.js',
'<%= dirs.src %>/InteractionManager.js',
'<%= dirs.src %>/Stage.js',
'<%= dirs.src %>/utils/Utils.js',
@ -99,7 +100,8 @@ module.exports = function(grunt) {
'examples/example 6 - Interactivity',
'examples/example 7 - Transparent Background',
'examples/example 8 - Dragging',
'examples/example 9 - Tiling Texture'
'examples/example 9 - Tiling Texture',
'examples/example 10 - Text'
]
},
connect: {

229
bin/pixi.dev.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-22
* Compiled: 2013-04-24
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -832,6 +832,155 @@ PIXI.MovieClip.prototype.updateTransform = function()
* @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.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
if(this.strokeStyle && this.strokeThickness)this.context.strokeText(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 = {};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
@ -1980,6 +2129,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
@ -2028,6 +2179,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
@ -2145,12 +2321,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
// empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// recursivly loop through all items!
this.checkVisibility(stage, true);
@ -2255,12 +2432,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; // means it was removed
if(displayObject.__inWebGL)return; //means it is already in webgL
@ -2401,7 +2589,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -2425,7 +2613,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
@ -2484,7 +2672,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -2509,7 +2696,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -2521,8 +2708,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -2530,7 +2717,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}
@ -3460,6 +3647,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -3640,6 +3828,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -4044,6 +4234,7 @@ PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
/**
* A texture stores the information that represents an image. All textures have a base texture
@ -4126,6 +4317,18 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
/**
*
* Helper function that returns a base texture based on an image url
@ -4230,6 +4433,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: 'update', content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
/**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -4268,7 +4476,6 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}

6
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

1
docs/api.js
View file

@ -14,6 +14,7 @@ YUI.add("yuidoc-meta", function(Y) {
"Sprite",
"SpriteSheetLoader",
"Stage",
"Text",
"Texture",
"TilingSprite",
"WebGLBatch",

2
docs/classes/AssetLoader.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

142
docs/classes/BaseTexture.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -128,7 +130,7 @@
<div class="foundat">
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l8"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:8</code></a>
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l9"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:9</code></a>
</div>
@ -192,7 +194,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l8"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:8</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l9"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:9</code></a>
</p>
@ -244,6 +246,8 @@
<li class="api-class-tab index"><a href="#index">Index</a></li>
<li class="api-class-tab methods"><a href="#methods">Methods</a></li>
<li class="api-class-tab properties"><a href="#properties">Properties</a></li>
@ -256,6 +260,23 @@
<h2 class="off-left">Item Index</h2>
<div class="index-section methods">
<h3>Methods</h3>
<ul class="index-list methods extends">
<li class="index-item method">
<a href="#method_fromImage">fromImage</a>
<span class="flag static">static</span>
</li>
</ul>
</div>
<div class="index-section properties">
@ -294,6 +315,117 @@
</div>
<div id="methods" class="api-class-tabpanel">
<h2 class="off-left">Methods</h2>
<div id="method_fromImage" class="method item">
<h3 class="name"><code>fromImage</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>imageUrl</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="returns-inline">
<span class="type"></span>
</span>
<span class="flag static">static</span>
<div class="meta">
<p>
Defined in
<a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l102"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:102</code></a>
</p>
</div>
<div class="description">
<p>Helper function that returns a base texture based on an image url
If the image is not in the base texture cache it will be created and loaded</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">imageUrl</code>
<span class="type">String</span>
<div class="param-description">
<p>The image url of the texture</p>
</div>
</li>
</ul>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
BaseTexture
</div>
</div>
</div>
</div>
<div id="properties" class="api-class-tabpanel">
@ -323,7 +455,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l32"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:32</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l33"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:33</code></a>
</p>
@ -367,7 +499,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l39"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:39</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l40"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:40</code></a>
</p>
@ -411,7 +543,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l26"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:26</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_BaseTexture.js.html#l27"><code>src&#x2F;pixi&#x2F;textures&#x2F;BaseTexture.js:27</code></a>
</p>

2
docs/classes/CanvasRenderer.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/classes/DisplayObject.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/classes/DisplayObjectContainer.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

12
docs/classes/InteractionData.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -124,7 +126,7 @@
<div class="foundat">
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l503"><code>src&#x2F;pixi&#x2F;InteractionManager.js:503</code></a>
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l506"><code>src&#x2F;pixi&#x2F;InteractionManager.js:506</code></a>
</div>
@ -178,7 +180,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l503"><code>src&#x2F;pixi&#x2F;InteractionManager.js:503</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l506"><code>src&#x2F;pixi&#x2F;InteractionManager.js:506</code></a>
</p>
@ -317,7 +319,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l527"><code>src&#x2F;pixi&#x2F;InteractionManager.js:527</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l530"><code>src&#x2F;pixi&#x2F;InteractionManager.js:530</code></a>
</p>
@ -406,7 +408,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l509"><code>src&#x2F;pixi&#x2F;InteractionManager.js:509</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l512"><code>src&#x2F;pixi&#x2F;InteractionManager.js:512</code></a>
</p>
@ -450,7 +452,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l519"><code>src&#x2F;pixi&#x2F;InteractionManager.js:519</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l522"><code>src&#x2F;pixi&#x2F;InteractionManager.js:522</code></a>
</p>

2
docs/classes/InteractionManager.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

4
docs/classes/MovieClip.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -1788,7 +1790,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<a href="..&#x2F;files&#x2F;src_pixi_Sprite.js.html#l83"><code>src&#x2F;pixi&#x2F;Sprite.js:83</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_Sprite.js.html#l103"><code>src&#x2F;pixi&#x2F;Sprite.js:103</code></a>
</p>

2
docs/classes/Point.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/classes/Rectangle.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

8
docs/classes/Sprite.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -843,7 +845,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_Sprite.js.html#l113"><code>src&#x2F;pixi&#x2F;Sprite.js:113</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_Sprite.js.html#l135"><code>src&#x2F;pixi&#x2F;Sprite.js:135</code></a>
</p>
@ -950,7 +952,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_Sprite.js.html#l129"><code>src&#x2F;pixi&#x2F;Sprite.js:129</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_Sprite.js.html#l151"><code>src&#x2F;pixi&#x2F;Sprite.js:151</code></a>
</p>
@ -1725,7 +1727,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<a href="..&#x2F;files&#x2F;src_pixi_Sprite.js.html#l83"><code>src&#x2F;pixi&#x2F;Sprite.js:83</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_Sprite.js.html#l103"><code>src&#x2F;pixi&#x2F;Sprite.js:103</code></a>
</p>

2
docs/classes/SpriteSheetLoader.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

80
docs/classes/Stage.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -310,6 +312,13 @@
</li>
<li class="index-item method">
<a href="#method_getMousePosition">getMousePosition</a>
</li>
<li class="index-item method inherited">
@ -851,6 +860,77 @@
</div>
<div id="method_getMousePosition" class="method item">
<h3 class="name"><code>getMousePosition</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type"><a href="../classes/Point.html" class="crosslink">Point</a></span>
</span>
<div class="meta">
<p>
Defined in
<a href="..&#x2F;files&#x2F;src_pixi_Stage.js.html#l71"><code>src&#x2F;pixi&#x2F;Stage.js:71</code></a>
</p>
</div>
<div class="description">
<p>This will return the point containing global coords of the mouse.</p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type"><a href="../classes/Point.html" class="crosslink">Point</a></span>:
The point containing the coords of the global InteractionData position.
</div>
</div>
</div>

2835
docs/classes/Text.html Normal file
View file

File diff suppressed because it is too large Load diff

18
docs/classes/Texture.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -416,7 +418,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l162"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:162</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l158"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:158</code></a>
</p>
@ -524,7 +526,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l146"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:146</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l142"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:142</code></a>
</p>
@ -627,7 +629,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l131"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:131</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l127"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:127</code></a>
</p>
@ -732,7 +734,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l93"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:93</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l105"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:105</code></a>
</p>
@ -835,7 +837,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l174"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:174</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l170"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:170</code></a>
</p>
@ -935,7 +937,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l75"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:75</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l83"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:83</code></a>
</p>
@ -1011,7 +1013,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l28"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:28</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l31"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:31</code></a>
</p>
@ -1055,7 +1057,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l37"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:37</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_textures_Texture.js.html#l40"><code>src&#x2F;pixi&#x2F;textures&#x2F;Texture.js:40</code></a>
</p>

2
docs/classes/TilingSprite.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/classes/WebGLBatch.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

6
docs/classes/WebGLRenderer.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -393,7 +395,7 @@ Dont forget to add the view to your DOM or you will not see anything :)</p>
<a href="..&#x2F;files&#x2F;src_pixi_renderers_WebGLRenderer.js.html#l160"><code>src&#x2F;pixi&#x2F;renderers&#x2F;WebGLRenderer.js:160</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_renderers_WebGLRenderer.js.html#l187"><code>src&#x2F;pixi&#x2F;renderers&#x2F;WebGLRenderer.js:187</code></a>
</p>
@ -486,7 +488,7 @@ Dont forget to add the view to your DOM or you will not see anything :)</p>
<a href="..&#x2F;files&#x2F;src_pixi_renderers_WebGLRenderer.js.html#l568"><code>src&#x2F;pixi&#x2F;renderers&#x2F;WebGLRenderer.js:568</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_renderers_WebGLRenderer.js.html#l617"><code>src&#x2F;pixi&#x2F;renderers&#x2F;WebGLRenderer.js:617</code></a>
</p>

299
docs/data.json
View file

@ -202,6 +202,15 @@
},
"fors": {},
"namespaces": {}
},
"src/pixi/Text.js": {
"name": "src/pixi/Text.js",
"modules": {},
"classes": {
"Text": 1
},
"fors": {},
"namespaces": {}
}
},
"modules": {
@ -225,12 +234,13 @@
"Point": 1,
"Rectangle": 1,
"Sprite": 1,
"Stage": 1
"Stage": 1,
"Text": 1
},
"fors": {},
"namespaces": {},
"tag": "module",
"file": "src/pixi/Stage.js",
"file": "src/pixi/Text.js",
"line": 5
}
},
@ -418,7 +428,7 @@
"extension_for": [],
"module": "PIXI",
"file": "src/pixi/textures/BaseTexture.js",
"line": 8,
"line": 9,
"description": "A texture stores the information that represents an image. All textures have a base texture",
"extends": "EventTarget",
"is_constructor": 1,
@ -518,7 +528,7 @@
"extension_for": [],
"module": "PIXI",
"file": "src/pixi/InteractionManager.js",
"line": 503,
"line": 506,
"is_constructor": 1
},
"MovieClip": {
@ -657,6 +667,49 @@
"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": [
@ -806,7 +859,7 @@
},
{
"file": "src/pixi/renderers/CanvasRenderer.js",
"line": 105,
"line": 112,
"description": "resizes the canvas view to the specified width and height",
"params": [
{
@ -822,28 +875,28 @@
},
{
"file": "src/pixi/renderers/CanvasRenderer.js",
"line": 119,
"line": 126,
"access": "private",
"tagname": "",
"class": "CanvasRenderer"
},
{
"file": "src/pixi/renderers/CanvasRenderer.js",
"line": 194,
"line": 203,
"access": "private",
"tagname": "",
"class": "CanvasRenderer"
},
{
"file": "src/pixi/renderers/CanvasRenderer.js",
"line": 229,
"line": 238,
"access": "private",
"tagname": "",
"class": "CanvasRenderer"
},
{
"file": "src/pixi/renderers/CanvasRenderer.js",
"line": 256,
"line": 267,
"access": "private",
"tagname": "",
"class": "CanvasRenderer"
@ -1024,21 +1077,35 @@
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 71,
"line": 73,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 110,
"line": 88,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 160,
"line": 98,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 137,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 187,
"description": "Renders the stage to its webGL view",
"itemtype": "method",
"name": "render",
@ -1053,28 +1120,28 @@
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 245,
"line": 284,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 287,
"line": 337,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 490,
"line": 540,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 568,
"line": 617,
"description": "resizes the webGL view to the specified width and height",
"itemtype": "method",
"name": "resize",
@ -1094,42 +1161,42 @@
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 593,
"line": 642,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 673,
"line": 722,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 713,
"line": 762,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 741,
"line": 790,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 818,
"line": 867,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 827,
"line": 876,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
@ -1148,7 +1215,7 @@
},
{
"file": "src/pixi/textures/BaseTexture.js",
"line": 26,
"line": 27,
"description": "[read only] The width of the base texture set when the image has loaded",
"itemtype": "property",
"name": "width",
@ -1157,7 +1224,7 @@
},
{
"file": "src/pixi/textures/BaseTexture.js",
"line": 32,
"line": 33,
"description": "[read only] The height of the base texture set when the image has loaded",
"itemtype": "property",
"name": "height",
@ -1166,13 +1233,32 @@
},
{
"file": "src/pixi/textures/BaseTexture.js",
"line": 39,
"line": 40,
"description": "The source that is loaded to create the texture",
"itemtype": "property",
"name": "source",
"type": "Image",
"class": "BaseTexture"
},
{
"file": "src/pixi/textures/BaseTexture.js",
"line": 102,
"description": "Helper function that returns a base texture based on an image url\n If the image is not in the base texture cache it will be created and loaded",
"static": 1,
"itemtype": "method",
"name": "fromImage",
"params": [
{
"name": "imageUrl",
"description": "The image url of the texture",
"type": "String"
}
],
"return": {
"description": "BaseTexture"
},
"class": "BaseTexture"
},
{
"file": "src/pixi/textures/Texture.js",
"line": 1,
@ -1181,7 +1267,7 @@
},
{
"file": "src/pixi/textures/Texture.js",
"line": 28,
"line": 31,
"description": "The base texture of this texture",
"itemtype": "property",
"name": "baseTexture",
@ -1190,7 +1276,7 @@
},
{
"file": "src/pixi/textures/Texture.js",
"line": 37,
"line": 40,
"description": "The frame specifies the region of the base texture that this texture uses",
"itemtype": "property",
"name": "frame",
@ -1199,7 +1285,7 @@
},
{
"file": "src/pixi/textures/Texture.js",
"line": 75,
"line": 83,
"description": "Specifies the rectangle region of the baseTexture",
"itemtype": "method",
"name": "setFrame",
@ -1214,7 +1300,7 @@
},
{
"file": "src/pixi/textures/Texture.js",
"line": 93,
"line": 105,
"description": "Helper function that returns a texture based on an image url\n If the image is not in the texture cache it will be created and loaded",
"static": 1,
"itemtype": "method",
@ -1233,7 +1319,7 @@
},
{
"file": "src/pixi/textures/Texture.js",
"line": 131,
"line": 127,
"description": "Helper function that returns a texture based on a frame id\n If the frame id is not in the texture cache an error will be thrown",
"itemtype": "method",
"name": "fromFrame",
@ -1251,7 +1337,7 @@
},
{
"file": "src/pixi/textures/Texture.js",
"line": 146,
"line": 142,
"description": "Helper function that returns a texture based on a canvas element\n If the canvas is not in the texture cache it will be created and loaded",
"static": 1,
"itemtype": "method",
@ -1270,7 +1356,7 @@
},
{
"file": "src/pixi/textures/Texture.js",
"line": 162,
"line": 158,
"description": "Adds a texture to the textureCache.",
"itemtype": "method",
"name": "addTextureToCache",
@ -1290,7 +1376,7 @@
},
{
"file": "src/pixi/textures/Texture.js",
"line": 174,
"line": 170,
"description": "Remove a texture from the textureCache.",
"itemtype": "method",
"name": "removeTextureFromCache",
@ -1755,7 +1841,7 @@
},
{
"file": "src/pixi/InteractionManager.js",
"line": 509,
"line": 512,
"description": "This point stores the global coords of where the touch/mouse event happened",
"itemtype": "property",
"name": "global",
@ -1764,7 +1850,7 @@
},
{
"file": "src/pixi/InteractionManager.js",
"line": 519,
"line": 522,
"description": "The target Sprite that was interacted with",
"itemtype": "property",
"name": "target",
@ -1773,7 +1859,7 @@
},
{
"file": "src/pixi/InteractionManager.js",
"line": 527,
"line": 530,
"description": "This will return the local coords of the specified displayObject for this InteractionData",
"itemtype": "method",
"name": "getLocalPosition",
@ -2057,7 +2143,7 @@
},
{
"file": "src/pixi/Sprite.js",
"line": 83,
"line": 103,
"itemtype": "method",
"name": "setTexture",
"params": [
@ -2072,7 +2158,7 @@
},
{
"file": "src/pixi/Sprite.js",
"line": 101,
"line": 119,
"access": "private",
"tagname": "",
"class": "Sprite",
@ -2080,7 +2166,7 @@
},
{
"file": "src/pixi/Sprite.js",
"line": 113,
"line": 135,
"description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded",
"itemtype": "method",
"name": "fromFrame",
@ -2101,7 +2187,7 @@
},
{
"file": "src/pixi/Sprite.js",
"line": 129,
"line": 151,
"description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded",
"itemtype": "method",
"name": "fromImage",
@ -2149,6 +2235,81 @@
],
"class": "Stage",
"module": "PIXI"
},
{
"file": "src/pixi/Stage.js",
"line": 71,
"description": "This will return the point containing global coords of the mouse.",
"itemtype": "method",
"name": "getMousePosition",
"return": {
"description": "The point containing the coords of the global InteractionData position.",
"type": "Point"
},
"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": [
@ -2160,6 +2321,10 @@
"message": "unknown tag: internal",
"line": " src/pixi/Stage.js:37"
},
{
"message": "unknown tag: methos",
"line": " src/pixi/Text.js:36"
},
{
"message": "Missing item type",
"line": " src/pixi/extras/Rope.js:1"
@ -2194,23 +2359,23 @@
},
{
"message": "Missing item type\nresizes the canvas view to the specified width and height",
"line": " src/pixi/renderers/CanvasRenderer.js:105"
"line": " src/pixi/renderers/CanvasRenderer.js:112"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/CanvasRenderer.js:119"
"line": " src/pixi/renderers/CanvasRenderer.js:126"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/CanvasRenderer.js:194"
"line": " src/pixi/renderers/CanvasRenderer.js:203"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/CanvasRenderer.js:229"
"line": " src/pixi/renderers/CanvasRenderer.js:238"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/CanvasRenderer.js:256"
"line": " src/pixi/renderers/CanvasRenderer.js:267"
},
{
"message": "Missing item type",
@ -2242,47 +2407,55 @@
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:71"
"line": " src/pixi/renderers/WebGLRenderer.js:73"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:110"
"line": " src/pixi/renderers/WebGLRenderer.js:88"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:245"
"line": " src/pixi/renderers/WebGLRenderer.js:98"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:287"
"line": " src/pixi/renderers/WebGLRenderer.js:137"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:490"
"line": " src/pixi/renderers/WebGLRenderer.js:284"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:593"
"line": " src/pixi/renderers/WebGLRenderer.js:337"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:673"
"line": " src/pixi/renderers/WebGLRenderer.js:540"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:713"
"line": " src/pixi/renderers/WebGLRenderer.js:642"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:741"
"line": " src/pixi/renderers/WebGLRenderer.js:722"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:818"
"line": " src/pixi/renderers/WebGLRenderer.js:762"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:827"
"line": " src/pixi/renderers/WebGLRenderer.js:790"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:867"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:876"
},
{
"message": "Missing item type",
@ -2354,11 +2527,23 @@
},
{
"message": "Missing item type",
"line": " src/pixi/Sprite.js:101"
"line": " src/pixi/Sprite.js:119"
},
{
"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"
}
]
}

2
docs/files/src_pixi_DisplayObject.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/files/src_pixi_DisplayObjectContainer.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

13
docs/files/src_pixi_InteractionManager.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -438,13 +440,16 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id;
var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
var x1 = -item.width * item.anchor.x;
var width = item.texture.frame.width;
var height = item.texture.frame.height;
if(x &gt; x1 &amp;&amp; x &lt; x1 + item.width)
var x1 = -width * item.anchor.x;
if(x &gt; x1 &amp;&amp; x &lt; x1 + width)
{
var y1 = -item.height * item.anchor.y;
var y1 = -height * item.anchor.y;
if(y &gt; y1 &amp;&amp; y &lt; y1 + item.height)
if(y &gt; y1 &amp;&amp; y &lt; y1 + height)
{
return true;
}

2
docs/files/src_pixi_MovieClip.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/files/src_pixi_Pixi.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/files/src_pixi_Point.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/files/src_pixi_Rectangle.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

40
docs/files/src_pixi_Sprite.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -170,19 +172,17 @@ PIXI.Sprite = function(texture)
* @property width
* @type #Number
*&#x2F;
this.width = 0;
this._width = 0;
&#x2F;**
* The height of the sprite (this is initially set by the texture)
* @property height
* @type #Number
*&#x2F;
this.height = 0;
this._height = 0;
if(texture.baseTexture.hasLoaded)
{
this.width = this.texture.frame.width;
this.height = this.texture.frame.height;
this.updateFrame = true;
}
else
@ -202,6 +202,28 @@ PIXI.Sprite = function(texture)
PIXI.Sprite.constructor = PIXI.Sprite;
PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
&#x2F;&#x2F; OOH! shiney new getters and setters for width and height
&#x2F;&#x2F; The width and height now modify the scale (this is what flash does, nice and tidy!)
Object.defineProperty(PIXI.Sprite.prototype, &#x27;width&#x27;, {
get: function() {
return this.scale.x * this.texture.frame.width;
},
set: function(value) {
this.scale.x = value &#x2F; this.texture.frame.width
this._width = value;
}
});
Object.defineProperty(PIXI.Sprite.prototype, &#x27;height&#x27;, {
get: function() {
return this.scale.y * this.texture.frame.height;
},
set: function(value) {
this.scale.y = value &#x2F; this.texture.frame.height
this._height = value;
}
});
&#x2F;**
@method setTexture
@param texture {Texture} The PIXI texture that is displayed by the sprite
@ -215,8 +237,6 @@ PIXI.Sprite.prototype.setTexture = function(texture)
}
this.texture = texture;
this.width = texture.frame.width;
this.height = texture.frame.height;
this.updateFrame = true;
}
@ -225,8 +245,12 @@ PIXI.Sprite.prototype.setTexture = function(texture)
*&#x2F;
PIXI.Sprite.prototype.onTextureUpdate = function(event)
{
this.width = this.width || this.texture.frame.width;
this.height = this.height || this.texture.frame.height;
&#x2F;&#x2F;this.texture.removeEventListener( &#x27;update&#x27;, this.onTextureUpdateBind );
&#x2F;&#x2F; so if _width is 0 then width was not set..
if(this._width)this.scale.x = this._width &#x2F; this.texture.frame.width;
if(this._height)this.scale.y = this._height &#x2F; this.texture.frame.height;
this.updateFrame = true;
}

12
docs/files/src_pixi_Stage.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -190,6 +192,16 @@ PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
this.backgroundColorString = &quot;#&quot; + this.backgroundColor.toString(16);
}
&#x2F;**
* This will return the point containing global coords of the mouse.
* @method getMousePosition
* @return {Point} The point containing the coords of the global InteractionData position.
*&#x2F;
PIXI.Stage.prototype.getMousePosition = function()
{
return this.interactionManager.mouse.global;
}
PIXI.Stage.prototype.__addChild = function(child)
{
if(child.interactive)this.dirty = true;

292
docs/files/src_pixi_Text.js.html Normal file
View file

@ -0,0 +1,292 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>src&#x2F;pixi&#x2F;Text.js - Pixi.JS</title>
<link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.8.0&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
<link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
<script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.8.0&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="http:&#x2F;&#x2F;www.goodboydigital.com&#x2F;pixijs&#x2F;logo_small.png" title="Pixi.JS"></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 1.0.0</em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="..&#x2F;classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
<li><a href="..&#x2F;classes/InteractionManager.html">InteractionManager</a></li>
<li><a href="..&#x2F;classes/MovieClip.html">MovieClip</a></li>
<li><a href="..&#x2F;classes/Point.html">Point</a></li>
<li><a href="..&#x2F;classes/Rectangle.html">Rectangle</a></li>
<li><a href="..&#x2F;classes/Sprite.html">Sprite</a></li>
<li><a href="..&#x2F;classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="..&#x2F;classes/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="..&#x2F;classes/WebGLRenderer.html">WebGLRenderer</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="..&#x2F;modules/PIXI.html">PIXI</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1 class="file-heading">File: src&#x2F;pixi&#x2F;Text.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
&#x2F;**
* @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
*&#x2F;
&#x2F;**
* 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 &quot;bold 20px Arial&quot;
* @param fillStyle {Object} a canvas fillstyle that will be used on the text eg &quot;red&quot;, &quot;#00FF00&quot; can also be null
* @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg &quot;blue&quot;, &quot;#FCFF00&quot; can also be null
* @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
*&#x2F;
PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
{
this.canvas = document.createElement(&quot;canvas&quot;);
this.context = this.canvas.getContext(&quot;2d&quot;);
&#x2F;&#x2F;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));
&#x2F;&#x2F; need to store a canvas that can
}
&#x2F;&#x2F; constructor
PIXI.Text.constructor = PIXI.Text;
PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
&#x2F;**
* Set the copy for the text object
* @methos setText
* @param text {String} The copy that you would like the text to display
*&#x2F;
PIXI.Text.prototype.setText = function(text)
{
this.text = text || &quot; &quot;;
this.dirty = true;
}
&#x2F;**
* Set the style of the text
* @method setStyle
* @constructor
* @param fontStyle {String} the style and size of the font eg &quot;bold 20px Arial&quot;
* @param fillStyle {Object} a canvas fillstyle that will be used on the text eg &quot;red&quot;, &quot;#00FF00&quot; can also be null
* @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg &quot;blue&quot;, &quot;#FCFF00&quot; can also be null
* @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
*&#x2F;
PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
{
this.fontStyle = fontStyle || &quot;bold 20pt Arial&quot;;
this.fillStyle = fillStyle;
this.strokeStyle = strokeStyle;
this.strokeThickness = strokeThickness || 0;
this.dirty = true;
}
&#x2F;**
* @private
*&#x2F;
PIXI.Text.prototype.updateText = function()
{
&#x2F;&#x2F; console.log(this.text);
this.context.font = this.fontStyle;
this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness&#x2F;&#x2F;textDimensions.width;
this.canvas.height = this.determineFontHeight(&quot;font: &quot; + this.fontStyle + &quot;;&quot;)+ this.strokeThickness;&#x2F;&#x2F; 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=&quot;top&quot;;
if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness&#x2F;2, this.strokeThickness&#x2F;2);
if(this.strokeStyle &amp;&amp; this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness&#x2F;2, this.strokeThickness&#x2F;2);
&#x2F;&#x2F; console.log(&quot;&#x2F;&#x2F;&quot;)
}
PIXI.Text.prototype.updateTransform = function()
{
if(this.dirty)
{
this.updateText();
&#x2F;&#x2F; 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 );
}
&#x2F;*
* http:&#x2F;&#x2F;stackoverflow.com&#x2F;users&#x2F;34441&#x2F;ellisbben
* great solution to the problem!
*&#x2F;
PIXI.Text.prototype.determineFontHeight = function(fontStyle)
{
&#x2F;&#x2F; build a little refference dictionary so if the font style has been used return a
&#x2F;&#x2F; cached version...
var result = PIXI.Text.heightCache[fontStyle]
if(!result)
{
var body = document.getElementsByTagName(&quot;body&quot;)[0];
var dummy = document.createElement(&quot;div&quot;);
var dummyText = document.createTextNode(&quot;M&quot;);
dummy.appendChild(dummyText);
dummy.setAttribute(&quot;style&quot;, 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 = {};
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></script>
</body>
</html>

2
docs/files/src_pixi_extras_Rope.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/files/src_pixi_extras_Strip.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/files/src_pixi_extras_TilingSprite.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/files/src_pixi_loaders_AssetLoader.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/files/src_pixi_loaders_SpriteSheetLoader.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

17
docs/files/src_pixi_renderers_CanvasRenderer.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -199,6 +201,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
&#x2F;&#x2F; update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -222,6 +225,12 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this);
}
}
&#x2F;&#x2F; remove frame updates..
if(PIXI.Texture.frameUpdates.length &gt; 0)
{
PIXI.Texture.frameUpdates = [];
}
}
&#x2F;**
@ -290,8 +299,8 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
frame.height,
(displayObject.anchor.x - displayObject.texture.trim.x) * -frame.width,
(displayObject.anchor.y - displayObject.texture.trim.y) * -frame.height,
displayObject.width,
displayObject.height);
frame.width,
frame.height);
&#x2F;&#x2F;}
}
}
@ -311,6 +320,8 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
{
this.renderDisplayObject(displayObject.children[i]);
}
}
&#x2F;**
@ -371,6 +382,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1&#x2F;tileScale.x, 1&#x2F;tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}

8
docs/files/src_pixi_renderers_WebGLBatch.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -536,8 +538,8 @@ PIXI.WebGLBatch.prototype.update = function()
while(displayObject)
{
width = displayObject.width;
height = displayObject.height;
width = displayObject.texture.frame.width;
height = displayObject.texture.frame.height;
aX = displayObject.anchor.x - displayObject.texture.trim.x
aY = displayObject.anchor.y - displayObject.texture.trim.y
@ -570,7 +572,7 @@ PIXI.WebGLBatch.prototype.update = function()
this.verticies[index + 6] = a * w1 + c * h0 + tx;
this.verticies[index + 7] = d * h0 + b * w1 + ty;
if(displayObject.updateFrame)
if(displayObject.updateFrame || displayObject.texture.updateFrame)
{
this.dirtyUVS = true;

69
docs/files/src_pixi_renderers_WebGLRenderer.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -142,6 +144,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*&#x2F;
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
&#x2F;&#x2F; do a catch.. only 1 webGL renderer..
&#x2F;&#x2F;console.log(transparent)
this.transparent = !!transparent;
@ -190,6 +194,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
&#x2F;&#x2F; constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
&#x2F;**
* @private
*&#x2F;
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
&#x2F;**
* @private
*&#x2F;
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
&#x2F;**
* @private
*&#x2F;
@ -307,12 +336,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
&#x2F;&#x2F; update any textures
for (var i=0; i &lt; PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i &lt; PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
&#x2F;&#x2F; empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
&#x2F;&#x2F; recursivly loop through all items!
this.checkVisibility(stage, true);
@ -362,6 +392,17 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this);
}
}
&#x2F;&#x2F; after rendering lets confirm all frames that have been uodated..
if(PIXI.Texture.frameUpdates.length &gt; 0)
{
for (var i=0; i &lt; PIXI.Texture.frameUpdates.length; i++)
{
PIXI.Texture.frameUpdates[i].updateFrame = false;
};
PIXI.Texture.frameUpdates = [];
}
}
&#x2F;**
@ -406,12 +447,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
&#x2F;**
* @private
*&#x2F;
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; &#x2F;&#x2F; means it was removed
if(displayObject.__inWebGL)return; &#x2F;&#x2F;means it is already in webgL
@ -552,7 +604,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*&#x2F;
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -576,7 +628,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*&#x2F;
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) &#x2F;&#x2F; if this is invalid it means
@ -635,7 +687,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -660,7 +711,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
&#x2F;&#x2F; wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -672,8 +723,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
&#x2F;&#x2F;console.log(&quot;MERGE&quot;)
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -681,7 +732,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}

2
docs/files/src_pixi_renderers_WebGLShaders.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

39
docs/files/src_pixi_textures_BaseTexture.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -126,6 +128,7 @@
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
&#x2F;**
* A texture stores the information that represents an image. All textures have a base texture
@ -208,9 +211,43 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.fromImage = function(imageUrl)
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
&#x2F;**
*
* Helper function that returns a base texture based on an image url
* If the image is not in the base texture cache it will be created and loaded
* @static
* @method fromImage
* @param imageUrl {String} The image url of the texture
* @return BaseTexture
*&#x2F;
PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin)
{
var baseTexture = PIXI.BaseTextureCache[imageUrl];
if(!baseTexture)
{
var image = new Image();
if (crossorigin)
{
image.crossOrigin = &#x27;&#x27;;
}
image.src = imageUrl;
baseTexture = new PIXI.BaseTexture(image);
PIXI.BaseTextureCache[imageUrl] = baseTexture;
}
return baseTexture;
}
</pre>

37
docs/files/src_pixi_textures_Texture.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -146,6 +148,9 @@ PIXI.Texture = function(baseTexture, frame)
}
this.trim = new PIXI.Point();
if(baseTexture instanceof PIXI.Texture)
baseTexture = baseTexture.baseTexture;
&#x2F;**
* The base texture of this texture
@ -194,6 +199,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: &#x27;update&#x27;, content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
&#x2F;**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -209,7 +219,11 @@ PIXI.Texture.prototype.setFrame = function(frame)
{
throw new Error(&quot;Texture Error: frame does not fit inside the base Texture dimensions &quot; + this);
}
&#x2F;&#x2F;this.updateFrame = true;
this.updateFrame = true;
PIXI.Texture.frameUpdates.push(this);
&#x2F;&#x2F;this.dispatchEvent( { type: &#x27;update&#x27;, content: this } );
}
&#x2F;**
@ -227,24 +241,8 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
var baseTexture = PIXI.BaseTextureCache[imageUrl];
if(!baseTexture)
{
var image = new Image();&#x2F;&#x2F;new Image();
if (crossorigin)
{
image.crossOrigin = &#x27;&#x27;;
}
image.src = imageUrl;
baseTexture = new PIXI.BaseTexture(image);
PIXI.BaseTextureCache[imageUrl] = baseTexture;
}
texture = new PIXI.Texture(baseTexture);
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}
return texture;
@ -307,6 +305,9 @@ PIXI.Texture.removeTextureFromCache = function(id)
return texture;
}
&#x2F;&#x2F; this is more for webGL.. it contains updated frames..
PIXI.Texture.frameUpdates = [];
</pre>
</div>

2
docs/files/src_pixi_utils_Detector.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/files/src_pixi_utils_EventTarget.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/files/src_pixi_utils_Utils.js.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

2
docs/index.html
View file

@ -67,6 +67,8 @@
<li><a href=".&#x2F;classes/Stage.html">Stage</a></li>
<li><a href=".&#x2F;classes/Text.html">Text</a></li>
<li><a href=".&#x2F;classes/Texture.html">Texture</a></li>
<li><a href=".&#x2F;classes/TilingSprite.html">TilingSprite</a></li>

10
docs/modules/PIXI.html
View file

@ -67,6 +67,8 @@
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
@ -124,7 +126,7 @@
<div class="foundat">
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_Stage.js.html#l5"><code>src&#x2F;pixi&#x2F;Stage.js:5</code></a>
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_Text.js.html#l5"><code>src&#x2F;pixi&#x2F;Text.js:5</code></a>
</div>
@ -224,6 +226,12 @@
</a>
</li>
<li class="module-class">
<a href="..&#x2F;classes/Text.html">
Text
</a>
</li>
<li class="module-class">
<a href="..&#x2F;classes/Texture.html">
Texture

2
examples/example 1 - Basics/index.html
View file

@ -10,7 +10,7 @@
}
</style>
<script src="pixi.js"></script>
<script src="../../src/pixi/renderers/WebGLRenderer.js"></script>
</head>
<body>
<script>

490
examples/example 1 - Basics/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-22
* Compiled: 2013-04-16
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -435,64 +435,6 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
}
}
/**
* Swaps the depth of 2 displayObjects
* @method swapChildren
* @param DisplayObject {DisplayObject}
* @param DisplayObject2 {DisplayObject}
*/
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
{
// TODO I already know this??
var index = this.children.indexOf( child );
var index2 = this.children.indexOf( child2 );
if ( index !== -1 && index2 !== -1 )
{
// cool
if(this.stage)
{
// this is to satisfy the webGL batching..
// TODO sure there is a nicer way to achieve this!
this.stage.__removeChild(child);
this.stage.__removeChild(child2);
this.stage.__addChild(child);
this.stage.__addChild(child2);
}
// swap the indexes..
child.childIndex = index2;
child2.childIndex = index;
// swap the positions..
this.children[index] = child2;
this.children[index2] = child;
}
else
{
throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this);
}
}
/**
* Returns the Child at the specified index
* @method getChildAt
* @param index {Number}
*/
PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
{
if(index >= 0 && index < this.children.length)
{
return this.children[index];
}
else
{
throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this);
}
}
/**
* Removes a child from the container.
* @method removeChild
@ -587,17 +529,19 @@ PIXI.Sprite = function(texture)
* @property width
* @type #Number
*/
this._width = 0;
this.width = 0;
/**
* The height of the sprite (this is initially set by the texture)
* @property height
* @type #Number
*/
this._height = 0;
this.height = 0;
if(texture.baseTexture.hasLoaded)
{
this.width = this.texture.frame.width;
this.height = this.texture.frame.height;
this.updateFrame = true;
}
else
@ -617,28 +561,6 @@ PIXI.Sprite = function(texture)
PIXI.Sprite.constructor = PIXI.Sprite;
PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
// OOH! shiney new getters and setters for width and height
// The width and height now modify the scale (this is what flash does, nice and tidy!)
Object.defineProperty(PIXI.Sprite.prototype, 'width', {
get: function() {
return this.scale.x * this.texture.frame.width;
},
set: function(value) {
this.scale.x = value / this.texture.frame.width
this._width = value;
}
});
Object.defineProperty(PIXI.Sprite.prototype, 'height', {
get: function() {
return this.scale.y * this.texture.frame.height;
},
set: function(value) {
this.scale.y = value / this.texture.frame.height
this._height = value;
}
});
/**
@method setTexture
@param texture {Texture} The PIXI texture that is displayed by the sprite
@ -652,6 +574,8 @@ PIXI.Sprite.prototype.setTexture = function(texture)
}
this.texture = texture;
this.width = texture.frame.width;
this.height = texture.frame.height;
this.updateFrame = true;
}
@ -660,12 +584,8 @@ PIXI.Sprite.prototype.setTexture = function(texture)
*/
PIXI.Sprite.prototype.onTextureUpdate = function(event)
{
//this.texture.removeEventListener( 'update', this.onTextureUpdateBind );
// so if _width is 0 then width was not set..
if(this._width)this.scale.x = this._width / this.texture.frame.width;
if(this._height)this.scale.y = this._height / this.texture.frame.height;
this.width = this.width || this.texture.frame.width;
this.height = this.height || this.texture.frame.height;
this.updateFrame = true;
}
@ -738,20 +658,6 @@ PIXI.MovieClip = function(textures)
* @type Number
*/
this.animationSpeed = 1;
/**
* Whether or not the movie clip repeats after playing.
* @property loop
* @type Boolean
*/
this.loop = true;
/**
* Function to call when a MovieClip finishes playing
* @property onComplete
* @type Function
*/
this.onComplete = null;
/**
* [read only] indicates if the MovieClip is currently playing
@ -815,18 +721,7 @@ PIXI.MovieClip.prototype.updateTransform = function()
this.currentFrame += this.animationSpeed;
var round = (this.currentFrame + 0.5) | 0;
if(this.loop || round < this.textures.length)
{
this.setTexture(this.textures[round % this.textures.length]);
}
else if(round >= this.textures.length)
{
this.gotoAndStop(this.textures.length - 1);
if(this.onComplete)
{
this.onComplete();
}
}
this.setTexture(this.textures[round % this.textures.length]);
}
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
@ -1134,7 +1029,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
var global = interactionData.global;
if(!item.visible)return false;
if(item instanceof PIXI.Sprite)
{
var worldTransform = item.worldTransform;
@ -1146,16 +1041,13 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id;
var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
var width = item.texture.frame.width;
var height = item.texture.frame.height;
var x1 = -item.width * item.anchor.x;
var x1 = -width * item.anchor.x;
if(x > x1 && x < x1 + width)
if(x > x1 && x < x1 + item.width)
{
var y1 = -height * item.anchor.y;
var y1 = -item.height * item.anchor.y;
if(y > y1 && y < y1 + height)
if(y > y1 && y < y1 + item.height)
{
return true;
}
@ -1189,8 +1081,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
if(hit)return true;
}
@ -1452,16 +1344,6 @@ PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
this.backgroundColorString = "#" + this.backgroundColor.toString(16);
}
/**
* This will return the point containing global coords of the mouse.
* @method getMousePosition
* @return {Point} The point containing the coords of the global InteractionData position.
*/
PIXI.Stage.prototype.getMousePosition = function()
{
return this.interactionManager.mouse.global;
}
PIXI.Stage.prototype.__addChild = function(child)
{
if(child.interactive)this.dirty = true;
@ -2126,7 +2008,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
{
if(this.contextLost)return;
// if rendering a new stage clear the batchs..
if(this.__stage !== stage)
{
@ -2142,7 +2025,6 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
}
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
@ -2179,10 +2061,6 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
{
this.batchs[i].render();
}
else if(renderable instanceof PIXI.TilingSprite)
{
if(renderable.visible)this.renderTilingSprite(renderable);
}
else if(renderable instanceof PIXI.Strip)
{
if(renderable.visible)this.renderStrip(renderable);
@ -2200,17 +2078,6 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this);
}
}
// after rendering lets confirm all frames that have been uodated..
if(PIXI.Texture.frameUpdates.length > 0)
{
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
{
PIXI.Texture.frameUpdates[i].updateFrame = false;
};
PIXI.Texture.frameUpdates = [];
}
}
/**
@ -2232,22 +2099,9 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// reguler...
//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
if(!texture._powerOf2)
{
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
}
else
{
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
}
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
// gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -2438,13 +2292,6 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(batch);
}
}
else if(displayObject instanceof PIXI.TilingSprite)
{
// add to a batch!!
this.initTilingSprite(displayObject);
this.batchs.push(displayObject);
}
else if(displayObject instanceof PIXI.Strip)
{
@ -2453,7 +2300,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -2560,127 +2407,6 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
projectionMatrix[13] = 1;
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.initTilingSprite = function(sprite)
{
var gl = this.gl;
// make the texture tilable..
sprite.verticies = new Float32Array([0, 0,
sprite.width, 0,
sprite.width, sprite.height,
0, sprite.height]);
sprite.uvs = new Float32Array([0, 0,
1, 0,
1, 1,
0, 1]);
sprite.colors = new Float32Array([1,1,1,1]);
sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]);
sprite._vertexBuffer = gl.createBuffer();
sprite._indexBuffer = gl.createBuffer();
sprite._uvBuffer = gl.createBuffer();
sprite._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, sprite.uvs, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, sprite.colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW);
// return ( (x > 0) && ((x & (x - 1)) == 0) );
if(sprite.texture.baseTexture._glTexture)
{
gl.bindTexture(gl.TEXTURE_2D, sprite.texture.baseTexture._glTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
sprite.texture.baseTexture._powerOf2 = true;
}
else
{
sprite.texture.baseTexture._powerOf2 = true;
}
/*
var context = this.context;
if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat");
context.beginPath();
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
// offset
context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x, tilePosition.y);
context.fillStyle = sprite.__tilePattern;
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.scale(1/tileScale.x, 1/tileScale.y);
*/
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.renderTilingSprite = function(sprite)
{
var gl = this.gl;
var shaderProgram = this.shaderProgram;
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
var offsetX = tilePosition.x/sprite.texture.baseTexture.width;
var offsetY = tilePosition.y/sprite.texture.baseTexture.height;
var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x///sprite.texture.baseTexture.width;
var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y///sprite.texture.baseTexture.height;
//
//sprite.dirty = true;
sprite.uvs[0] = 0 + offsetX
sprite.uvs[1] = 0 - offsetY;
sprite.uvs[2] = (1 * scaleX) +offsetX
sprite.uvs[3] = 0 - offsetY;
sprite.uvs[4] = (1 *scaleX) + offsetX
sprite.uvs[5] = (1 *scaleY) - offsetY;
sprite.uvs[6] = 0 + offsetX
sprite.uvs[7] = (1 *scaleY) - offsetY;
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs)
this.renderStrip(sprite);
}
/**
* @private
*/
@ -2778,7 +2504,7 @@ PIXI.WebGLRenderer.prototype.renderStrip = function(strip)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}
//console.log(gl.TRIANGLE_STRIP)
gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.projectionMatrix);
@ -3239,8 +2965,8 @@ PIXI.WebGLBatch.prototype.update = function()
while(displayObject)
{
width = displayObject.texture.frame.width;
height = displayObject.texture.frame.height;
width = displayObject.width;
height = displayObject.height;
aX = displayObject.anchor.x - displayObject.texture.trim.x
aY = displayObject.anchor.y - displayObject.texture.trim.y
@ -3273,7 +2999,7 @@ PIXI.WebGLBatch.prototype.update = function()
this.verticies[index + 6] = a * w1 + c * h0 + tx;
this.verticies[index + 7] = d * h0 + b * w1 + ty;
if(displayObject.updateFrame || displayObject.texture.updateFrame)
if(displayObject.updateFrame)
{
this.dirtyUVS = true;
@ -3483,12 +3209,6 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this);
}
}
// remove frame updates..
if(PIXI.Texture.frameUpdates.length > 0)
{
PIXI.Texture.frameUpdates = [];
}
}
/**
@ -3557,8 +3277,8 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
frame.height,
(displayObject.anchor.x - displayObject.texture.trim.x) * -frame.width,
(displayObject.anchor.y - displayObject.texture.trim.y) * -frame.height,
frame.width,
frame.height);
displayObject.width,
displayObject.height);
//}
}
}
@ -3567,19 +3287,12 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
this.renderStrip(displayObject);
}
else if(displayObject instanceof PIXI.TilingSprite)
{
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
this.renderTilingSprite(displayObject);
}
// render!
for (var i=0; i < displayObject.children.length; i++)
{
this.renderDisplayObject(displayObject.children[i]);
}
}
/**
@ -3617,33 +3330,6 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
//context.globalCompositeOperation = 'source-over';
}
/**
* @private
*/
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{
var context = this.context;
if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat");
context.beginPath();
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
// offset
context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x, tilePosition.y);
context.fillStyle = sprite.__tilePattern;
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
}
/**
* @private
*/
@ -3666,8 +3352,8 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2]* strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3]* strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
context.save();
@ -3979,65 +3665,6 @@ PIXI.Rope.prototype.setTexture = function(texture)
/**
* @author Mat Groves http://matgroves.com/
*/
/**
* A tiling sprite is a fast way of rendering a tiling image
* @class TilingSprite
* @extends DisplayObjectContainer
* @constructor
* @param texture {Texture} the texture of the tiling sprite
* @param width {Number} the width of the tiling sprite
* @param height {Number} the height of the tiling sprite
*/
PIXI.TilingSprite = function(texture, width, height)
{
PIXI.DisplayObjectContainer.call( this );
this.texture = texture;
this.width = width;
this.height = height;
this.renderable = true;
/**
* The scaling of the image that is being tiled
* @property tileScale
* @type Point
*/
this.tileScale = new PIXI.Point(2,1);
/**
* The offset position of the image that is being tiled
* @property tileScale
* @type Point
*/
this.tilePosition = new PIXI.Point(0,0);
this.blendMode = PIXI.blendModes.NORMAL
}
// constructor
PIXI.TilingSprite.constructor = PIXI.TilingSprite;
PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
PIXI.TilingSprite.prototype.setTexture = function(texture)
{
//TODO SET THE TEXTURES
//TODO VISIBILITY
// stop current texture
this.texture = texture;
this.updateFrame = true;
}
PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
{
this.updateFrame = true;
}
// some helper functions..
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -4120,37 +3747,15 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
/**
*
* Helper function that returns a base texture based on an image url
* If the image is not in the base texture cache it will be created and loaded
* @static
* @method fromImage
* @param imageUrl {String} The image url of the texture
* @return BaseTexture
*/
PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin)
PIXI.BaseTexture.prototype.fromImage = function(imageUrl)
{
var baseTexture = PIXI.BaseTextureCache[imageUrl];
if(!baseTexture)
{
var image = new Image();
if (crossorigin)
{
image.crossOrigin = '';
}
image.src = imageUrl;
baseTexture = new PIXI.BaseTexture(image);
PIXI.BaseTextureCache[imageUrl] = baseTexture;
}
return baseTexture;
}
/**
@ -4179,9 +3784,6 @@ PIXI.Texture = function(baseTexture, frame)
}
this.trim = new PIXI.Point();
if(baseTexture instanceof PIXI.Texture)
baseTexture = baseTexture.baseTexture;
/**
* The base texture of this texture
@ -4245,11 +3847,7 @@ PIXI.Texture.prototype.setFrame = function(frame)
{
throw new Error("Texture Error: frame does not fit inside the base Texture dimensions " + this);
}
this.updateFrame = true;
PIXI.Texture.frameUpdates.push(this);
//this.dispatchEvent( { type: 'update', content: this } );
//this.updateFrame = true;
}
/**
@ -4267,9 +3865,24 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
var baseTexture = PIXI.BaseTextureCache[imageUrl];
if(!baseTexture)
{
var image = new Image();//new Image();
if (crossorigin)
{
image.crossOrigin = '';
}
image.src = imageUrl;
baseTexture = new PIXI.BaseTexture(image);
PIXI.BaseTextureCache[imageUrl] = baseTexture;
}
texture = new PIXI.Texture(baseTexture);
PIXI.TextureCache[imageUrl] = texture;
}
return texture;
@ -4332,9 +3945,6 @@ PIXI.Texture.removeTextureFromCache = function(id)
return texture;
}
// this is more for webGL.. it contains updated frames..
PIXI.Texture.frameUpdates = [];
/**
* @author Mat Groves http://matgroves.com/ @Doormat23

70
examples/example 10 - Text/index.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>
<title>pixi.js example 10 Text</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(620, 400);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame( animate );
var textSample = new PIXI.Text("Pixi.js can has text!", "50px Arial", "rgba(1,1,1,0.5)", "red", 1);
var spinningText = new PIXI.Text("I'm fun!", "italic 30px Arial", "green");
spinningText.anchor.x = spinningText.anchor.y = 0.5;
spinningText.position.x = 620/2;
spinningText.position.y = 400/2;
var countingText = new PIXI.Text("Hello!", "70px Arial", "red");
countingText.position.x = 50;
countingText.position.y = 250;
stage.addChild(textSample);
stage.addChild(spinningText);
stage.addChild(countingText);
count = 0;
score = 0;
stage.addChild(bunny);
function animate() {
requestAnimFrame( animate );
count++;
if(count == 50)
{
count = 0;
score ++
countingText.setText("I count: " + score )
}
// just for fun, lets rotate mr rabbit a little
spinningText.rotation += 0.03;
// render the stage
renderer.render(stage);
}
</script>
</body>
</html>

4798
examples/example 10 - Text/pixi.js Normal file
View file

File diff suppressed because it is too large Load diff

229
examples/example 2 - SpriteSheet/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-22
* Compiled: 2013-04-24
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -832,6 +832,155 @@ PIXI.MovieClip.prototype.updateTransform = function()
* @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.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
if(this.strokeStyle && this.strokeThickness)this.context.strokeText(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 = {};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
@ -1980,6 +2129,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
@ -2028,6 +2179,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
@ -2145,12 +2321,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
// empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// recursivly loop through all items!
this.checkVisibility(stage, true);
@ -2255,12 +2432,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; // means it was removed
if(displayObject.__inWebGL)return; //means it is already in webgL
@ -2401,7 +2589,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -2425,7 +2613,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
@ -2484,7 +2672,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -2509,7 +2696,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -2521,8 +2708,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -2530,7 +2717,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}
@ -3460,6 +3647,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -3640,6 +3828,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -4044,6 +4234,7 @@ PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
/**
* A texture stores the information that represents an image. All textures have a base texture
@ -4126,6 +4317,18 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
/**
*
* Helper function that returns a base texture based on an image url
@ -4230,6 +4433,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: 'update', content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
/**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -4268,7 +4476,6 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}

229
examples/example 3 - MovieClip/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-22
* Compiled: 2013-04-24
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -832,6 +832,155 @@ PIXI.MovieClip.prototype.updateTransform = function()
* @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.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
if(this.strokeStyle && this.strokeThickness)this.context.strokeText(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 = {};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
@ -1980,6 +2129,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
@ -2028,6 +2179,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
@ -2145,12 +2321,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
// empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// recursivly loop through all items!
this.checkVisibility(stage, true);
@ -2255,12 +2432,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; // means it was removed
if(displayObject.__inWebGL)return; //means it is already in webgL
@ -2401,7 +2589,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -2425,7 +2613,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
@ -2484,7 +2672,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -2509,7 +2696,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -2521,8 +2708,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -2530,7 +2717,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}
@ -3460,6 +3647,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -3640,6 +3828,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -4044,6 +4234,7 @@ PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
/**
* A texture stores the information that represents an image. All textures have a base texture
@ -4126,6 +4317,18 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
/**
*
* Helper function that returns a base texture based on an image url
@ -4230,6 +4433,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: 'update', content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
/**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -4268,7 +4476,6 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}

229
examples/example 4 - Balls/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-22
* Compiled: 2013-04-24
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -832,6 +832,155 @@ PIXI.MovieClip.prototype.updateTransform = function()
* @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.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
if(this.strokeStyle && this.strokeThickness)this.context.strokeText(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 = {};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
@ -1980,6 +2129,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
@ -2028,6 +2179,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
@ -2145,12 +2321,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
// empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// recursivly loop through all items!
this.checkVisibility(stage, true);
@ -2255,12 +2432,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; // means it was removed
if(displayObject.__inWebGL)return; //means it is already in webgL
@ -2401,7 +2589,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -2425,7 +2613,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
@ -2484,7 +2672,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -2509,7 +2696,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -2521,8 +2708,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -2530,7 +2717,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}
@ -3460,6 +3647,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -3640,6 +3828,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -4044,6 +4234,7 @@ PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
/**
* A texture stores the information that represents an image. All textures have a base texture
@ -4126,6 +4317,18 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
/**
*
* Helper function that returns a base texture based on an image url
@ -4230,6 +4433,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: 'update', content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
/**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -4268,7 +4476,6 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}

229
examples/example 5 - Morph/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-22
* Compiled: 2013-04-24
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -832,6 +832,155 @@ PIXI.MovieClip.prototype.updateTransform = function()
* @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.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
if(this.strokeStyle && this.strokeThickness)this.context.strokeText(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 = {};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
@ -1980,6 +2129,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
@ -2028,6 +2179,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
@ -2145,12 +2321,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
// empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// recursivly loop through all items!
this.checkVisibility(stage, true);
@ -2255,12 +2432,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; // means it was removed
if(displayObject.__inWebGL)return; //means it is already in webgL
@ -2401,7 +2589,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -2425,7 +2613,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
@ -2484,7 +2672,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -2509,7 +2696,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -2521,8 +2708,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -2530,7 +2717,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}
@ -3460,6 +3647,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -3640,6 +3828,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -4044,6 +4234,7 @@ PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
/**
* A texture stores the information that represents an image. All textures have a base texture
@ -4126,6 +4317,18 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
/**
*
* Helper function that returns a base texture based on an image url
@ -4230,6 +4433,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: 'update', content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
/**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -4268,7 +4476,6 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}

229
examples/example 6 - Interactivity/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-22
* Compiled: 2013-04-24
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -832,6 +832,155 @@ PIXI.MovieClip.prototype.updateTransform = function()
* @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.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
if(this.strokeStyle && this.strokeThickness)this.context.strokeText(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 = {};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
@ -1980,6 +2129,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
@ -2028,6 +2179,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
@ -2145,12 +2321,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
// empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// recursivly loop through all items!
this.checkVisibility(stage, true);
@ -2255,12 +2432,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; // means it was removed
if(displayObject.__inWebGL)return; //means it is already in webgL
@ -2401,7 +2589,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -2425,7 +2613,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
@ -2484,7 +2672,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -2509,7 +2696,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -2521,8 +2708,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -2530,7 +2717,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}
@ -3460,6 +3647,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -3640,6 +3828,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -4044,6 +4234,7 @@ PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
/**
* A texture stores the information that represents an image. All textures have a base texture
@ -4126,6 +4317,18 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
/**
*
* Helper function that returns a base texture based on an image url
@ -4230,6 +4433,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: 'update', content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
/**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -4268,7 +4476,6 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}

229
examples/example 7 - Transparent Background/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-22
* Compiled: 2013-04-24
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -832,6 +832,155 @@ PIXI.MovieClip.prototype.updateTransform = function()
* @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.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
if(this.strokeStyle && this.strokeThickness)this.context.strokeText(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 = {};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
@ -1980,6 +2129,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
@ -2028,6 +2179,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
@ -2145,12 +2321,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
// empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// recursivly loop through all items!
this.checkVisibility(stage, true);
@ -2255,12 +2432,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; // means it was removed
if(displayObject.__inWebGL)return; //means it is already in webgL
@ -2401,7 +2589,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -2425,7 +2613,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
@ -2484,7 +2672,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -2509,7 +2696,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -2521,8 +2708,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -2530,7 +2717,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}
@ -3460,6 +3647,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -3640,6 +3828,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -4044,6 +4234,7 @@ PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
/**
* A texture stores the information that represents an image. All textures have a base texture
@ -4126,6 +4317,18 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
/**
*
* Helper function that returns a base texture based on an image url
@ -4230,6 +4433,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: 'update', content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
/**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -4268,7 +4476,6 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}

229
examples/example 8 - Dragging/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-22
* Compiled: 2013-04-24
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -832,6 +832,155 @@ PIXI.MovieClip.prototype.updateTransform = function()
* @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.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
if(this.strokeStyle && this.strokeThickness)this.context.strokeText(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 = {};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
@ -1980,6 +2129,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
@ -2028,6 +2179,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
@ -2145,12 +2321,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
// empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// recursivly loop through all items!
this.checkVisibility(stage, true);
@ -2255,12 +2432,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; // means it was removed
if(displayObject.__inWebGL)return; //means it is already in webgL
@ -2401,7 +2589,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -2425,7 +2613,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
@ -2484,7 +2672,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -2509,7 +2696,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -2521,8 +2708,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -2530,7 +2717,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}
@ -3460,6 +3647,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -3640,6 +3828,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -4044,6 +4234,7 @@ PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
/**
* A texture stores the information that represents an image. All textures have a base texture
@ -4126,6 +4317,18 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
/**
*
* Helper function that returns a base texture based on an image url
@ -4230,6 +4433,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: 'update', content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
/**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -4268,7 +4476,6 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}

229
examples/example 9 - Tiling Texture/pixi.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-22
* Compiled: 2013-04-24
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -832,6 +832,155 @@ PIXI.MovieClip.prototype.updateTransform = function()
* @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.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
if(this.strokeStyle && this.strokeThickness)this.context.strokeText(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 = {};
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
@ -1980,6 +2129,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
@ -2028,6 +2179,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
@ -2145,12 +2321,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
// empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// recursivly loop through all items!
this.checkVisibility(stage, true);
@ -2255,12 +2432,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; // means it was removed
if(displayObject.__inWebGL)return; //means it is already in webgL
@ -2401,7 +2589,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -2425,7 +2613,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
@ -2484,7 +2672,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -2509,7 +2696,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -2521,8 +2708,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -2530,7 +2717,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}
@ -3460,6 +3647,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -3640,6 +3828,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -4044,6 +4234,7 @@ PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
/**
* A texture stores the information that represents an image. All textures have a base texture
@ -4126,6 +4317,18 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
/**
*
* Helper function that returns a base texture based on an image url
@ -4230,6 +4433,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: 'update', content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
/**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -4268,7 +4476,6 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}

148
src/pixi/Text.js Normal file
View file

@ -0,0 +1,148 @@
/**
* @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.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2);
if(this.strokeStyle && this.strokeThickness)this.context.strokeText(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 = {};

3
src/pixi/renderers/CanvasRenderer.js
View file

@ -77,6 +77,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
this.context.setTransform(1,0,0,1,0,0);
stage.updateTransform();
@ -257,6 +258,8 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}

56
src/pixi/renderers/WebGLRenderer.js
View file

@ -20,6 +20,8 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
*/
PIXI.WebGLRenderer = function(width, height, view, transparent)
{
// do a catch.. only 1 webGL renderer..
//console.log(transparent)
this.transparent = !!transparent;
@ -68,6 +70,31 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
// constructor
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
/**
* @private
*/
PIXI.WebGLRenderer.prototype.getBatch = function()
{
if(PIXI._batchs.length == 0)
{
return new PIXI.WebGLBatch(this.gl);
}
else
{
return PIXI._batchs.pop();
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
{
batch.clean();
PIXI._batchs.push(batch);
}
/**
* @private
*/
@ -185,12 +212,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
// update any textures
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
// empty out the arrays
stage.__childrenRemoved = [];
stage.__childrenAdded = [];
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// recursivly loop through all items!
this.checkVisibility(stage, true);
@ -295,12 +323,23 @@ PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
this.refreshBatchs = true;
}
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
{
var gl = this.gl;
if(texture._glTexture)
{
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
/**
* @private
*/
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
{
var objectDetaildisplayObject
if(!displayObject.stage)return; // means it was removed
if(displayObject.__inWebGL)return; //means it is already in webgL
@ -441,7 +480,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* seems the new sprite is in the middle of a batch
* lets split it..
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
@ -465,7 +504,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
* time to create anew one!
*/
var batch = PIXI._getBatch(this.gl);
var batch = this.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
@ -524,7 +563,6 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch
@ -549,7 +587,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
return;
}
@ -561,8 +599,8 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
PIXI._returnBatch(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
this.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
@ -570,7 +608,7 @@ PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI._returnBatch(batchToRemove);
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
}

13
src/pixi/textures/BaseTexture.js
View file

@ -4,6 +4,7 @@
PIXI.BaseTextureCache = {};
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
/**
* A texture stores the information that represents an image. All textures have a base texture
@ -86,6 +87,18 @@ PIXI.BaseTexture = function(source)
PIXI.BaseTexture.constructor = PIXI.BaseTexture;
PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
/**
*
* Helper function that returns a base texture based on an image url

6
src/pixi/textures/Texture.js
View file

@ -75,6 +75,11 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.scope.dispatchEvent( { type: 'update', content: this } );
}
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
/**
* Specifies the rectangle region of the baseTexture
* @method setFrame
@ -113,7 +118,6 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
if(!texture)
{
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture;
}