A few years back, I wrote some words down on faking the vector glow look. Then the RR servers got hacked and all that remains of said tutorial is a poor, sad pictureless block of text, tucked out of sight on the archive of this blog. Which is a sad state for any tutorial to sit in if ever I heard of it.
With that in mind, I figured that it really was about time I got it up again. As the Bishop said to the… etc…
As any folks who’ve played any of my games will be aware, I have a certain fetish when it comes to things that glow. I like glowy things. As anyone who’s delved into the DIYSYNSO packs will be able to tell, I also fake that glow. Obviously, it’s a real glow and I use the term “fake” to mean “I ensure the glow is doodled onto the sprite rather than done in any sort of code because to tell the truth I’m a bit thick when it comes to code anyway”. Just so we’re clear.
So, here’s a thing. It’s a pink robot from SYNSO2. Exported out from its original home in Pro Motion in a lovely sprite strip form.
Isn’t that just fab? 4 frames of amazingly detailed artwork right there.
Here’s another thing. It’s a screenshot of SYNSO2. Can you spot the difference, readers?
Yes, the second one glows! Good spot. Gold star and I’ll mark it up on your chart later. You’ve earned yourself a sticker.
What we’re going to do here today is take that Pro Motion pixel sketch and turn him into a lovely glowing sprite using the power of Photoshop. Because that’s how I roll.
Let’s start by taking one frame of the sprite out, placing him on a new layer in Photoshop and filling the layer beneath in black so we can see what we’re working with. You can try this at home if you want.
Well, that was easy. And making him glow is equally easy. Because we have our little pink friend on a new layer, we can select that layer in Photoshop and apply a layer style. Which, in case you haven’t worked it out yet is a style that’s applied to a layer. Rather obviously, we’re going to need the outer glow option. Because we want it to glow on the outside.
With me so far?
So, select the layer the Pink Robot is on. Select layer styles and select outer glow. You should find yourself with something that looks like this by default:
Obviously, this makes our robot a very sad robot indeed as no-one wants such an ugly aura surrounding them. So, first stop – we need to change the colour.
By simply changing the colour of the outer glow to #be15bc we’ve got something infinitely more pleasing to the eye. And a much happier robot for it. That’s good because you’ve got to keep your robot happy or they start sulking and smashing plates.
Once, I changed the colour to #cdca85 and I lost a whole cutlery drawer as well. So be careful out there!
When fiddling with the glow itself, it’s always nice to be able to spread it and size it. Luckily folks, Adobe have gotten there first and provided you with a spread and size option. Wahey.
Technology, it’s the future. Things to note when playing with spread and size.
Don’t go overboard. Subtlety is the key here.
SYNSO2 draws the sprites straight onto the screen with additive blending so if that’s your want and you don’t mind things being all glow, then that’s it. That’s yer lot for that part.
If however, you don’t want the transparency that comes with straight additive blending then just draw the original sprite on top without using blending modes and you’ll have a sprite that glows but isn’t see through. And huzzah.
Have a practice with some simple shapes and you’ll find some eerily familiar looking effects come incredibly easy…
But wait…
The pink robot from SYNSO3 rather obviously isn’t a single colour nor a blocky sprite. He’s a 3d model made up in Groboto and then carefully tweaked in a series of renders to make an animated sprite. And obviously, the steps we’ve used above aren’t going to apply quite the same here.
We need a glow that isn’t necessarily a single colour. How do we achieve that, then? Easily! Huzzah!
To create the glow for SYNSO3 I’ve done things a little differently. This time we have 2 layers of the sprite in question. One naturally enough will be on top of the other. So we go to the lower of the two layers and do a Gaussian blur effect. This, curiously enough, blurs the sprite underneath leaving our top layer one intact.
We then flip up to the top layer and add a very slight inner glow as an almost halo-y effect and a very slight outer glow so that the layers bleed into each other nicely. SYNSO3 doesn’t actually use additive blending on the sprites at all because with a careful choice of colour, you still get the nice effect you’re looking for and you can do everything with just the one sprite.
Here’s a very old video to demonstrate what I mean:
This is also what Andy did with the sprites for the 360 version of SYNSO, so y’know, it works fine if you’re careful. It might take a little bit more tweaking but you’re probably only looking at a minute or so extra on top to get a nice effect that anyone who has access to an art package of some sort can do. Hurray.
Let’s run through this with a new friend. This is Mr Mushroom.
And here’s Mr Mushroom’s sprite sheet so you can grab him and try this yourself. Click to get the fullsize version, natch.
I’m dragging Mr Mushroom out of his box because he’s perfect to demonstrate the point in hand. He’s a funny looking bugger with a fair few more colours. So first thing we’ll need is two Mr Mushrooms on separate layers. Whilst in the picture below, they’re clearly apart, we want them on top of each other so we can see more clearly wot go on.
So the first thing we need to do is select the Mr Mushroom who sits below the other Mr Mushroom and give him a good blurring to. Don’t worry, he’s used to it and won’t scream.
If you’re using an art package that isn’t Photoshop then you’ll probably have to go with this Gaussian blur route regardless. Don’t worry, it’s a little bit of extra fiddling but you’ll still get the same effect and you can shift the hue of the layer beneath to a nicer colour for the same effect I described in the first part of this run through.
Ok, let’s sit Mr Mushroom on top of blurry Mr Mushroom and see what happens:
That’s with a 5.9 on the Gaussian Blur scale on Photoshop. You can adjust as necessary, obviously. Different sized sprites need different sized blurs. Ok, if you’re not a Photoshop user, you can probably drop out of this next bit or find your own way around.
So the next thing we want to do is to make it look a bit sexier. As I mentioned earlier – inner glow helps here.
What I’ve added here is a slight inner glow, a small stroke to the outside and thrown in a very slight outer glow so that it bleeds into the blurred sprite below. Sort of pretty much what I mentioned before getting sidetracked by posting a video.
It has the lovely result of not only glowing a tad but generally being nicer on the eyes than just a lumpen block of a 3d render. Especially when your modelling skills are clearly as amazing as mine aren’t.
Thanks to the careful choices of colour, that’ll still look nice and glowy without having to resort to additive blending.
It’s a trick but hey, they don’t call me Mr Tricky for nothing. That they don’t really call me Mr Tricky is perhaps something you should ignore for the foreseeable future though.
So there we go. That’s how I fake my glows for the SYNSO games and how easy it is for anyone to create something a little bit nice in a very simple way.
Once you’ve started tinkering with the basics, you’re well on the way to being able to do lots of lovely things with layers and glows and mixing and matching normal and additive blending things in your game.
As usual, I look forward to seeing what you do because I’m sure you’ll go and do something wonderful.
Pingback: Illusions | Chimera 2010