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

Tiling Sprite added

Browse source 
Added Tiling Sprite to Pixi.js
Added example 9 - TilingSprite
Updated docs
This commit is contained in:
Mat Groves 2013-04-20 14:56:30 +01:00
parent c1c4d75a3d
commit 3dddce23ad
63 changed files with 9903 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Gruntfile.js
View file

@ -28,6 +28,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/renderers/CanvasRenderer.js',
'<%= dirs.src %>/extras/Strip.js',
'<%= dirs.src %>/extras/Rope.js',
'<%= dirs.src %>/extras/TilingSprite.js',
'<%= dirs.src %>/textures/BaseTexture.js',
'<%= dirs.src %>/textures/Texture.js',
'<%= dirs.src %>/loaders/SpriteSheetLoader.js',
@ -98,6 +99,7 @@ module.exports = function(grunt) {
'examples/example 6 - Interactivity',
'examples/example 7 - Transparent Background',
'examples/example 8 - Dragging',
'examples/example 9 - Tiling Texture'
]
},
connect: {

260
bin/pixi.dev.js
View file

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-16
* Compiled: 2013-04-20
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -1029,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;
@ -1081,8 +1081,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}
@ -2061,6 +2061,10 @@ 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);
@ -2099,9 +2103,22 @@ 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);
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);
// 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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -2292,6 +2309,13 @@ 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)
{
@ -2300,7 +2324,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -2407,6 +2431,127 @@ 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
*/
@ -2504,7 +2649,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);
@ -3287,6 +3432,11 @@ 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++)
@ -3330,6 +3480,33 @@ 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
*/
@ -3352,8 +3529,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();
@ -3665,6 +3842,65 @@ 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}
* @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
*/
@ -3747,7 +3983,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}

6
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

1
docs/api.js
View file

