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

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);