Gradients in pixi4

[trsh]

What's the latest recommended way in pixi4 to draw linear gradient in Sprite, without using and image for texture (run time gen.)?

[xerver]

Depends on your goals and the platforms you have to reach. Doing it in a filter is likely the best way but will only work in WebGL.

 

You can do it by just drawing a semi-transparent gradient to a canvas, using that as a texture for another sprite you add as a child to the original sprite. You can even mess with the blendMode to get the desired effect.

[trsh]

6 minutes ago, xerver said:

Depends on your goals and the platforms you have to reach. Doing it in a filter is likely the best way but will only work in WebGL.

You can do it by just drawing a semi-transparent gradient to a canvas, using that as a texture for another sprite you add as a child to the original sprite. You can even mess with the blendMode to get the desired effect.

I also Plan for canvas. So filters won't be an option. Do have any example code for your 2rd and 3rd proposal? I did not get it this time.

[trsh]

My desired effect is something like https://jsfiddle.net/7jotsffw/1/. But the colors are set on runtime.

[xerver]

Just draw the gradient you want to a canvas: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

Then use that canvas as a texture: Texture.fromCanvas(canvas);

 

[trsh]

28 minutes ago, xerver said:

Just draw the gradient you want to a canvas: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

Then use that canvas as a texture: Texture.fromCanvas(canvas);

 

Ok. Thanks will try tomorrow.

[trsh]

On 10/11/2016 at 6:45 PM, trsh said:

Ok. Thanks will try tomorrow.

Works well. The creation can take some 500ms, so better do this on some loading stage.