@ -15,6 +15,7 @@ YUI.add("yuidoc-meta", function(Y) {
"SpriteSheetLoader",
"Stage",
"Texture",
"TilingSprite",
"WebGLBatch",
"WebGLRenderer"
],

2
docs/classes/AssetLoader.html
View file

@ -69,6 +69,8 @@
<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>

2
docs/classes/BaseTexture.html
View file

@ -69,6 +69,8 @@
<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>

2
docs/classes/CanvasRenderer.html
View file

@ -69,6 +69,8 @@
<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>

24
docs/classes/DisplayObject.html
View file

@ -69,6 +69,8 @@
<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>
@ -614,7 +616,7 @@ WebGL is the preferred renderer as it is a lot fastest. If webGL is not supporte
<div class="param-description">
</div>
@ -701,7 +703,7 @@ WebGL is the preferred renderer as it is a lot fastest. If webGL is not supporte
<div class="param-description">
</div>
@ -788,7 +790,7 @@ WebGL is the preferred renderer as it is a lot fastest. If webGL is not supporte
<div class="param-description">
</div>
@ -875,7 +877,7 @@ WebGL is the preferred renderer as it is a lot fastest. If webGL is not supporte
<div class="param-description">
</div>
@ -963,7 +965,7 @@ for this callback to be fired the mouse must have been pressed down over the dis
<div class="param-description">
</div>
@ -1051,7 +1053,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1138,7 +1140,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1226,7 +1228,7 @@ basically a touch version of click</p>
<div class="param-description">
</div>
@ -1313,7 +1315,7 @@ basically a touch version of click</p>
<div class="param-description">
</div>
@ -1401,7 +1403,7 @@ for this callback to be fired, The touch must have started over the sprite</p>
<div class="param-description">
</div>
@ -1488,7 +1490,7 @@ for this callback to be fired, The touch must have started over the sprite</p>
<div class="param-description">
</div>

32
docs/classes/DisplayObjectContainer.html
View file

@ -69,6 +69,8 @@
<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>
@ -484,7 +486,7 @@
<div class="param-description">
</div>
@ -577,7 +579,7 @@
<div class="param-description">
</div>
@ -592,7 +594,7 @@
<div class="param-description">
</div>
@ -676,7 +678,7 @@
<div class="param-description">
</div>
@ -760,7 +762,7 @@
<div class="param-description">
</div>
@ -844,7 +846,7 @@
<div class="param-description">
</div>
@ -928,7 +930,7 @@
<div class="param-description">
</div>
@ -1013,7 +1015,7 @@ for this callback to be fired the mouse must have been pressed down over the dis
<div class="param-description">
</div>
@ -1098,7 +1100,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1185,7 +1187,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1269,7 +1271,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1354,7 +1356,7 @@ basically a touch version of click</p>
<div class="param-description">
</div>
@ -1438,7 +1440,7 @@ basically a touch version of click</p>
<div class="param-description">
</div>
@ -1523,7 +1525,7 @@ for this callback to be fired, The touch must have started over the sprite</p>
<div class="param-description">
</div>
@ -1607,7 +1609,7 @@ for this callback to be fired, The touch must have started over the sprite</p>
<div class="param-description">
</div>

12
docs/classes/InteractionData.html
View file

@ -69,6 +69,8 @@
<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>
@ -122,7 +124,7 @@
<div class="foundat">
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l483"><code>src&#x2F;pixi&#x2F;InteractionManager.js:483</code></a>
Defined in: <a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l503"><code>src&#x2F;pixi&#x2F;InteractionManager.js:503</code></a>
</div>
@ -176,7 +178,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l483"><code>src&#x2F;pixi&#x2F;InteractionManager.js:483</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l503"><code>src&#x2F;pixi&#x2F;InteractionManager.js:503</code></a>
</p>
@ -315,7 +317,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l507"><code>src&#x2F;pixi&#x2F;InteractionManager.js:507</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l527"><code>src&#x2F;pixi&#x2F;InteractionManager.js:527</code></a>
</p>
@ -404,7 +406,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l489"><code>src&#x2F;pixi&#x2F;InteractionManager.js:489</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l509"><code>src&#x2F;pixi&#x2F;InteractionManager.js:509</code></a>
</p>
@ -448,7 +450,7 @@
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l499"><code>src&#x2F;pixi&#x2F;InteractionManager.js:499</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_InteractionManager.js.html#l519"><code>src&#x2F;pixi&#x2F;InteractionManager.js:519</code></a>
</p>

2
docs/classes/InteractionManager.html
View file

@ -69,6 +69,8 @@
<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>

32
docs/classes/MovieClip.html
View file

@ -69,6 +69,8 @@
<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>
@ -612,7 +614,7 @@
<div class="param-description">
</div>
@ -702,7 +704,7 @@
<div class="param-description">
</div>
@ -717,7 +719,7 @@
<div class="param-description">
</div>
@ -801,7 +803,7 @@
<div class="param-description">
</div>
@ -1059,7 +1061,7 @@
<div class="param-description">
</div>
@ -1143,7 +1145,7 @@
<div class="param-description">
</div>
@ -1227,7 +1229,7 @@
<div class="param-description">
</div>
@ -1312,7 +1314,7 @@ for this callback to be fired the mouse must have been pressed down over the dis
<div class="param-description">
</div>
@ -1397,7 +1399,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1535,7 +1537,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1619,7 +1621,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1842,7 +1844,7 @@ basically a touch version of click</p>
<div class="param-description">
</div>
@ -1926,7 +1928,7 @@ basically a touch version of click</p>
<div class="param-description">
</div>
@ -2011,7 +2013,7 @@ for this callback to be fired, The touch must have started over the sprite</p>
<div class="param-description">
</div>
@ -2095,7 +2097,7 @@ for this callback to be fired, The touch must have started over the sprite</p>
<div class="param-description">
</div>

2
docs/classes/Point.html
View file

@ -69,6 +69,8 @@
<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>

2
docs/classes/Rectangle.html
View file

@ -69,6 +69,8 @@
<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>

32
docs/classes/Sprite.html
View file

@ -69,6 +69,8 @@
<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>
@ -574,7 +576,7 @@
<div class="param-description">
</div>
@ -664,7 +666,7 @@
<div class="param-description">
</div>
@ -679,7 +681,7 @@
<div class="param-description">
</div>
@ -763,7 +765,7 @@
<div class="param-description">
</div>
@ -1061,7 +1063,7 @@
<div class="param-description">
</div>
@ -1145,7 +1147,7 @@
<div class="param-description">
</div>
@ -1229,7 +1231,7 @@
<div class="param-description">
</div>
@ -1314,7 +1316,7 @@ for this callback to be fired the mouse must have been pressed down over the dis
<div class="param-description">
</div>
@ -1399,7 +1401,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1483,7 +1485,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1567,7 +1569,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1739,7 +1741,7 @@ basically a touch version of click</p>
<div class="param-description">
</div>
@ -1823,7 +1825,7 @@ basically a touch version of click</p>
<div class="param-description">
</div>
@ -1908,7 +1910,7 @@ for this callback to be fired, The touch must have started over the sprite</p>
<div class="param-description">
</div>
@ -1992,7 +1994,7 @@ for this callback to be fired, The touch must have started over the sprite</p>
<div class="param-description">
</div>

2
docs/classes/SpriteSheetLoader.html
View file

@ -69,6 +69,8 @@
<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>

32
docs/classes/Stage.html
View file

@ -69,6 +69,8 @@
<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>
@ -549,7 +551,7 @@
<div class="param-description">
</div>
@ -639,7 +641,7 @@
<div class="param-description">
</div>
@ -654,7 +656,7 @@
<div class="param-description">
</div>
@ -738,7 +740,7 @@
<div class="param-description">
</div>
@ -822,7 +824,7 @@
<div class="param-description">
</div>
@ -906,7 +908,7 @@
<div class="param-description">
</div>
@ -990,7 +992,7 @@
<div class="param-description">
</div>
@ -1075,7 +1077,7 @@ for this callback to be fired the mouse must have been pressed down over the dis
<div class="param-description">
</div>
@ -1160,7 +1162,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1244,7 +1246,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1415,7 +1417,7 @@ for this callback to be fired, The touch must have started over the displayObjec
<div class="param-description">
</div>
@ -1500,7 +1502,7 @@ basically a touch version of click</p>
<div class="param-description">
</div>
@ -1584,7 +1586,7 @@ basically a touch version of click</p>
<div class="param-description">
</div>
@ -1669,7 +1671,7 @@ for this callback to be fired, The touch must have started over the sprite</p>
<div class="param-description">
</div>
@ -1753,7 +1755,7 @@ for this callback to be fired, The touch must have started over the sprite</p>
<div class="param-description">
</div>

2
docs/classes/Texture.html
View file

@ -69,6 +69,8 @@
<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>

2198
docs/classes/TilingSprite.html Normal file
View file

File diff suppressed because it is too large Load diff

2
docs/classes/WebGLBatch.html
View file

@ -69,6 +69,8 @@
<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>

4
docs/classes/WebGLRenderer.html
View file

@ -69,6 +69,8 @@
<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>
@ -484,7 +486,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#l544"><code>src&#x2F;pixi&#x2F;renderers&#x2F;WebGLRenderer.js:544</code></a>
<a href="..&#x2F;files&#x2F;src_pixi_renderers_WebGLRenderer.js.html#l568"><code>src&#x2F;pixi&#x2F;renderers&#x2F;WebGLRenderer.js:568</code></a>
</p>

167
docs/data.json
View file

@ -21,6 +21,15 @@
"fors": {},
"namespaces": {}
},
"src/pixi/extras/TilingSprite.js": {
"name": "src/pixi/extras/TilingSprite.js",
"modules": {},
"classes": {
"TilingSprite": 1
},
"fors": {},
"namespaces": {}
},
"src/pixi/loaders/AssetLoader.js": {
"name": "src/pixi/loaders/AssetLoader.js",
"modules": {},
@ -200,6 +209,7 @@
"name": "PIXI",
"submodules": {},
"classes": {
"TilingSprite": 1,
"AssetLoader": 1,
"SpriteSheetLoader": 1,
"CanvasRenderer": 1,
@ -225,6 +235,38 @@
}
},
"classes": {
"TilingSprite": {
"name": "TilingSprite",
"shortname": "TilingSprite",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"module": "PIXI",
"file": "src/pixi/extras/TilingSprite.js",
"line": 5,
"description": "A tiling sprite is a fast way of rendering a tiling image",
"extends": "DisplayObjectContainer",
"is_constructor": 1,
"params": [
{
"name": "texture",
"description": "the texture of the tiling sprite",
"type": "Texture"
},
{
"name": "width",
"description": "the width of the tiling sprite",
"type": "Number"
},
{
"name": "height",
"description": "the height of the tiling sprite",
"type": "Number"
}
]
},
"AssetLoader": {
"name": "AssetLoader",
"shortname": "AssetLoader",
@ -476,7 +518,7 @@
"extension_for": [],
"module": "PIXI",
"file": "src/pixi/InteractionManager.js",
"line": 483,
"line": 503,
"is_constructor": 1
},
"MovieClip": {
@ -622,13 +664,37 @@
"file": "src/pixi/extras/Rope.js",
"line": 1,
"author": "Mat Groves http://matgroves.com/",
"class": "AssetLoader"
"class": "TilingSprite"
},
{
"file": "src/pixi/extras/Strip.js",
"line": 1,
"author": "Mat Groves http://matgroves.com/",
"class": "AssetLoader"
"class": "TilingSprite"
},
{
"file": "src/pixi/extras/TilingSprite.js",
"line": 1,
"author": "Mat Groves http://matgroves.com/",
"class": "TilingSprite"
},
{
"file": "src/pixi/extras/TilingSprite.js",
"line": 23,
"description": "The scaling of the image that is being tiled",
"itemtype": "property",
"name": "tileScale",
"type": "Point",
"class": "TilingSprite"
},
{
"file": "src/pixi/extras/TilingSprite.js",
"line": 29,
"description": "The offset position of the image that is being tiled",
"itemtype": "property",
"name": "tileScale",
"type": "Point",
"class": "TilingSprite"
},
{
"file": "src/pixi/loaders/AssetLoader.js",
@ -763,14 +829,21 @@
},
{
"file": "src/pixi/renderers/CanvasRenderer.js",
"line": 189,
"line": 194,
"access": "private",
"tagname": "",
"class": "CanvasRenderer"
},
{
"file": "src/pixi/renderers/CanvasRenderer.js",
"line": 224,
"line": 229,
"access": "private",
"tagname": "",
"class": "CanvasRenderer"
},
{
"file": "src/pixi/renderers/CanvasRenderer.js",
"line": 256,
"access": "private",
"tagname": "",
"class": "CanvasRenderer"
@ -980,28 +1053,28 @@
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 241,
"line": 245,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 270,
"line": 287,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 466,
"line": 490,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 544,
"line": 568,
"description": "resizes the webGL view to the specified width and height",
"itemtype": "method",
"name": "resize",
@ -1021,14 +1094,7 @@
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 568,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 596,
"line": 593,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
@ -1042,7 +1108,28 @@
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 682,
"line": 713,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 741,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 818,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
},
{
"file": "src/pixi/renderers/WebGLRenderer.js",
"line": 827,
"access": "private",
"tagname": "",
"class": "WebGLRenderer"
@ -1633,7 +1720,7 @@
},
{
"file": "src/pixi/InteractionManager.js",
"line": 489,
"line": 509,
"description": "This point stores the global coords of where the touch/mouse event happened",
"itemtype": "property",
"name": "global",
@ -1642,7 +1729,7 @@
},
{
"file": "src/pixi/InteractionManager.js",
"line": 499,
"line": 519,
"description": "The target Sprite that was interacted with",
"itemtype": "property",
"name": "target",
@ -1651,7 +1738,7 @@
},
{
"file": "src/pixi/InteractionManager.js",
"line": 507,
"line": 527,
"description": "This will return the local coords of the specified displayObject for this InteractionData",
"itemtype": "method",
"name": "getLocalPosition",
@ -2028,6 +2115,10 @@
"message": "Missing item type",
"line": " src/pixi/extras/Strip.js:1"
},
{
"message": "Missing item type",
"line": " src/pixi/extras/TilingSprite.js:1"
},
{
"message": "Missing item type",
"line": " src/pixi/loaders/AssetLoader.js:1"
@ -2058,11 +2149,15 @@
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/CanvasRenderer.js:189"
"line": " src/pixi/renderers/CanvasRenderer.js:194"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/CanvasRenderer.js:224"
"line": " src/pixi/renderers/CanvasRenderer.js:229"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/CanvasRenderer.js:256"
},
{
"message": "Missing item type",
@ -2102,23 +2197,19 @@
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:241"
"line": " src/pixi/renderers/WebGLRenderer.js:245"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:270"
"line": " src/pixi/renderers/WebGLRenderer.js:287"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:466"
"line": " src/pixi/renderers/WebGLRenderer.js:490"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:568"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:596"
"line": " src/pixi/renderers/WebGLRenderer.js:593"
},
{
"message": "Missing item type",
@ -2126,7 +2217,19 @@
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:682"
"line": " src/pixi/renderers/WebGLRenderer.js:713"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:741"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:818"
},
{
"message": "Missing item type",
"line": " src/pixi/renderers/WebGLRenderer.js:827"
},
{
"message": "Missing item type",

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>
@ -209,16 +211,32 @@ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObj
PIXI.InteractionManager.prototype.setTarget = function(target)
{
this.target = target;
target.view.addEventListener(&#x27;mousemove&#x27;, this.onMouseMove.bind(this), true);
target.view.addEventListener(&#x27;mousedown&#x27;, this.onMouseDown.bind(this), true);
document.body.addEventListener(&#x27;mouseup&#x27;, this.onMouseUp.bind(this), true);
target.view.addEventListener(&#x27;mouseout&#x27;, this.onMouseUp.bind(this), true);
if (window.navigator.msPointerEnabled)
{
&#x2F;&#x2F; time to remove some of that zoom in ja..
target.view.style[&quot;-ms-content-zooming&quot;] = &quot;none&quot;;
target.view.style[&quot;-ms-touch-action&quot;] = &quot;none&quot;
&#x2F;&#x2F; DO some window specific touch!
}
{
this.target = target;
target.view.addEventListener(&#x27;mousemove&#x27;, this.onMouseMove.bind(this), true);
target.view.addEventListener(&#x27;mousedown&#x27;, this.onMouseDown.bind(this), true);
document.body.addEventListener(&#x27;mouseup&#x27;, this.onMouseUp.bind(this), true);
target.view.addEventListener(&#x27;mouseout&#x27;, this.onMouseUp.bind(this), true);
&#x2F;&#x2F; aint no multi touch just yet!
target.view.addEventListener(&quot;touchstart&quot;, this.onTouchStart.bind(this), true);
target.view.addEventListener(&quot;touchend&quot;, this.onTouchEnd.bind(this), true);
target.view.addEventListener(&quot;touchmove&quot;, this.onTouchMove.bind(this), true);
}
&#x2F;&#x2F; aint no multi touch just yet!
target.view.addEventListener(&quot;touchstart&quot;, this.onTouchStart.bind(this), true);
target.view.addEventListener(&quot;touchend&quot;, this.onTouchEnd.bind(this), true);
target.view.addEventListener(&quot;touchmove&quot;, this.onTouchMove.bind(this), true);
}
PIXI.InteractionManager.prototype.update = function()
@ -408,7 +426,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;
@ -460,8 +478,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i &lt; length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}
@ -527,6 +545,7 @@ PIXI.InteractionManager.prototype.onTouchStart = function(event)
&#x2F;&#x2F;call the function!
if(item.touchstart)item.touchstart(touchData);
item.__isDown = true;
item.__touchData = touchData;
if(!item.interactiveChildren)break;
}
@ -540,11 +559,13 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
{
event.preventDefault();
var rect = this.target.view.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i &lt; changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.touchs[touchEvent.identifier];
var up = false;
@ -555,6 +576,7 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
for (var j = 0; j &lt; length; j++)
{
var item = this.interactiveItems[j];
var itemTouchData = item.__touchData; &#x2F;&#x2F; &lt;-- Here!
item.__hit = this.hitTest(item, touchData);
if(itemTouchData == touchData)
@ -586,7 +608,7 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
item.__isDown = false;
}
item.__touchIdentifier = null;
item.__touchData = null;
}
else

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

200
docs/files/src_pixi_extras_TilingSprite.js.html Normal file
View file

@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>src&#x2F;pixi&#x2F;extras&#x2F;TilingSprite.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/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;extras&#x2F;TilingSprite.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
&#x2F;**
* @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F;
*&#x2F;
&#x2F;**
* 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
*&#x2F;
PIXI.TilingSprite = function(texture, width, height)
{
PIXI.DisplayObjectContainer.call( this );
this.texture = texture;
this.width = width;
this.height = height;
this.renderable = true;
&#x2F;**
* The scaling of the image that is being tiled
* @property tileScale
* @type Point
*&#x2F;
this.tileScale = new PIXI.Point(2,1);
&#x2F;**
* The offset position of the image that is being tiled
* @property tileScale
* @type Point
*&#x2F;
this.tilePosition = new PIXI.Point(0,0);
this.blendMode = PIXI.blendModes.NORMAL
}
&#x2F;&#x2F; constructor
PIXI.TilingSprite.constructor = PIXI.TilingSprite;
PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
PIXI.TilingSprite.prototype.setTexture = function(texture)
{
&#x2F;&#x2F;TODO SET THE TEXTURES
&#x2F;&#x2F;TODO VISIBILITY
&#x2F;&#x2F; stop current texture
this.texture = texture;
this.updateFrame = true;
}
PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
{
this.updateFrame = true;
}
&#x2F;&#x2F; some helper functions..
</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_loaders_AssetLoader.js.html
View file

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>
@ -298,6 +300,11 @@ 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);
}
&#x2F;&#x2F; render!
for (var i=0; i &lt; displayObject.children.length; i++)
@ -341,6 +348,33 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
&#x2F;&#x2F;context.globalCompositeOperation = &#x27;source-over&#x27;;
}
&#x2F;**
* @private
*&#x2F;
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{
var context = this.context;
if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, &quot;repeat&quot;);
context.beginPath();
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
&#x2F;&#x2F; 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 &#x2F; tileScale.x, sprite.height &#x2F; tileScale.y);
context.scale(1&#x2F;tileScale.x, 1&#x2F;tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
}
&#x2F;**
* @private
*&#x2F;
@ -363,8 +397,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();

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>
@ -339,6 +341,10 @@ 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);
@ -377,9 +383,22 @@ 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);
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);
&#x2F;&#x2F; reguler...
&#x2F;&#x2F;gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
&#x2F;&#x2F;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);
}
&#x2F;&#x2F; gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -570,6 +589,13 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(batch);
}
}
else if(displayObject instanceof PIXI.TilingSprite)
{
&#x2F;&#x2F; add to a batch!!
this.initTilingSprite(displayObject);
this.batchs.push(displayObject);
}
else if(displayObject instanceof PIXI.Strip)
{
@ -578,7 +604,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
&#x2F;&#x2F; if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -685,6 +711,127 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
projectionMatrix[13] = 1;
}
&#x2F;**
* @private
*&#x2F;
PIXI.WebGLRenderer.prototype.initTilingSprite = function(sprite)
{
var gl = this.gl;
&#x2F;&#x2F; 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])&#x2F;&#x2F;, 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);
&#x2F;&#x2F; return ( (x &gt; 0) &amp;&amp; ((x &amp; (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;
}
&#x2F;*
var context = this.context;
if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, &quot;repeat&quot;);
context.beginPath();
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
&#x2F;&#x2F; 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 &#x2F; tileScale.x, sprite.height &#x2F; tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.scale(1&#x2F;tileScale.x, 1&#x2F;tileScale.y);
*&#x2F;
}
&#x2F;**
* @private
*&#x2F;
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&#x2F;sprite.texture.baseTexture.width;
var offsetY = tilePosition.y&#x2F;sprite.texture.baseTexture.height;
var scaleX = (sprite.width &#x2F; sprite.texture.baseTexture.width) &#x2F; tileScale.x&#x2F;&#x2F;&#x2F;sprite.texture.baseTexture.width;
var scaleY = (sprite.height &#x2F; sprite.texture.baseTexture.height) &#x2F; tileScale.y&#x2F;&#x2F;&#x2F;sprite.texture.baseTexture.height;
&#x2F;&#x2F;
&#x2F;&#x2F;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);
}
&#x2F;**
* @private
*&#x2F;
@ -782,7 +929,7 @@ PIXI.WebGLRenderer.prototype.renderStrip = function(strip)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}
&#x2F;&#x2F;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);

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>
@ -200,7 +202,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

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

