Fading trail

[SarahJ]

Hi,

I'm trying to create a fading trail using minimal graphic/sprite objects. Right now I have an object that is always moving at the same speed and direction, and I would like it to have a trail behind it.

I've looked at the mouse trail demo, however, I feel it is unnecessary to use have to use so many objects just to make a linear trail (the trail I need will always be in the same direction), as I'm going to need 10+ trails at once. Here are 2 of the options I've thought of so far:

1.  Draw a rectangle graphics object, then use an alpha mask to create a fading an effect:
   • 
2. Have a really long sprite as a trail, then use set its frame to the length I need.

Which one would be more practical to use, and are there any better methods?

Thanks!

[ivan.popelyshev]

Better to ask third time in same subforum

Make a png in photoshop and make a sprite or wait when I fix that code to work in v5:

https://gist.github.com/ivanpopelyshev/6128a6b31f1a7f51d536b369a3812ecf

[ivan.popelyshev]

Basically what do I want: I create gradient for Canvas2d or make it manually, and then upload that canvas with fromCanvas() or from() or more sophisticated method.

Alternatively: there is difficult implementation of meshes with colored shaders in https://github.com/gameofbombs/pixi-heaven : https://gameofbombs.github.io/examples-heaven/#/mesh/rope-colored.js . Modify it to affect sprites-only and make it simple if you think you have enough time to learn it.

Here, I gave you ALL the code I have regarding gradients. You can wait for other guys but as far as I know no one else cares about gradients except you and I. Maybe there's a lurker

Again, PHOTOSHOP is your best friend. I still dont understand why dont you like "make a texture in photoshop" approach.

[jonforum]

What about create you gradient in other canvas.
https://www.w3schools.com/graphics/canvas_gradients.asp

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

and than, create `generate` a texture from this canvas context ?

Am sure it can work ...  but at the expense of performance.
I do not remember which one, but there is a rpgmaker plugin that used this process with pixijs.

[ivan.popelyshev]

OK, I was wrong, I forgot about @jonforum

5 minutes ago, jonforum said:

Am sure it can work ...  but at the expense of performance.
I do not remember which one, but there is a rpgmaker plugin that used this process with pixijs.

Cache black-white or transparent-opaque grad one time and use tint/darktint on it

Gradients are basically 1d textures, use them with height=1. Vertex-coloring is not as versatile, you cant put linearRGB in it, for example.

[jonforum]

I will interest by this later, because I remember that I will need to look this at it in depth.
In fact I wanted to be able to generate texture guardian to apply this on a text box to generate a fadding mask text when scrolling the box.
And the box are dynamic size, so i can not use photoshop in this context!, scaling the image will also scale the linear mask picture and give weird result.


it's an old test with a filter for fake linear, but the subject is interesting.
But am not energized to test it now . ?

[jonforum]

also if your check in deep , you have some guys here seem use it. i dotn study the code but maybe it can help to understand how use this kind of stuff.
https://downloads.chaos-project.com/scripts/UltraMode7.js
search keyword `

gradient

`

[ivan.popelyshev]

First demo will be here in 5 minutes or so : https://pixijs.io/examples/#/textures/gradient-basic.js

It took me only one cup of soothing tea.

[jonforum]

3 minutes ago, ivan.popelyshev said:

First demo will be here in 5 minutes or so : https://pixijs.io/examples/#/textures/gradient-basic.js

It took me only one cup of soothing tea.

hey thank , it realy cool to get a demo

[ivan.popelyshev]

Im working on second one, exclusively for v5

[SarahJ]

Thanks for all of your quick replies, I never knew you could create a gradient like that! Back to the original question though, once the gradient is created, would it be right to use it as an alpha mask at the end of a trail?

[ivan.popelyshev]

Here's the second one, super-v5 stuff: https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js

Yes, you can use it as an alphamask. Why do you need though? Your trail is simple rectangle, right?

In fact, that's one of common mask use-cases in Flash: alpha gradients. Its shame we cant replicate all that Flash stuff even after several years of coding.

[jonforum]

Masks is to be avoided as far as possible.
I use 1 or two only in some context, and my cpu get sick very fast.
So for me , no i dont think masks will be more performance friendly than the demo mouse trail  .

