Sprite Gleaming effect in Canvas mode

[caymanbruce]

I want to make sprite gleaming at an interval in Canvas mode in PIXI. What is the best way to do that? Say I want the sprite become brighter (like a light bulb) or darker (just show some lighter color). The switch interval is 1 second or 500ms. I can think of doing this by switching the texture of the sprite but I am not sure if this is the most efficient way.

[alex_h]

Switching texture as you suggested is the best/simplest way. Or if you wanted a 'glow' effect you could do this by showing another sprite with the glow texture either in front or behind of the main sprite. If you try to do something clever with filters etc firstly you would probably want to be using webgl not canvas, and secondly it would be less efficient than simply swapping texture.

[ivan.popelyshev]

Canvas? You can look how CanvasTinter works and do something like that, but with different blendMode. But if you are treating pixi like a holy cow, well...  pre-render stuff in photoshop, change the texture every time, that's the easiest way.

 

https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/canvas/CanvasTinter.js

https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/canvas/CanvasSpriteRenderer.js

You should register your own plugin that does the other thing, then set "sprite.pluginName='myAwesomePlugin'".

[caymanbruce]

On 6/9/2017 at 9:39 PM, ivan.popelyshev said:

Canvas? You can look how CanvasTinter works and do something like that, but with different blendMode. But if you are treating pixi like a holy cow, well...  pre-render stuff in photoshop, change the texture every time, that's the easiest way.

 

https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/canvas/CanvasTinter.js

https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/canvas/CanvasSpriteRenderer.js

You should register your own plugin that does the other thing, then set "sprite.pluginName='myAwesomePlugin'".

In CanvasTinter, I see a canvas argument in "tintWithMultiply: (texture, color, canvas)"

I am not sure what the current canvas is. How can I get this value? 

I create the original texture using a canvas element. Can I return the canvas object and use that canvas element as the argument?