I am currently trying to create an outline for some sprites in my game.
After searching Google, I decided to implement it using two sprites, one above the other and the “bottom” one scaled up a bit and tintFilled with white.
It works perfectly for square/rectangular shaped but is very ugly when I use a “normal” sprite with transparency.
See the difference:
I noticed that a devlog (https://phaser.io/phaser3/devlog/109) mentions a glow shader which is what I’d like to use but it doesn’t seem to have been released as of today.
How many different sprites do you have? A simple way to do this would be to use two different png files as animation frames. One with the white outline and one without. Then, just switch between them as needed.
Isn’t that more or less what I’ve attempted above?
Regarding the number of sprites, I expected to be able to do it for more or less any interactive sprite so it could be a lot.
Yes, very similar. But I meant to use two different files. When you create your graphics (in photoshop or whatever), create one with an outline and one without.
But, looking at your code, you can also try setOrigin(0.5) so the images scale from the center. You will need to position based on their center too.
Am I allowed to bump this thread?
I’m not asking for code or anything, I’d just like to have a slight idea regarding the process I could use.
I don’t expect someone to solve this issue for me.
The other option is to write your own shader. There’s an intro to shaders in Phaser 3 here. And, I’m sure there are examples of glow shaders on the web that you can adapt to your needs.
Yes, I read this tutorial but it seems to describe camera-based shaders. I have no experience working with them at all but I’m not sure this would allow me to make specific sprites glow. Do you think it would?
Thanks for the suggestion!
That would work but I don’t like having to move two sprites at once.
I could use a container (and I tried) but it isn’t interactive so I would need to make my sprite interactive but use the container for the x,y coordinates, not very practical.
Why not create a new class called HighlightSprite or something, and have it extend the Sprite class. Inside that class, have it create a second sprite as described above to be your highlight. That way, it still acts as a Sprite, just with an additional sprite on it.
That’s a good workaround. Do you know if I can do it so that it’s easily integrated with Phaser? Do I still need to recreate and register all factories or is there an easier way?
Are you sure about that? I myself haven’t experimented with tint fills too much, but I modified one of the examples (this one) and alpha appeared to function normally with tint fills, even when using different values for each vertex.
Seems like the issue has been fixed. I’m still in 3.11 for the moment, though.
Anyway, I’m not very happy with the idea of doubling the amount of sprites/images just to achieve this effect. I switched to a setTint(0x999999) which is far from ideal but will do the job until a white tint is possible. I opened an issue there to try and get a feature added.
