Jump to content

draw on bitmap context (Loader animation) not visible


s4m_ur4i
 Share

Recommended Posts

I've got this little cirlce fill animation and want to draw it on the bitmap context in phaser.

 

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var cx=150;
var cy=150;
var rectWidth=15;
var rectHeight=2;
var rotation=0;

requestAnimationFrame(animate);

function animate(){
    requestAnimationFrame(animate);
    ctx.save();
    ctx.translate(cx,cy);
    ctx.rotate(rotation);
    ctx.rect(-rectWidth/2+8,-rectHeight/2,rectWidth,rectHeight);
    ctx.fill();
    ctx.restore();
    rotation+=Math.PI/180 * 10;
}

So I set up these:
 

this.ui.loader = game.add.bitmapData(100,100);
this.ui.loader.dirty = true;
this.ui.displayloader = game.add.image(game.width / 2 - 50, 100, this.ui.loader);

And then using the context to draw:
 

this.ui.loader.context.save();
this.ui.loader.context.translate(this.ui.loader.settings.cx,this.ui.loader.settings.cy);
this.ui.loader.context.rotate(this.ui.loader.settings.rotation);
this.ui.loader.context.rect(-this.ui.loader.settings.rectWidth/2+8,-this.ui.loader.settings.rectHeight/2,this.ui.loader.settings.rectWidth,this.ui.loader.settings.rectHeight);
this.ui.loader.context.fill();
this.ui.loader.context.restore();

(Variables are stored in this.ui.loader.settings).. nothing happens, no error, no visible thing, any ideas?

Regards

Link to comment
Share on other sites

I bet you're drawing offscreen somehow because of the translations. That looks right to me, but maybe try drawing a rectangle at (10,10) with width and height of 100 and see what happens?

I haven't done a lot of drawing with BitmapData directly to the Phaser canvas, only drawing to it once and using it as a texture for an image or sprite... but do you have to set it dirty after each draw? Or call "update" on it?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...