Hi,
running through the showcases and other programs there are lots of wonderful examples of vector-style 'glow' around the lines.
This looks great in 'Glowing Rocks From Outer Space', 'Quantum' and 'Scramble'.
I'm wondering what the best way of achieving this effect is. Is it simply part of the sprites or an after-effect applied to the lines?
Many thanks.
Theres several ways to go about this.
1) You could write a line routine that just draws a single line but uses a bitmap image of a line/circle that has glowy edges (As used in scramble)
2) Use a paint package to draw a line image then use filters or effects to add glow around it and use this image as a sprite.
3) Use one of the many vector sprite programs floating around to draw the sprites.
In my game Inzectoids (Plug ;) ) I used a combination of 1 and 3.
See here ;) http://vimeo.com/20327474
I achieved this effect by simply creating my sprites to look like they're glowing.
For starters, I'm NOT a graphics guy, but a programmer.
I learned the paint program by trial and error (and lots of error!).
Included is an snapshot of my 'World Select' menu, for reference.
Also, you'll find my actual skin file that I use to create my buttons and UI elements.
I use my own GUI system that is skinnable, and my button graphic is the 2nd from the top left.
(I use code to crop / paste the left and right edge, plus simply stretch the middle portion to fill the size of the button)
What I did was use the free Paint.NET.
- Start with a transparent background ('Select All' -> 'Cut')
- Add your basic shape you want to glow, drawn in crisp white with a thickness of 2 to 4 (or experiment) pixels.
- Duplicate this layer.
- On the bottom most layer (aka Glow Layer) I added a border using the 'Effects' -> 'Object' -> 'Outline Object' effect, I used about a 3 or 4 pixel outline width.
You can get that plugin here: http://forums.getpaint.net/index.php?showtopic=7291 (http://forums.getpaint.net/index.php?showtopic=7291) - Reduce the overall brightness of the Glow Layer to about -75% (experiment)
- On the Glow Layer, use a blur effect under 'Effects' -> 'Blurs'. I tried the 'Gaussian Blur' and also the 'True Blur' pluggin (may not be a default plugin and have to be added). For the blur to look right I found I had to use a high blur value as GLB tended to render the alpha more opaque than it looked in Paint.NET.
- Save the image as a .png (you'll have to 'flatten the image' to save as .png, it'll prompt you).
You can also save it first as a .pdn (Paint.NET's native format) to preserve the layers for future editing. - Load the sprite in GLB.
- Use the command 'ALPHAMODE -1' to enable the see-through effect of the glow.
- Draw your sprite in the colour you want using POLYVECTORs.
You could also use DRAWSPRITE, but you can't specify a colour (can you?), so instead of using a white line in the steps above, use the actual colour you want.
[attachment deleted by admin]
Thanks for the replies guys!
Scramble looks very effective - I've played it quite a bit since I came across it. I'm guessing there's a speed advantage to having them pre-generated and used as straight sprites? Though as Skydog notes we're stuck with the colours they're generated in (not a problem for me as I'm only really looking at green, red and cyan!)
Love the Inzectoids demo - fast and colorful with simple but addictive gameplay (Note: If you want to add a 'what people are saying' comment, I'd offer "Holy Hell!! They're all trying to kill me! - Steve (Age 40)"). Totally reminds me of an inverse tempest. Very Nice Job! :)
Thats a nice tutorial reply Slydog - I'm trying to download now (download links hidden amongst a stack of adverts!). If I can generate the sprites with paint.net then that will probably be just what I'm after for the sample programs I'm pulling together at the mo. (Still working my way round GLB but thinking about a retro project to get my teeth into).
I'd had a quick look at polyvectors and was wondering whether there's much of a performance hit in using them if there's a lot of objects bouncing round the screen at once (I'm assuming it boils down to plotting lines on screen every cycle - which is typically a bottleneck in the higher level languages?).
Cheers. :)
No problem!
Polyvector Advantages:
- Faster than sprites (when used properly!) in most situations (other's observation, not mine as I don't use sprites!)
- If you draw your base 'sprite' graphic in white, you can apply a colour overlay, such as my buttons each have a different colour yet use the same source image.
Sprite Advantages:
- Easy to use
- Collision detection
- Simple rotation (can be done with polyvectors, but requires manually repositioning all corners)
Polyvectors can be used like sprites, by drawing a rectangular image on the screen.
This requires drawing and connecting the four corner points.
You can use them to draw 'lines' by actually drawing a thin rectangle, rotated to your desired angle.
Polyvectors are generally faster, but don't offer collision detection, but neither does rotated sprites!
And what do you consider 'a lot' of bouncing objects? Either method should be able to handle hundreds of objects at once per frame.
By not using predrawn sprites like I did, and using the other 'glow' methods, you could have dynamic shapes.
I looked into Gernot's Scramble code before and how he does the glowing lines. Very interesting!
You may want to take a look at that code for reference if you want more dynamically shaped objects.