Issue drawing arc graphics with phaser

[mauro98]

I'm trying to create a pie chart with Phaser, using `graphics` to draw each slice of the pie (`graphics.arc(...)`). The problem is that when it renders I get (what I think) an unexpected result.

I basically want to draw 3 slices the same size, the code I use looks something like this:

function degToRad(degrees) {
      return (degrees * Math.PI)/180;
}

var total = 3;
var width = 300;

for (var i = 0; i < total; i++) {
      var radius = Math.floor(width / 2);
      var deg = 360 / total;
      var start = degToRad(i * deg);
      var end = degToRad((i + 1) * deg);

      graphics = game.add.graphics()
      graphics.beginFill(0xFF0000)
      graphics.lineStyle(2, 0x000000)
      graphics.moveTo(0, 0);
      graphics.arc(0, 0, radius, start, end, false);
      graphics.endFill()
}

I've created 3 fiddles to show the difference between a canvas, pixi and phaser based examples, each of them using the same process to draw the slices:

canvas: https://jsfiddle.net/oL414v9t/1/

pixi: http://jsfiddle.net/ngma7snq/59/

phaser: https://jsfiddle.net/1ck39fos/1/

Does anyone know why this happens and how can I achieve what I want?

[samme]

Is https://jsfiddle.net/oL414v9t/1/ the appearance you want?

http://labs.phaser.io/edit.html?src=src\game objects\graphics\pacman arc.js

 

[mauro98]

yes, that's exactly what I need,

but how can I do that with phaser 2?

[samme]

I don't think Phaser 2 Graphics has a slice/wedge method like what you want.

But if you use a BitmapData you can draw on its canvas context directly.

[samid737]

Setting the second last argument to true seems to slice it, but colouring would probably needed to be done manually (subtract or shift colour?

https://jsfiddle.net/1ck39fos/4/

https://phaser.io/examples/v2/display/arc-details

 

[mauro98]

Thank you both. I ended up using pixi.js after all since I didn't find a quick solution for this.

[samme]

https://codepen.io/samme/pen/erovKN?editors=0010