Jump to content

mouse trail - how to?


Screeze
 Share

Recommended Posts

I am a phaser newbie and am trying to implement some game in an Ionic/Angular app. One core part of the game involves a trail behind touch/mouse moves. I tried several ways to create that, but none gives satisfying result yet. I would be glad somebody could point me in the right direction.

This is what I want to achieve:

User touches the device and moves the finger around. Behind the finger a trail of specific length shall be. When the finger is moved, the end of the trail gets shorter so that the complete trail remains at about same size (moving finger faster probably makes it longer due to move-event being triggered only with delay, but thats acceptable). Depending on events the trail may get longer. Think about it like the snake in classic "Snake" game, which has a trail behind the snakes head, having constant size unless the snake eats something which makes it a bit longer.

The trail shall be e.g. some filled line, which can have curves and direction changes (as user may move finger in any direction). I want no gaps in the line if possible (or have some kind of dotted line with equal gaps if easier/more performant).

There will be other sprites in the game wich shall collide and bounce with the trail (bouncing against the trail shall make it bounce away from it).

The whole thing must be running on mobile devices (hybrid cordova app) so I think only Arcade Physics can work and the solution must be performant.

So far I tried:
1. Collecting Point objects along the Path, rendering 30px thick lines in between. Result: After adding a moveTo behind each lineTo call, to circumvent a drawing bug (http://www.html5gamedevs.com/topic/38147-lineto-with-1px-difference-in-one-axis-drawing-huge-line/), when finger makes a curve now there are gaps on the outside of the curve, which doesn't look nice. Did not try collision detection/bouncing yet, but It seems to be difficult to achieve as the curve has no body the sprites can bounce from.

2. Making use of the Path Plugin to create the path and try to render the curve provided by the path plugin. Result: Currently struggling with using the plugin in my typescript application (http://www.html5gamedevs.com/topic/38152-using-plugins-in-typescript/). Still no idea how to do collision detection with that Path then even if I get it working.

I think I am on the wrong track right now. Which Phaser classes should I use for such thing? Any help would be appreciated!

Thanks in advance!

Greetings

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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