Forums » Help » Animating lines connecting 2 entities

We're currently working on a game that "chains" enemies together as they are clicked. Currently we're doing this by using the draw() method to write directly to the canvas, creating a line between the two entities (and making it have a neon glow), however we've been asked by the client to implement some effects which really seem like they will require some graphics (fire, ice, sparkling metal, etc...). We initially thought about spawning a connecting entity with an animation, but because the distance/angles between the two connected entities could be anything, that didn't seem like the best (or possible) approach. This might be more of an HTML5/Canvas question, however we wanted to throw it out in this forum, as we've picked up so much good advice from this community in the past, and thought it might be worth seeing if anybody has faced a similar situation, or has any ideas on how to best implement the functionality. Any suggestions/ideas/thoughts would be much appreciated. Thanks in advance.

Have you seen World of Goo? Notice the lines that hold the goo balls together... Is that kind of the effect you are going for?

Yes, that is exactly the type of thing (World of Goo) that we are envisioning. Animations would obviously be a bit different, but conceptually that is it. Any idea how that is implemented?

The World of Goo look is based on "Meta Balls". I used a similar style to draw out the connected lines on a map.

paper.js into impact and customizing it's cool Meta Balls example. As far as animating... you'll just have to draw something moving along a path. This will all be some raw HTML5/Canvas stuff probably.

Good luck! ;)

Graphikos can you show how to integrate paperjs with impact

Quote from Ids
Graphikos can you show how to integrate paperjs with impact

+1 to that!

http://paperjs.org/examples/meta-balls/

Thanks to some great direction from Graphikos we were able to use paper.js to chain our entities with the 'meta ball' example. Performance (on mobile) is a slight issue, however it runs totally smooth on the desktop. We're currently working on stripping out all the unneccessary aspects of paper to just get it down to the code we need, which hopefully will solve the performance issue. Once we get things working the way we want we'll definitely contribute back what we've done.

Just wanted to throw out a thank you to the community, for great input, as usual.

Graphikos I was wondering if you'd be willing to share how you integrated paperjs into impact. I have some simple animated line drawing that I'd need to do in a project and this seems like one of the more straightforward approaches.

Hi guys, Was a paperJS integration plugin ever released? I am using PaperJS myself too, however the "this.update() in the draw method is over-riding the automatic draw method of the PaperJS library.

What I did for now is to draw the Impact entities separately after calling paper.view.draw(); within my Game.draw() method.

Then, I set this.clearColor = null; to remove the black background added by Impact engine.

I was able to get Paper working inside Impact by the following, but it is not clean.

paper.install(window); // so commands are easily available
paper.setup(ig.system.canvas); // draws directly on the same canvas as ImpactJS
// Allow paper to be drawn when the impact draws on canvas
paper.view.onFrame = function(event) {
this.draw();
}
// handles mouse/keyboard interaction through Paper and not impact
this.InteractionTool = new Tool();

// when mouse is clicked use the ig.game.onMouseUp method
this.InteractionTool.onMouseUp = function(event) {
ig.game.onMouseUp(event);
}

// when mouse is moved, use the ig.game.onMouseMove method
this.InteractionTool.onMouseMove = function(event) {
ig.game.onMouseMove(event);
}