Author Topic: How to make an outline glow?  (Read 1337 times)

sieva

  • Member
  • **
  • Posts: 5
  • Karma: +0/-0
    • View Profile
How to make an outline glow?
« on: Thu, Dec 15, 2011 »
Hi there, i was trying to system where you have few empty slots and few 'option' slots, if you click any of the 3 option slots the open (empty) slots need to start have a glowing outline, after which you can click the empty slot and fill it. When that is done, the glow should vanish again.

My problem is, is that i have no idea how to make the outlines glow.... any help would be appreciated.

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: How to make an outline glow?
« Reply #1 on: Thu, Dec 15, 2011 »
You can apply a GlowFilter but only to Bitmap objects (or Sprites, but none of the Flixel level objects). There are ways of placing these kind of objects on-top of your flixel ones - the way I do the BlurFX plugin in the power tools for example could be made to work in this way. But personally I'd just create the glow in Photoshop and stick it over the top! Simple nearly always wins :)
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

xhunterko

  • Contributor
  • ****
  • Posts: 449
  • Karma: +0/-0
    • View Profile
Re: How to make an outline glow?
« Reply #2 on: Fri, Dec 16, 2011 »
Or just use this instead:

Code: [Select]
package 
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.GlowFilter;
import flash.geom.Point;
import flash.geom.Rectangle;
import org.flixel.*;

public class GlowState extends FlxState
{
[Embed(source = '../assets/car.png')] private var carPNG:Class;

private var dude:FlxSprite;

               /* This part isn't needed
public function GlowState()
{
}*/

override public function create():void
{
// Our PNG is 32x32, but we need room for a big glow around it, so will make a 64x64x bitmap and put the PNG in the middle
var bigBitmap:BitmapData = new BitmapData(64, 64, true, 0x00000000);
bigBitmap.copyPixels(Bitmap(new carPNG).bitmapData, new Rectangle(0, 0, 32, 32), new Point(16, 16), null, null, true);

dude = new FlxSprite;
dude.pixels = bigBitmap;

dude.x = 100;
dude.y = 100;

// Warning - this is quite an inefficient way to do it if you need to update the glow filter a lot during your game, as it uses a temp swap bitmap to achieve it
dude.framePixels.applyFilter(dude.framePixels, new Rectangle(0, 0, dude.width, dude.height), new Point(0, 0), new GlowFilter(0xFF8000, 0.5, 12, 12, 2, 3, false));

add(dude);
}

override public function update():void
{
}

}

}

It's actually Photonstorm's but I haven't gotten around to posting it here on the forums yet. Enjoy!
Now on twitter: http://twitter.com/xhunterko I made a game that's in alpha you can buy here: http://xhunterko.itch.io/wave-miner-alpha

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: How to make an outline glow?
« Reply #3 on: Fri, Dec 16, 2011 »
Ah yeah of course the bitmapData.applyFilter approach too. I forgot about this as I rarely use it, because it's just so insanely slow!! Depends on your game though.
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

sieva

  • Member
  • **
  • Posts: 5
  • Karma: +0/-0
    • View Profile
Re: How to make an outline glow?
« Reply #4 on: Thu, Dec 22, 2011 »
Thanks for all the help, because I am new at this i have decided to go the easy way.
Made normal sprites and new same sprites with outlines, and made the program so, that if you go with the mouse over them the normal one would switch to ones with outlines. Works the same, easy and just more copy paste typing.