Cannot draw graphics using game.time.events.repeat

[Politybuilder]

I'm trying to draw a graph incrementally, one line segment every second. I start with this:

graphics = game.add.graphics(50, 50);
window.graphics = graphics;

...and draw up the graph axes etc - all works fine. Then I set the line style, plot the first data point and then create a series of calls to nextData() - one per second:

graphics.lineStyle(5, 0xff0000, 1);
graphics.moveTo(xData[0], yData[0]);
game.time.events.repeat(1000, 159, nextData, this);

The nextData() function takes x and y coordinates from arrays according to a step variable that increments each time the function is called:

function nextData()
{
    graphics.lineTo(xData[step], yData[step]);
    step++;
}

However, nothing gets drawn. The data is all fine - all the values are correct and the function is called once a second and the step function increments as it should. The only thing I have noticed is that if I put in a REALLY small value for the time interval in game.time.events.repeat like this:

game.time.events.repeat(1, 159, nextData, this);

e.g. 1 instead of 1000, the first data point is drawn but nothing else - no lines, nothing.

I tried this with Javascript setInterval() as well and it didn't work then either so I'm thinking it has something to do with the graphics?

[FakeWizard]

Here is what I think is causing that you can't see no line drawn at all... 

•  calls moveTo() 
  • move graphic cursor to position xData[0], yData[0]
  • as part of this call , it also calls drawShape() ,
    which (among other things) creates graphics.currentPath property (which will store all the future points) 
• render() 
  • is being called implicitly as the time event hasn't been called yet, and thus drawing the shape based on whats in graphics.currentPath. 
  • graphics.currentPath will be cleared after drawing the shape 
• calls lineTo()
  • it adds a shape to previously emptied graphics.currentPath
• render()
  • is called, but since there is only one point stored , not sure if it gets drawn or not.. but eventually the graphics.currentPath will again get cleared.

 

The bottom line;

as explained above the path data is being cleared after completing the rendering cycle and hence you could not see anything displayed.

The solution would be to always move the current drawing potion to the previous position 

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create });

var graphics;

var xData = [ 0 , 40, 20, 100 ];
var yData = [ 50 , 55, 80, 200 ];
var step = 0;

function create() {
	
    graphics = game.add.graphics( game.world.centerX, game.world.centerY );
	
	graphics.clear();
    graphics.lineStyle(5, 0xFFFFFF, 1);
	graphics.moveTo( xData[0], yData[0] );
	game.time.events.repeat(1000, xData.length, nextData, this);
	graphics
}

function nextData(){
	if((step - 1) >= 0){
		graphics.moveTo( xData[step-1], yData[step-1] );
	}
	console.log( graphics.currentPath );
	graphics.lineTo( xData[step], yData[step]);
	step++;
}

 

[Politybuilder]

Yes! That works brilliantly.

Cheers, thanks for that.