@ -69,6 +69,8 @@
<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>

2
docs/index.html
View file

@ -69,6 +69,8 @@
<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>

8
docs/modules/PIXI.html
View file

@ -69,6 +69,8 @@
<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>
@ -228,6 +230,12 @@
</a>
</li>
<li class="module-class">
<a href="..&#x2F;classes/TilingSprite.html">
TilingSprite
</a>
</li>
<li class="module-class">
<a href="..&#x2F;classes/WebGLBatch.html">
WebGLBatch

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

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-16
* Compiled: 2013-04-20
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -1029,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;
@ -1081,8 +1081,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}
@ -2061,6 +2061,10 @@ 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);
@ -2099,9 +2103,22 @@ 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);
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);
// 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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -2292,6 +2309,13 @@ 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)
{
@ -2300,7 +2324,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -2407,6 +2431,127 @@ 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
*/
@ -2504,7 +2649,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);
@ -3287,6 +3432,11 @@ 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++)
@ -3330,6 +3480,33 @@ 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
*/
@ -3352,8 +3529,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();
@ -3665,6 +3842,65 @@ 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}
* @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
*/
@ -3747,7 +3983,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}

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

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-16
* Compiled: 2013-04-20
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -1029,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;
@ -1081,8 +1081,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}
@ -2061,6 +2061,10 @@ 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);
@ -2099,9 +2103,22 @@ 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);
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);
// 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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -2292,6 +2309,13 @@ 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)
{
@ -2300,7 +2324,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -2407,6 +2431,127 @@ 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
*/
@ -2504,7 +2649,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);
@ -3287,6 +3432,11 @@ 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++)
@ -3330,6 +3480,33 @@ 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
*/
@ -3352,8 +3529,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();
@ -3665,6 +3842,65 @@ 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}
* @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
*/
@ -3747,7 +3983,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}

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

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-16
* Compiled: 2013-04-20
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -1029,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;
@ -1081,8 +1081,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}
@ -2061,6 +2061,10 @@ 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);
@ -2099,9 +2103,22 @@ 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);
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);
// 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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -2292,6 +2309,13 @@ 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)
{
@ -2300,7 +2324,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -2407,6 +2431,127 @@ 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
*/
@ -2504,7 +2649,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);
@ -3287,6 +3432,11 @@ 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++)
@ -3330,6 +3480,33 @@ 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
*/
@ -3352,8 +3529,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();
@ -3665,6 +3842,65 @@ 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}
* @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
*/
@ -3747,7 +3983,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}

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

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-16
* Compiled: 2013-04-20
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -1029,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;
@ -1081,8 +1081,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}
@ -2061,6 +2061,10 @@ 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);
@ -2099,9 +2103,22 @@ 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);
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);
// 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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -2292,6 +2309,13 @@ 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)
{
@ -2300,7 +2324,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -2407,6 +2431,127 @@ 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
*/
@ -2504,7 +2649,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);
@ -3287,6 +3432,11 @@ 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++)
@ -3330,6 +3480,33 @@ 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
*/
@ -3352,8 +3529,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();
@ -3665,6 +3842,65 @@ 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}
* @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
*/
@ -3747,7 +3983,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}

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

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-16
* Compiled: 2013-04-20
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -1029,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;
@ -1081,8 +1081,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}
@ -2061,6 +2061,10 @@ 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);
@ -2099,9 +2103,22 @@ 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);
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);
// 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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -2292,6 +2309,13 @@ 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)
{
@ -2300,7 +2324,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -2407,6 +2431,127 @@ 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
*/
@ -2504,7 +2649,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);
@ -3287,6 +3432,11 @@ 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++)
@ -3330,6 +3480,33 @@ 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
*/
@ -3352,8 +3529,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();
@ -3665,6 +3842,65 @@ 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}
* @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
*/
@ -3747,7 +3983,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}

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

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-16
* Compiled: 2013-04-20
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -1029,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;
@ -1081,8 +1081,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}
@ -2061,6 +2061,10 @@ 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);
@ -2099,9 +2103,22 @@ 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);
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);
// 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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -2292,6 +2309,13 @@ 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)
{
@ -2300,7 +2324,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -2407,6 +2431,127 @@ 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
*/
@ -2504,7 +2649,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);
@ -3287,6 +3432,11 @@ 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++)
@ -3330,6 +3480,33 @@ 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
*/
@ -3352,8 +3529,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();
@ -3665,6 +3842,65 @@ 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}
* @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
*/
@ -3747,7 +3983,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}

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

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-16
* Compiled: 2013-04-20
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -1029,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;
@ -1081,8 +1081,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}
@ -2061,6 +2061,10 @@ 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);
@ -2099,9 +2103,22 @@ 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);
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);
// 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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -2292,6 +2309,13 @@ 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)
{
@ -2300,7 +2324,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -2407,6 +2431,127 @@ 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
*/
@ -2504,7 +2649,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);
@ -3287,6 +3432,11 @@ 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++)
@ -3330,6 +3480,33 @@ 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
*/
@ -3352,8 +3529,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();
@ -3665,6 +3842,65 @@ 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}
* @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
*/
@ -3747,7 +3983,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}

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

