Sign in to follow this  
prateek.pradeep

How to animate line without using spritesheet ?

Recommended Posts

Hi,

 

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

 

3o85xFXGDXMaC4sPgQ.gif

 

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 ??

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

 

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();

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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.