Jump to content

How to animate line without using spritesheet ?


Recommended Posts



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

Link to comment
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.

Link to comment
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();
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...