@ -4,7 +4,7 @@
* Copyright (c) 2012, Mat Groves
* http://goodboydigital.com/
*
* Compiled: 2013-04-16
* Compiled: 2013-04-20
*
* Pixi.JS is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license.php
@ -1029,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;
@ -1081,8 +1081,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}
@ -2061,6 +2061,10 @@ 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);
@ -2099,9 +2103,22 @@ 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);
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);
// 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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -2292,6 +2309,13 @@ 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)
{
@ -2300,7 +2324,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -2407,6 +2431,127 @@ 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
*/
@ -2504,7 +2649,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);
@ -3287,6 +3432,11 @@ 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++)
@ -3330,6 +3480,33 @@ 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
*/
@ -3352,8 +3529,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();
@ -3665,6 +3842,65 @@ 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}
* @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
*/
@ -3747,7 +3983,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}

68
examples/example 9 - Tiling Texture/index.html Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 8 Dragging</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
.textHolder{
width: 400px;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x97c56e, true);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage("p2.jpeg");
// create a tiling sprite..
// requires a texture, width and height
// to work in webGL the texture size must be a power of two
var tilingSprite = new PIXI.TilingSprite(texture, window.innerWidth, window.innerHeight)
var count = 0;
stage.addChild(tilingSprite);
function animate() {
requestAnimFrame( animate );
count += 0.005
tilingSprite.tileScale.x = 2 + Math.sin(count);
tilingSprite.tileScale.y = 2 + Math.cos(count);
tilingSprite.tilePosition.x += 1;
tilingSprite.tilePosition.y += 1;
// just for fun, lets rotate mr rabbit a little
//stage.interactionManager.update();
// render the stage
renderer.render(stage);
}
</script>
</body>
</html>

