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

Graphics Updated

Browse source
This commit is contained in:
Mat Groves 2013-06-20 16:28:32 +01:00
parent 4b6d45c4a0
commit e0db063233
5 changed files with 66 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

13
examples/example 13 - Graphics/index.html
View file

@ -24,7 +24,9 @@
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x000000);
var stage = new PIXI.Stage(0x000000, true);
stage.setInteractive(true);
// create a renderer instance
//var renderer = new PIXI.CanvasRenderer(800, 600);//PIXI.autoDetectRenderer(800, 600);
@ -96,11 +98,20 @@
stage.addChild(sprite);
stage.addChild(graphics);
stage.click = function()
{
graphics.clear();
}
requestAnimFrame(animate);
function animate() {
renderer.render(stage);
requestAnimFrame( animate );
graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 0.8);
graphics.moveTo(Math.random() * 600,Math.random() * 600);
graphics.lineTo(Math.random() * 600,Math.random() * 600);
}
</script>

10
src/pixi/primitives/Graphics.js
View file

@ -62,6 +62,7 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
PIXI.Graphics.prototype.lineTo = function(x, y)
{
this.currentPath.points.push(x, y);
this.dirty = true;
}
PIXI.Graphics.prototype.beginFill = function(color, alpha)
@ -91,6 +92,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
points:[x, y, width, height], type:PIXI.Graphics.RECT};
this.graphicsData.push(this.currentPath);
this.dirty = true;
}
PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
@ -100,4 +102,12 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
points:[x, y, radius], type:PIXI.Graphics.CIRC};
this.graphicsData.push(this.currentPath);
this.dirty = true;
}
PIXI.Graphics.prototype.clear = function()
{
this.dirty = true;
this.clearDirty = true;
this.graphicsData = [];
}

9
src/pixi/renderers/CanvasGraphics.js
View file

@ -24,8 +24,8 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
var data = graphics.graphicsData[i];
var points = data.points;
context.strokeStyle = "#" + data.lineColor.toString(16);
context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
context.lineWidth = data.lineWidth;
context.globalAlpha = data.lineAlpha;
@ -55,7 +55,8 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
// TODO - need to be Undefined!
if(data.fillColor)
{
context.fillStyle = "#" + data.fillColor.toString(16);
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillRect(points[0], points[1], points[2], points[3]);
}
@ -73,7 +74,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
if(data.fill)
{
context.fillStyle = "#" + data.fillColor.toString(16);
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if(data.lineWidth)

33
src/pixi/renderers/WebGLGraphics.js
View file

@ -25,7 +25,22 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics)
// graphicsObject
// a collection of "shapes" (mainly lines right now!)
///this.shape.draw();
if(!graphics._webGL)PIXI.WebGLGraphics.initGraphics(graphics);
if(!graphics._webGL)graphics._webGL = {points:[], lastPosition:new PIXI.Point(), lastIndex:0, buffer:gl.createBuffer()};
if(graphics.dirty)
{
graphics.dirty = false;
if(graphics.clearDirty)
{
graphics.clearDirty = false;
graphics._webGL.lastIndex = 0;
graphics._webGL.points = [];
}
PIXI.WebGLGraphics.initGraphics(graphics);
}
gl.uniformMatrix4fv(PIXI.shaderProgram2.mvMatrixUniform, false, PIXI.projectionMatrix );
@ -36,16 +51,14 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics)
//shaderProgram.colorAttribute
// ulong idx, long size, ulong type, bool norm, long stride, ulong offset )
gl.drawArrays(gl.TRIANGLE_STRIP, 0, graphics._webGL.points.length/6);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, graphics._webGL.glPoints.length/6);
PIXI.activateDefaultShader();
}
PIXI.WebGLGraphics.initGraphics = function(graphics)
{
graphics._webGL = {points:[], lastPosition:new PIXI.Point()};
for (var i=0; i < graphics.graphicsData.length; i++)
for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
@ -66,15 +79,15 @@ PIXI.WebGLGraphics.initGraphics = function(graphics)
}
};
//console.log(graphics._webGL.lastIndex - graphics.graphicsData.length )
graphics._webGL.lastIndex = graphics.graphicsData.length;
// convert to points
graphics._webGL.points = new Float32Array(graphics._webGL.points);
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
var gl = PIXI.gl;
graphics._webGL.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.points, gl.STATIC_DRAW);
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
}

19
src/pixi/renderers/WebGLRenderGroup.js
View file

@ -190,7 +190,10 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
if(startBatch.visible) startBatch.renderWebGL(this, projectionMatrix);
}
else if(renderable instanceof PIXI.Graphics)
{
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
}
return;
}
@ -215,7 +218,10 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
if(startBatch.visible) startBatch.renderWebGL(this, projectionMatrix);
}
else if(renderable instanceof PIXI.Graphics)
{
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
}
// DO the middle batchs..
for (var i=startBatchIndex+1; i < endBatchIndex; i++)
{
@ -237,7 +243,10 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
}
else if(renderable instanceof PIXI.Graphics)
{
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
}
}
// DO the last batch..
@ -257,6 +266,10 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
if(endBatch.visible) endBatch.renderWebGL(this, projectionMatrix);
}
else if(renderable instanceof PIXI.Graphics)
{
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
}
}
PIXI.WebGLRenderGroup.prototype.checkVisibility = function(displayObject, globalVisible)