Recently BitmapData modifiers were added to the PushButton Flash Game Engine. With this technique you can apply all kinds of BitmapData modification on Sprite and Spritesheet renderers, on SpriteContainers and even on the entire scene ( if you use a BitmapDataScene that is..).
Modifiers for effects like Bloom, Glow , Blur, Colorize, Reflection are provided with the engine, but one can easily create your own. Even modifiers that perform animating modification, like a pulsating glow for example, are possible.
Download tutorial code here
Code uses minimal components, so import the swc into your project.
You also need to put the PBE logo image and the animating star spritesheet into the same folder as your compiled swf, for the sample to work.
Why would we need modifiers
Answer is simple … Graphics that are modified by the engine don’t need to be created and loaded as a resource. If you would have a game with animating enemies that look the same, but having a different color, you could load one enemy animation resource and create multiple colorized modified SpriteContainer or SpriteSheet objects. You would be decreasing your loading time and only need to create one resource when designing the graphics of your game.
Image that you have to create/render a reflection resource for each frame in all your animations and sprites. TORTURE!! NO NEED … there is a ReflectionModifier that turns an image in its reflection.
In addition, some effects can be real time so you can switch on-off specific modifiers at your convienience. To set a BlurModifier when an object is moving fast, could render a nice effect. Or maybe you would want to set your entire scene to grayScale when someone completes a level and you show the level score, just assign a GrayscaleModifier to the (PBE.scene as BitmapDataScene) and your done.
How do modifiers work
When you create a game using the open source PushButton flash game engine, all images and animations you use consist of BitmapData objects. These objects are loaded and maintained by the Engine and contain raw bitmap data. BitmapData is pixel color and transparency (ARGB) information about an image.
A modifier is a class that will modify the bitmap data of an image.
There are two types of modification :
- REAL-TIME
This modification is applied on each render pass. This type of modification is active when you are applying modifiers to a SpriteSheetRenderer or BitmapDataScene object.
- PRE-RENDERED
This modification is applied when the modifiers are assigned. The image data is stored in modified state. This type of modification is active when you are applying modifiers to a SpriteRenderer object or SpriteContainer subclass, like SpriteSheetComponent or SWFSpriteSheetComponent.
The classes mentioned above all have a modifiers:Array attribute. By assigning an array of one or multiple modifers to this attribute , you will activate the provided modifiers.
example : turn your scene into grayscale (only with BitmapDataScene)
(PBE.scene as BitmapDataScene).modifiers = [ new GrayscaleModifier() ];
example : apply a red colorization on a sprite
var render:SpriteRenderer = new SpriteRenderer(); render.modifiers = [ new ColorizeModifier([0.5,0.5,0.5,0,0],[0.5,0,0,0,0],[0.5,0,0,0,0],[0,0,0,1,0])];
example : apply a pulsating glow colorization on an animating sprite
var render:SpriteSheetRenderer = new SpriteSheetRenderer(); render.modifiers = [ new SizeModifier(150,150), new PulsatingGlowModifier( new GlowModifier(0xcc0000,.65,5,5,3,3), new GlowModifier(0xff2200,.9,8,8,6,10))];
Changing the assigned modifiers array has no effect, only when assigning a new Array it will show changes, a bit the same as the filters array you use with the Sprite Class.
// wrong render.modifiers.push(GrayscaleModifier()); // wrong render.modifiers[render.modifiers.length] = GrayscaleModifier(); // right render.modifiers = render.modifiers.concat(GrayscaleModifier());
You can have multiple modifiers that will be applied in the modifiers Array’s order.
So, for example …. you have a nice cut-out sprite animation that you would want to apply a glow to. Because you have made such a solid sprite, having no overhead spacing pixels in your loaded image, only applying a GlowModifier would render a clipped glow. This because glow radiates outwards and therefor out off your Sprite’s boundaries.
Solution … RESIZE. To achieve a nice glow on a sprite or animation one should first size-up the image by using the SizeModifier (creating more render area for the glow) and after that apply the GlowModifier.
Set size to 100×100 pixels and apply red glow.
render.modifiers = [ SizeModifier(100,100) , GlowModifier(0xff0000) ];
One could even finish with applying another SizeModifier to downscale the glowing Sprite.
Create your own modifier
We are gonna make a ColorBlockModifier that replaces the image with a block (rectangle) of a specific color.
To create a new modifier we subclass from the Modifier Class
[com.pbe.rendering2D.modifier].
public class ColorBlockModifier extends Modifier
{
...
}
In the modifier constructor you can provide parameters that you can use when you are modifying. In this case the color of the block we are creating.
public var color:uint = 0xff000000;
public function ColorBlockModifier(color:uint=0xff000000)
{
this.color = color;
super();
}
Now we only need to override the modify function that will handle the modification:
public override function modify(data:BitmapData, index:int=0, count:int=1):BitmapData
{
..
}
data:BitmapData
image BitmapData object
index:int=0
frame index when using modifier in combination with SpriteContainer subclass or SpriteSheetRenderer
count:int=1
frame count using modifier in combination with SpriteContainer subclass or SpriteSheetRenderer
You can use index and count attributes when you want to create an animating modification. A pulsating Glow for example. In the modify function we alter en return the image data:BitmapData object.
The entire modifier code should look something like this:
public class ColorBlockModifier extends Modifier
{
public var color:uint = 0xff000000;
public function ColorBlockModifier(color:uint=0xff000000)
{
this.color = color;
super();
}
public override function modify(data:BitmapData, index:int=0, count:int=1):BitmapData
{
data.lock();
for (var y:int = 0; y<data.height; y++)
{
for (var x:int=0; x<data.width; x++)
data.setPixel32(x,y,color);
}
data.unlock();
return data;
}
}
Download tutorial code here
Code uses minimal components, so import the swc into your project.
You also need to put the PBE logo image and the animating star spritesheet into the same folder as your compiled swf, for the sample to work.
As you have seen, modifiers are easy to use and easy to create. So use them well …