drawing a circle with bitmapData

[fsboc]

My understanding is its preferable to use a bitmapData object to add graphics which you will manipulate with the physics engine. 

 

So, I've been trying to draw circles with bitmapData objects. 

 

I've tried two method which have both failed for different reasons.

 

 

 

1) I followed this example: http://phaser.io/examples/v2/sprites/sprite-from-bitmapdata

 

replacing rect with circle as document here: http://phaser.io/docs/2.3/Phaser.BitmapData.html#circle:

 

var bmd = game.add.bitmapData(128,128);

 

    // draw to the canvas context like normal

    bmd.ctx.beginPath();

    bmd.ctx.circle(0,0,128);

    bmd.ctx.fillStyle = '#ff0000';

    bmd.ctx.fill();

 

 

The rect method demonstrated in the example works fine for me, but when I change it to circle as I have above it gives an error: undefined is not a function, on this line: bmd.ctx.circle(0,0,128);

 

Also, what confuses me about this, is that both circle and rect are listed as public methods of bitmapdata, not of ctx.

 

I also do not understand the difference between bitmapData.context and bitmapData.ctx

 

2)  I coded this following an example I found online:

 

 

        bmd.ctx.fillStyle = '#999999';

        bmd.ctx.beginPath();

        bmd.ctx.arc(25, 25, 100, 0, 2*Math.PI, true); 

        bmd.ctx.fill();

 

 

this produces only a quarter of a circle, despite being set to the amount of radians of a full circle.

[UseTheForceFrodo]

Hi fsboc, I believe I can actually help with this one, as I signed up to ask the same question. My thread with an answer from Rich (including an example) is here http://www.html5gamedevs.com/topic/13462-bitmapdata-circle-help-sandbox/

[fsboc]

Thank you very much UseTheForceFrodo! That was super helpful. I think I was confused because they use bmd.ctx.rect instead of bmd.rect in the example.

 

Anyways thanks a lot, I'll keep an eye out for any questions of yours I happen to see on the forum. 

[UseTheForceFrodo]

It's a path of confusion I definitely followed myself. I looked through the BitmapData docs to try and solve the issue myself first and saw both rect and circle, hence assuming it was a simple replacement. Rich's answer/example helped me understand accessing the BitmapData methods and using the HTML5 Canvas context. For example, you can have:

bmd.ctx.rect(0,0,128,128);

Which uses the HTML Canvas rect method. You can also have, however:

bmd.rect(0,0,128,128);

This works because there also exists a rect method within BitmapData (which is where our illusive circle method resides). So to my knowledge _{(which is lacking, but the reason I'm here is to learn and get better)} you can use BitmapData in the following ways:

 

bmd.ctx.HTML5CanvasMethod(...); //Use existing HTML5 Canvas methods as seen here http://www.w3schools.com/tags/ref_canvas.asp

or

bmd.BitmapDataMethod(...); //Use Phaser's BitmapData methods found in the docs here https://phaser.io/docs/2.3.0/Phaser.BitmapData.html

 

[fsboc]

Yeah that makes perfect sense. Out of curiosity are you enabling physics with your circles? Thats what I'm working on now, allowing the circle bitmap to behave like a circle rather than like a rectangle when colliding with other objects, about to start coordinating two groups of them and adding some random acceleration parameters to produce a certain type of movement I'm looking for. let me know if I can clear up any confusion on anything you're running into