Phaser trying to emulate trailing effect from different engine

[phot]

Hello,

I've been trying to emulate the effect seen in this page http://www.like100bears.com/writing/2d-3d-in-gamemaker-studio.  While I was able to get the boat working (with no help from child spriting...) I am having trouble implementing the water trail behind the boat.  The author said that they just used a bunch of the same sprite, which got me to thinking I might be able to use phasers emitters, however rotation just refuses to work in any sensible way (rotations are maintained through out the lifetime of the particle, and do not rotate with respect tot he centerX and centerY or any variable that I can see from emitter) and I couldn't find a way to have particles monotonically decrease in size instead of randomly coming into existence with different size. I thought I could possibly use ropes, but then realized I would probably run into the same problem with rotations, I would like the tail to "follow" the main object, not just swing around wildly.  I finally decided that maybe I should just try the naive approach the user hinted at in his post.  However the problem then comes with being able to follow an anchor point on the back of an arbitrarily sized sprite, how would I find the position to even lay the sprite down?  I''ve been googling for hours and not much  has helped. 

I hope some one else can help me with this. 

 

EDIT:  Sort of got this to work with rope, used snake logic on the rope points (each point moves to the next point) and had the lead point follow the back of the boat, which I calculated by doing the following. 

 

var boatBackPosition = this.boatGroupBase.position.clone();
boatBackPosition.x += 16;

//console.log(this.boatGroupBase.body.facing);
boatBackPosition.rotate(this.boatGroupBase.position.x, this.boatGroupBase.position.y, this.boatGroupBase.body.rotation + 180, true);

this creates a point a distance 16 away from the anchor point of the boat, then rotates that point to the opposite facing side of the boat. 

snake logic is here, may use deltas and add speed to get it to work better

var prev_point = boatBackPosition.clone();
//this.points[6] = this.points[7];
// this.points[0].x = this.boatGroupBase.x;
// this.points[0].y = this.boatGroupBase.y;
for (var i = this.points.length - 1; i >= 0; i--) {
    var temp_point = this.points[i].clone();
    this.points[i].copyFrom(prev_point);
    prev_point = temp_point.clone();
}

[samme]

I think a Rope might be best, but here is an emitter: http://codepen.io/anon/pen/vXVPEE

[phot]

12 minutes ago, samme said:

I think a Rope might be best, but here is an emitter: http://codepen.io/anon/pen/vXVPEE

Thanks for the example, but would you mind explaining a bit more of what your code is doing (either here or in commenting it)?  Additionally I have a problem where the motion of the rope-tail is not as circular as I'd like, I thought I'd solve this by using the function:

var exponentialLimit = function (limit, x) {
    var xSq = x * x;
    return (limit *(xSq)) / (xSq + x + 1);
}

where limit would be the max dimension of the image, providing more joints toward the end of the rope, rather than the beginning which makes circling easier.  This sort of worked, however I'd like to use a different function that has some sort of asymptote at a user specified point.  Normalized functions would theoretically work as well.  Would easing be the best route for this method?

 

EDIT: I just noticed this is completely negated by the snake method, I need to some how maintain a ratio between all points in a exponential nature to create the illusion of a more circular trail.  I'm not sure how to go about this, currently using the index and exponentialLimit to emulate larger spacing and better curvature during update, seems to be working, but i need better curvature. 

for (var i = this.points.length - 1; i >= 0; i--) {
    //var temp_point = this.points[i].clone();
    //this.points[i].copyFrom(prev_point);
    //prev_point = temp_point.clone();
    var temp_point = this.points[i].clone();
    Phaser.Point.interpolate(this.points[i], prev_point, deltaTime * (exponentialLimit(0.1,i)+.1), this.points[i]);
    prev_point = temp_point.clone();

}

[Tom Atom]

Hi,

 look at this tutorial: http://www.emanueleferonato.com/2014/06/10/html5-string-avoider-game-made-with-phaser/

 This is more or less how I made rainbow trail behind unicorn in Ridhwan's Unicorn game: https://www.gameeapp.com/game/yo9dVVzSRi

[samme]

1. You can tween the particle scale by adding a duration argument to emitter.setScale().
2. There are a lot of ways you could track the stern of the boat sprite. I just add a 1x1 child sprite to the left edge and then read its world position later.
3. You can match the particle's rotation to the boat's rotation in the particle.onEmit callback.

On 10/18/2016 at 8:55 PM, samme said:

I think a Rope might be best, but here is an emitter: http://codepen.io/anon/pen/vXVPEE