Hi! I want to start by saying that it's my first tutorial ever, so if I miss something or doesn't explain, don't be afraid to ask!
What you need to know before we start:- Basic knowledge of AS3
- BitmapData class and copyPixels function
That's pretty much it. If you can display sprite from PNG file on your screen using AS3, soon you will be able to add outline to it.
I'm not really good with words, so I will mostly use code and images.
Let's start by creating some basic variables.
canvas is our 'main' BitmapData we will draw on. We will pass it to Bitmap object to display it on scree.
pikachu holds our graphics. I used [Embed] tag to add sprite to the project, that's where PikaGraphics come from.
outline is a very important object. It's a rectangle that defines color of our outline. It should be at least as big as our sprite (that's why I used pikachu's dimension creating it). With some tweaks to the code you could even create outlines with gradient!
p is a simple Point with sprite's position on screen.
The last thing to prepare is our Bitmap object, I pass
canvas in to it, scale it up to x2 for better visibility and add it to stage.
At that point we are ready to display our Pokemon. Just add this simple line.
Result:
Ok, now, to the real job. If you've ever tried to display a sprite with transparency, you've probably seen those 2 parameters, that are always both null. Those are alphaBitmapData and alphaPoint. Those are used to define alphaMask.
Alpha mask let's you copy pixel's color from your source bitmapData, but alpha from other. We will use that, to copy our infamous pink rectangle and shift it to the left.
Result:
Ok, by now you probably know where it's going, we do that for the 3 other sides:
And get a full and clean outline!
"But Moczan, the topic clearly states that you posses the ancient power of outlines with variable thickness"
Fear not, we can easily do that by throwing our outline drawing code into the loop!
Results for the thickness of 2 and 3
Yep, it's that easy. It gets ugly when you try to bigger numbers,
adding diagonal shift or
caching result and using that as a new alpha mask helps with that a lot, but results may vary per sprite, and thickness of 1 or 2 is what's people want to do most of the time.
Bonus! source code
Community
