mauro98

Issue drawing arc graphics with phaser

Recommended Posts

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.