BIN
examples/example 9 - Tiling Texture/p2.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

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

File diff suppressed because it is too large Load diff

6
src/pixi/InteractionManager.js
View file

@ -304,7 +304,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;
@ -356,8 +356,8 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
for (var i = 0; i < length; i++)
{
var item = item.children[i];
var hit = this.hitTest(item, interactionData);
var tempItem = item.children[i];
var hit = this.hitTest(tempItem, interactionData);
if(hit)return true;
}

58
src/pixi/extras/TilingSprite.js Normal file
View file

@ -0,0 +1,58 @@
/**
* @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..

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

@ -178,6 +178,11 @@ 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++)
@ -221,6 +226,33 @@ 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
*/
@ -243,8 +275,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();

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

@ -219,6 +219,10 @@ 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);
@ -257,9 +261,22 @@ 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);
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);
// 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.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
@ -450,6 +467,13 @@ 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)
{
@ -458,7 +482,7 @@ PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
this.batchs.push(displayObject);
}
// if its somthing else... then custom codes!
this.batchUpdate = true;
}
@ -565,6 +589,127 @@ 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
*/
@ -662,7 +807,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);

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

@ -80,7 +80,7 @@ PIXI.BaseTexture = function(source)
PIXI.texturesToUpdate.push(this);
}
this._powerOf2 = false;
}