How to animate line without using spritesheet ?

[prateek.pradeep]

Hi,

 

I want to animate line without using sprite sheet. This is what I want.

 

 

Currently I tried to implement it using Graphics class but cannot achieve it. This is what I tried.

 var graphics = game.add.graphics(100,100);    graphics.lineStyle(4, 0xffffff, 1);    var finalPosition = {      x: 200,      y: 0    };    graphics.moveTo(finalPosition.x, finalPosition.y);    var renderLine = game.add.tween(finalPosition)      .to({        x: 800,        y: 0      }, 3000);    renderLine.onUpdateCallback(function() {      graphics.lineTo(finalPosition.x, finalPosition.y);      graphics.moveTo(finalPosition.x, finalPosition.y);    });    renderLine.start();

Anyone can help on this ??

[drhayes]

What happens when this code runs? How do you know it's not working? Do you see anything? Is this graphics object directly attached to the game world, not a texture for something else? If you remove the tween and just draw the completed line, can you see it?

 

I would track the start position and tween the end position, then draw the entire line over again after clearing the graphics. Don't draw it incrementally.

 

What it looks like you're doing is drawing a lot of tiny line segments in your tween's update callback. That second call to moveTo isn't necessary, BTW... lineTo moves the "cursor" to the right position anyway.

[prateek.pradeep]

Well with the current code I get a dotted line having dots placed at random position.

 

what do yo mean by this

"I would track the start position and tween the end position, then draw the entire line over again after clearing the graphics. Don't draw it incrementally."

Can you speak in terms of code?

[prateek.pradeep]

hmm

[drhayes]

Something like this:

renderLine.onUpdateCallback(function() {  graphics.clear();  graphics.moveTo(startPosition.x, startPosition.y);  graphics.lineTo(finalPosition.x, finalPosition.y);});

[prateek.pradeep]

 

Something like this:

renderLine.onUpdateCallback(function() {  graphics.clear();  graphics.moveTo(startPosition.x, startPosition.y);  graphics.lineTo(finalPosition.x, finalPosition.y);});

Or there is another way to do it.

 var g = game.add.graphics(center.x, center.y);    g.beginFill(0xFFFFFF);    g.drawRect(0, 0, 800, 2);    var t = game.add.tween(g)      .to({        width: 100,        rotation: 0.5      }, 1000)      .start();