How to make Outline/Glow on sprites? (2D pixel game)

Graphics
1

Hi, I made a post about lightsources but here’s another thing I’d like to have in my game.

So I’m pretty sure everyone has atleast heard of Castlevania SotN.
In the game, main character has this bad ass breathing glow effect

I’m looking to have similar status/power indicator in my game.
I actually have very simple and but not very efficient outline/glow already in place.

How it works is:

  1. Take the creature’s texture
  2. Make empty texture with same size and graphics device as original
  3. Loop trough each pixel in creature’s texture, and if it is not transparent draw pixel to outline texture with wanted outline/glow color
  4. Draw the glow/outline texture four times with one pixel offsets to where creature is going to be
  5. Draw the creature
  6. Outline/glow in place!

Obviously this is not very efficient, because I change creature’s texture for every different animation so I have to make new glow/outline texture every time the texture changes.
I’m also lacking the bad ass breathing glow.
But, even if it has these drawbacks, I came up with it myself and I’m proud of it :).

Is there better, more efficient way to create glow + the bad ass breathing glow?
I have zero experience/knowledge about shaders/effects.

All help is appreciated! If the answer is complex, please tell it to me like I was a child.

1 Like
2

The way you’re doing is OK.

But, for performance gain (but memory lose), you could save the grown background of each animation step,
do this in the loading screen and just reuse for animating.

If you save every grown background in every color tone, it’ll use much memory, so I guess that the color tone selection is OK to paint on animating.

Every time you need ‘customize’ your animations, is nice to use this way.
Do it only 1 time, use a lot.

1 Like
3

Why not use shader? Also for glow pulse. I would just drag alpha channel through some simple filter (if it is suppose to be exactly one pixel then it is ideal and I would actually do it in one pass). When I have extended alpha mask I would multiply it whatever with color I want and then with (sin(time * freqMultiplier) + 1) * 0.5. After that I would blend (inside same one pass shader) original texture on top of the result.

1 Like
4

Thanks for confirming that this is ok way to do this.

I don’t use shaders because I don’t know how to… They are scary and complicated :frowning:

I had thought about saving each outline texture to dictionary or something, but I wanted to make sure that this isn’t bad way of doing this.I also had an idea to just make it all-white, and then drawing it with wanted Color in spritebatch.Draw parameter. This way the Color parameter could give the pulsing effect.

The game currently uses normally between 70 000-80 000 kt memory, but abusing Quitting to main menu and starting game again makes it grow slowly to even 100 000 kt. This is probably because I once Quit is pressed the game goes again trough all those LoadContent etc functions.

1 Like
5

How I’d do it without shaders, assuming you use SpriteBatch:

Create a white image of the texture with outline and use the SpriteBatch Color parameter to change it’s color.

Here’s a sample project that I created. It loads some textures and creates outlines for them and draws them with various effects(not shader effects).

1 Like
6

Awesome example, thanks Olander!

For some reason my textures came out “messy”, but I got the basic idea and got it working correctly :slightly_smiling:

1 Like