hack : making all 2D drawing functions available to PIXI

[Ezelia]

Hi,
 
First I would like to thank you for this awesome rendering engine I'm using it to write a mobile gameto test it's performance and everything is going just fine now
 
one of my needs was to use 2D context drawing routines (arc, bezier, rect ....etc) witch are not available in PIXI since WebGL don't provide such functions.
 
for people like me who need those methods I have a three lines code that make all this available inside PIXI context
 
here is the code :
 
 

        PIXI.Texture.Draw = function (cb) {            var canvas = document.createElement('canvas');            if (typeof cb == 'function') cb(canvas);            return PIXI.Texture.fromCanvas(canvas);        } 

 
this will add the Draw method to PIXI.Texture  namespace, now suppose you had this code that load a texture from image.

var stage = new PIXI.Stage(0xffffff);var sprite = new PIXI.Sprite(PIXI.Texture.fromImage("sprite.png"));stage.addChild(sprite); 

 

 
 
now you want to dynamically draw your own sprite for some reason, here is how you use Draw() method
 
 
 

var stage = new PIXI.Stage(0xffffff);//drawing a red circle and use it as a PIXI spritevar sprite = new PIXI.Sprite(PIXI.Texture.Draw(function (canvas) {    //we are now in a 2D context     var r = 10; //radius    canvas.width = r * 2;   //you need to specify your canvas width and height otherwise it'll have a size of 0x0 and you'll get an empty sprite    canvas.height = r * 2;    var ctx = canvas.getContext('2d');  //get  canvas 2D context    ctx.fillStyle = 'rgb(255, 0, 0)';    ctx.beginPath();    ctx.arc(r, r, r, 0, Math.PI * 2, true);    ctx.closePath();    ctx.fill();}));stage.addChild(sprite); 

 

 
 
hope it'll help
 
 
PS : I don't know if such addition have it's place in the official repository to make a pull request or suggest it as a simple hack ...

[Mat Groves]

Hi Ezilia,

 

Looks like a cool fix for now!

 

I definitely plan on including support for primitive drawing in pixi.js soon as its clearly an important part of the what a rendering engine should do. I have a few other features I'm working on at the moment and once they are done I can move onto primitive drawing, ensuring that it works with both webGL and Canvas renderers. 

[Darker]

No longer works - I get TypeError: PIXI.Texture.Draw is not a function now. Any way to get this to work?

[xerver]

No longer works - I get TypeError: PIXI.Texture.Draw is not a function now. Any way to get this to work?

 

Do you need to? We have PIXI.Graphics now, this was a hack before that was implemented.

[intrinsic]

No longer works - I get TypeError: PIXI.Texture.Draw is not a function now. Any way to get this to work?

 

Maybe you missed the definition above:

 

PIXI.Texture.Draw = function (cb) {   var canvas = document.createElement('canvas');   if (typeof cb == 'function') cb(canvas);   return PIXI.Texture.fromCanvas(canvas); }

@xerver, I found a variant of this useful for setting pixels. 5X faster than drawing 1px rectangles.