How to draw a partial circle ?

[bluedot]

Hi guys,

 

Any suggestions on how I can draw a partial circle ? I'm trying to create a count down timer style with a disappearing circle as time runs out.

 

Thanks.

 

[rich]

Graphics.arcTo.

[bluedot]

Graphics.arcTo.

Yeah, I thought of that but when I looked into the Graphics source/docs, that API wasn't there. That an inherited API from Pixi ?

[lewster32]

I made a little BitmapData-based 'pie' style progress indicator for a project before, here it is as a fiddle: http://jsfiddle.net/lewster32/0yvemxnw/

[rich]

Yeah, I thought of that but when I looked into the Graphics source/docs, that API wasn't there. That an inherited API from Pixi ?

 

http://www.goodboydigital.com/pixijs/docs/classes/Graphics.html

[bluedot]

http://www.goodboydigital.com/pixijs/docs/classes/Graphics.html

Sure, but how do I get access to the Pixi object instance from a Phaser state ?

 

e.g. calling PIXI.Graphics.arc(800, 50, 50, 0, 120, false); doesn't work. 

[lewster32]

The Phaser.Graphics object extends PIXI.Graphics, so it contains the same methods. You need arcTo, not arc. This is a bit confusing because the docs aren't updated, but the source is available here so you can determine the correct methods and signatures: https://github.com/GoodBoyDigital/pixi.js/blob/master/src/pixi/primitives/Graphics.js

[bluedot]

calling,  this.clockArc = new Phaser.Graphics.arcTo(800, 50, 850, 80, 20);

 

doesn't work. The JS console tells me that Phaser.Graphics is ok, but there's no arcTo(). Also, surely if Phaser.Graphics extends PIXI.Graphics it should also have PIXI.Graphics.arc() ?

I'm using phaser.min.js if that makes any difference.

 

Sorry, I'm pretty new at this JavaScript programming, you may have to go slow at explaining things to me.

[lewster32]

Your syntax is wrong - you need to create a Graphics instance first - see this example:

 

http://examples.phaser.io/_site/view_full.html?d=display&f=graphics.js&t=graphics

 

Essentially, game.add.graphics(x, y) is a factory method that conveniently creates a new Graphics instance. You can make the instance yourself with new Phaser.Graphics(game, x, y) too if you wish. Think of the Graphics instance as a canvas with which to draw on. You can then use arcTo and other methods on this instance to draw shapes on it.

 

Using a minified copy of Phaser should not make any difference so long as the version number is correct.

[bluedot]

Thanks lewster32, that's what I was missing, needed to create a graphics context, I kind of assumed that Phaser would already have one I can re-use.

[lewster32]

It does have a canvas context, but you should not be using that - Phaser has its own scene graph display list (again, inherited from pixi) which is managed and updated automatically.

[MattBrooklyn]

I made a little BitmapData-based 'pie' style progress indicator for a project before, here it is as a fiddle: http://jsfiddle.net/lewster32/0yvemxnw/

 

Thanks for posting this. I was able to make use of part of it for a game timer in a game I'm working on. Much appreciated!

[Bigmacbook]

[Deleted]