but I suppose it can vary in many contexts.
The best and most painful solution will be to test the 2 and check the cpu performance with a debugger SDK or web tools.

but in my personals tests, result told me to avoid as much as possible the use of mask in my project.

wihout i get ~ 10 to 12% work

 

[SarahJ]

I've decided now to use @ivan.popelyshev's method, and I'll get back when I get it working. Thanks, everyone for your replies, I wouldn't have thought of this on my own!

[SarahJ]

Thanks, everyone for helping, I've managed to make a working example of it as a trail now: codepen.io/anon/pen/YgBapq! 

Just one question: With my current code, the trail pops up immediately behind the source. I would like it to act as the mouse trail example; growing as the source first moves, like this:

I originally wanted to use a frame, but it seems like you can't crop a sprite, only a texture, and I don't want to have to make a new texture every frame. What would be the best way to do this?

[ivan.popelyshev]

make a texture

every frame, change "texture.frame", call updateUvs() or _updateUvs() depends on version.

[SarahJ]

Thanks! I forgot to check the source code first. ?

[ivan.popelyshev]

I mean "texture.frame.x= something; texture._updateUvs();" that'll trigger sprite onTextureUpdate automatically, because "sprite._textureID" will differ from "texture._updateID"

That's why we removed underscore from function name - users should use it when they change frame, its not a private API anymore.

[SarahJ]

Finished!  Here's the code for anyone who is looking for a solution in the future:

var app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  antialias: true
});

document.body.appendChild(app.view);

app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.backgroundColor = 0x000000;

var source = new PIXI.Graphics(); // The source of the trail (Red triangle)
source.speed = 4; // How fast the source moves
var angle = Math.random() * Math.PI * 2; // Give the source a random direction

source.velocity = { // Set it's velocity to move it in the random direction
  x: Math.cos(angle) * source.speed,
  y: Math.sin(angle) * source.speed
};
source.pivot.set(0.5);
source.rotation = angle;

source.position.set(window.innerWidth / 2, window.innerHeight / 2); // Start in the center of the window
source.beginFill(0xff0000);
source.drawPolygon([ // Draw a triangle
  40, 0,
  0, 15,
  0, -15
]);
source.endFill();
app.stage.addChild(source);

var gradient = createGradient('white', 'rgba(255, 255, 255, 0)', 250, 20); // Create the gradient texture

var trail = PIXI.Sprite.from(gradient); // Create a sprite from the texture
trail.anchor.y = 0.5;
trail.rotation = source.rotation + Math.PI;
app.stage.addChild(trail);

var length = 0; // Length starts off with 0, grows with the source moving

app.ticker.add((delta) => {
  source.position.x += source.velocity.x;
  source.position.y += source.velocity.y;

  trail.position.x = source.position.x;
  trail.position.y = source.position.y;
  if (length + 2 < 250) {
    length += source.speed; // Constrain the length to not go over 250
    gradient.frame = new PIXI.Rectangle(0, 0, length, 20);
    gradient._updateUvs(); // Update the sprite after setting a new frame in the texture
  }
});

function createGradient(start, end, width, height) {
  var canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;

  var ctx = canvas.getContext('2d');
  var gradient = ctx.createLinearGradient(0, 0, width, 0);
  gradient.addColorStop(0, start);
  gradient.addColorStop(1, end);

  ctx.fillStyle = gradient;
  ctx.beginPath(); // Draws it in a triangular shape
  ctx.moveTo(width, height / 2);
  ctx.lineTo(0, 0);
  ctx.lineTo(0, height);
  ctx.fill();

  return PIXI.Texture.fromCanvas(canvas);
}

 

[SarahJ]

@ivan.popelyshev Instead of

On 3/25/2019 at 7:31 PM, ivan.popelyshev said:

texture.frame.x= something; texture._updateUvs();

Could you edit the sprites textures frame directly, like:

var sprite = new PIXI.Sprite(<gradient texture>);
sprite.texture.frame = new PIXI.Rectangle(<...>); // Edit it directly

Or is this bad practice?

[ivan.popelyshev]

Its good practice, pixi automatically updates the frame in that case , no need to call _updateUvs()