The goal of this Tutorial is to give some information how we can create a 3 scene layered sample that uses bitmap filtering.
See example of this tutorial in action
Download the resources for this tutorial.
( put these in the folder of your swf )
Download the code for this tutorial. PBE 1.0 code
Using the BitmapDataScene all things rendered will be rendered using copyPixels or draw onto a BitmapData and a Bitmap linked to this BitmapData will be automaticly added to the current view. This should give some better performance because Blitting (copy pixels) pixels to the screen is usually faster than letting flash manage the sprites on screen.
If you use the BitmapDataScene you will probably see some jagged edges when you give your sprite a rotation. This is a known problem when blitting and rotating pixel data using a matrix.
With the BitmapDataScene you will have access to the Scene’s bitmap property where you for example can set filters.
We use the following xml that will create one normal DisplayObjectScene and two BitmapDataScene objects and an animated sprite (scaled/positioned) in each scene.
<things version="1">
<entity name="scene">
<component type="com.pblabs.rendering2D.DisplayObjectScene" name="scene">
<sceneView type="com.pblabs.rendering2D.ui.SceneView" >
<name>scene</name>
<width>400</width>
<height>300</height>
</sceneView>
<position>
<x>0</x>
<y>0</y>
</position>
</component>
</entity>
<entity name="sceneBlur">
<component type="com.pblabs.rendering2D.BitmapDataScene" name="scene">
<sceneView type="com.pblabs.rendering2D.ui.SceneView" >
<width>400</width>
<height>300</height>
</sceneView>
<position>
<x>0</x>
<y>0</y>
</position>
</component>
</entity>
<entity name="sceneColor">
<component type="com.pblabs.rendering2D.BitmapDataScene" name="scene">
<sceneView type="com.pblabs.rendering2D.ui.SceneView" >
<width>400</width>
<height>300</height>
</sceneView>
<position>
<x>0</x>
<y>0</y>
</position>
</component>
</entity>
<entity name="animatedSprite" alias="asprite" >
<component type="com.pblabs.animation.AnimatorComponent" name="spriteAnimations">
<animations childType="com.pblabs.animation.Animator">
<idle type="">
<animationType>LOOP_ANIMATION</animationType>
<duration>1</duration>
<repeatCount>-1</repeatCount>
<startValue type="int">0</startValue>
<targetValue type="int">71</targetValue>
</idle>
</animations>
<defaultAnimation>idle</defaultAnimation>
<reference>@render.spriteIndex</reference>
</component>
<component type="com.pblabs.rendering2D.spritesheet.SpriteSheetComponent" name="animatedSpriteSheet">
<divider type="com.pblabs.rendering2D.spritesheet.CellCountDivider">
<xCount>25</xCount>
<yCount>3</yCount>
</divider>
<image filename="star-green.png"/>
</component>
<component type="com.pblabs.rendering2D.SpriteSheetRenderer" name="render" >
<scene entityName="scene" componentName="scene"/>
<spriteSheet componentName="animatedSpriteSheet" />
<spriteIndex>0</spriteIndex>
</component>
</entity>
<entity name="animatedSpriteBlur">
<component type="com.pblabs.animation.AnimatorComponent" name="spriteAnimations">
<animations childType="com.pblabs.animation.Animator">
<idle type="">
<animationType>LOOP_ANIMATION</animationType>
<duration>1</duration>
<repeatCount>-1</repeatCount>
<startValue type="int">0</startValue>
<targetValue type="int">71</targetValue>
</idle>
</animations>
<defaultAnimation>idle</defaultAnimation>
<reference>@render.spriteIndex</reference>
</component>
<component type="com.pblabs.rendering2D.spritesheet.SpriteSheetComponent" name="animatedSpriteSheet">
<divider type="com.pblabs.rendering2D.spritesheet.CellCountDivider">
<xCount>25</xCount>
<yCount>3</yCount>
</divider>
<image filename="star-green.png"/>
</component>
<component type="com.pblabs.rendering2D.SpriteSheetRenderer" name="render" >
<scene entityName="sceneBlur" componentName="scene"/>
<position>
<x>30</x>
<y>30</y>
</position>
<scale>
<x>0.8</x>
<y>0.8</y>
</scale>
<spriteSheet componentName="animatedSpriteSheet" />
<spriteIndex>0</spriteIndex>
</component>
</entity>
<entity name="animatedSpriteColor">
<component type="com.pblabs.animation.AnimatorComponent" name="spriteAnimations">
<animations childType="com.pblabs.animation.Animator">
<idle type="">
<animationType>LOOP_ANIMATION</animationType>
<duration>1</duration>
<repeatCount>-1</repeatCount>
<startValue type="int">0</startValue>
<targetValue type="int">71</targetValue>
</idle>
</animations>
<defaultAnimation>idle</defaultAnimation>
<reference>@render.spriteIndex</reference>
</component>
<component type="com.pblabs.rendering2D.spritesheet.SpriteSheetComponent" name="animatedSpriteSheet">
<divider type="com.pblabs.rendering2D.spritesheet.CellCountDivider">
<xCount>25</xCount>
<yCount>3</yCount>
</divider>
<image filename="star-green.png"/>
</component>
<component type="com.pblabs.rendering2D.SpriteSheetRenderer" name="render" >
<scene entityName="sceneColor" componentName="scene"/>
<position>
<x>-30</x>
<y>-30</y>
</position>
<scale>
<x>1.2</x>
<y>1.2</y>
</scale>
<spriteSheet componentName="animatedSpriteSheet" />
<spriteIndex>0</spriteIndex>
</component>
</entity>
<group name="animatedSprite03">
<objectReference name="sceneBlur"/>
<objectReference name="scene"/>
<objectReference name="sceneColor"/>
<objectReference name="animatedSprite"/>
<objectReference name="animatedSpriteBlur"/>
<objectReference name="animatedSpriteColor"/>
</group>
</things>
We load the level using the TemplateManager and add an event listener that will notifies us when the game data has been loaded .
// Deserialize scene and animated sprite from xml using the TemplateManager.
TemplateManager.instance.loadFile("animatedSprite03.xml");
TemplateManager.instance.addEventListener(TemplateManager.LOADED_EVENT,gameDataLoaded);
When the game data has been loaded we get notified and can create our game entities. After the creation of the Entities we will handle our Bitmap objects by setting their filters and adding them to the stage.
private function gameDataLoaded(event:Event):void
{
// after the game data has been loaded we have to instantiate the entityGroup animatedSprite03 from the template xml file
PBE.templateManager.instantiateGroup("animatedSprite03");
// get Bitmap objects from PBE Scene2DBitmapDataComponent objects
var bitmapBlur:Bitmap = (PBE.lookupComponentByName("sceneBlur","scene") as BitmapDataScene).bitmap;
var bitmapColor:Bitmap = (PBE.lookupComponentByName("sceneColor","scene") as BitmapDataScene).bitmap;
// create color matrix for filter
var matrix:Array = new Array();
matrix=matrix.concat([1,0.5,0.5,0,0]);// red
matrix=matrix.concat([0.5,0.2,0.2,0,0]);// green
matrix=matrix.concat([0.5,0.2,0.2,0,0]);// blue
matrix=matrix.concat([0,0,0,.6,0]);// alpha
// set blurfilter
bitmapBlur.filters = [ new BlurFilter(6,6)];
// set color filter
bitmapColor.filters = [ new ColorMatrixFilter(matrix) ];
}
See example of this tutorial in action
Download the resources for this tutorial.
( put these in the folder of your swf )
Download the code for this tutorial. PBE 1.0 code