How to write glow effect for sprites/graphics in PIXI v4?

[caymanbruce]

I hope it also work in CanvasRenderer too because my game aims to play in HTML 5 canvas. Do you do that with PIXI.filters?

[themoonrat]

Filters are webgl only. If you want the effect to be on both, I'd think you'd need a glow sprite that could appear being each sprite you want to be able to glow.

But 

For me, personally, I'm happy to accept that canvas players won't see all the effects of webgl players. They are in the minority, on older devices/browsers, and so i take the attitude of "just get it working and playable" for canvas rendering, with it looking exactly how i want on webgl only. Might save a lot of hassle if you can take that attitude too!

 

[labrat.mobi]

Filters are webgl only. Glow filter is available here,

https://github.com/pixijs/pixi-extra-filters/tree/master/src/filters/glow

[caymanbruce]

2 hours ago, themoonrat said:

Filters are webgl only. If you want the effect to be on both, I'd think you'd need a glow sprite that could appear being each sprite you want to be able to glow.

But 

For me, personally, I'm happy to accept that canvas players won't see all the effects of webgl players. They are in the minority, on older devices/browsers, and so i take the attitude of "just get it working and playable" for canvas rendering, with it looking exactly how i want on webgl only. Might save a lot of hassle if you can take that attitude too!

 

Yes I am happy to just work and playable for Canvas rendering. But there must be glowing effect as I know it is doable I just don't know how to write the effects for canvas. I don't need it to be very shiny but at least it shows something.

[Fatalist]

For Graphics, you could use the shadow functions of canvas - https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur 

 

[webdeveloper_issy]

@Fatalist Would be a perfect fallback!

If we ask the devs nicely they will add the fallback on the glowfilter 

[Fatalist]

4 hours ago, webdeveloper_issy said:

@Fatalist Would be a perfect fallback!

If we ask the devs nicely they will add the fallback on the glowfilter 

Filters are always webgl-only. You could argue for adding it to Graphics, but canvas is not a priority, so you will probably have to implement it yoursrlf

[caymanbruce]

On 12/24/2016 at 10:48 PM, Fatalist said:

For Graphics, you could use the shadow functions of canvas - https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur 

 

How can I add a shadow/glow effect on a sprite using this? I can't find a way to get the context from PIXI.Sprite class. Do I have to use 

renderer.view.getContext('2d')

to get 2d context? And then wrap the shape of the sprite with the shadow? Where can I find any example doing this with PIXI? I have googled around for days but I am losing hope.

[Fatalist]

https://github.com/pixijs/pixi.js/blob/dev/src/core/graphics/canvas/CanvasGraphicsRenderer.js

6 hours ago, caymanbruce said:

How can I add a shadow/glow effect on a sprite using this?

It will not work for sprites, it will ignore transparency and draw a rectangular glow - not what you want probably. edit: I was wrong, it works.

For Graphics, you will have to patch this - https://github.com/pixijs/pixi.js/blob/dev/src/core/graphics/canvas/CanvasGraphicsRenderer.js

[caymanbruce]

20 minutes ago, Fatalist said:

https://github.com/pixijs/pixi.js/blob/dev/src/core/graphics/canvas/CanvasGraphicsRenderer.js

It will not work for sprites, it will ignore transparency and draw a rectangular glow - not what you want probably.

For Graphics, you will have to patch this - https://github.com/pixijs/pixi.js/blob/dev/src/core/graphics/canvas/CanvasGraphicsRenderer.js

How about cloning multiple sprites and apply offsets to the sprite? According to this issue:

https://github.com/pixijs/pixi.js/issues/1043

Will this work? If this doesn't sound like a good option I think I will have to do what you suggest.

[Fatalist]

1 hour ago, caymanbruce said:

How about cloning multiple sprites and apply offsets to the sprite?

Yeah, apply some tint and low alpha to the clones and it will look ok I think.

But why don't you make a glowing version in Photoshop and just show it when it should glow?

---------------------------------

Actually I just tested and I was wrong - shadows work fine with images: https://jsfiddle.net/y59b714w/

So you can patch this - https://github.com/pixijs/pixi.js/blob/master/src/core/sprites/canvas/CanvasSpriteRenderer.js

 

[caymanbruce]

24 minutes ago, Fatalist said:

Yeah, apply some tint and low alpha to the clones and it will look ok I think.

But why don't you make a glowing version in Photoshop and just show it when it should glow?

---------------------------------

Actually I just tested and I was wrong - shadows work fine with images: https://jsfiddle.net/y59b714w/

So you can patch this - https://github.com/pixijs/pixi.js/blob/master/src/core/sprites/canvas/CanvasSpriteRenderer.js

 

Because my sprites are not generated from images. They are generated from textures built with PIXI.Graphics objects. The sprites can grow bigger or shrink smaller , imagine Agar.io, I need to add glows to the little circle, so I don't think using image is a good choice.

[Fatalist]

4 hours ago, caymanbruce said:

They are generated from textures built with PIXI.Graphics objects.

Then it's better to use a canvas element instead of Graphics - so you get better antialiasing, more options, etc.

    var canvas = document.createElement("canvas"),
        context = canvas.getContext("2d");

    //draw things...    
        
    var texture = PIXI.Texture.fromCanvas(canvas);

 

[caymanbruce]

9 hours ago, Fatalist said:

Then it's better to use a canvas element instead of Graphics - so you get better antialiasing, more options, etc.

    var canvas = document.createElement("canvas"),
        context = canvas.getContext("2d");

    //draw things...    
        
    var texture = PIXI.Texture.fromCanvas(canvas);

 

Good suggestion. I will give it a try. The thing is will it affect performance if I have hundreds of "canvas" objects in my game? Since every sprite has different size I wonder if I can reuse the "canvas" object.