A scene is a multi-layered game environment/background or overlay. With a scene you can create a static or paralax scrolling backgrounds for your games. Using the layer index attribute you can even create your static HUD overlay that will float on top of your scrolling game world.
A scene is usally combined with animating (player and enemy) entities and game logic to form a game level.
And for the PBE Push Button Engine Developers among us .. the PBE actionscript 3 source code for your scene can be generated using your workspace.
!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.
Creating your Scene
You can create a new scene by pressing the ‘Create new scene’ button in the scene’s section of your workspace. When you create a new scene, you can first configure the basic scene’s settings like : name, visibility, world size and view size.
Your world size is the size of your game world ( rectangle 0,0,width,height ).
Your view size is the (on screen) size of your scene viewer. (min 100×100, max 800×600)
After you setup your scene dimensions and press the ‘create’ button. Your scene is created and a first layer is added. You will always have at least one layer, so if you delete the only layer, a new one is re-added immediately.
You can edit settings, add a new layer, delete the current layer , save layers (and automaticly create a content icon of the current scene’s view) and toggle (F12) the layer property window.
On the right you will find the Layer Settings that you can toggle by clicking the ‘Toggle’ button of pressing the F12 key (when flash has focus). The properties let you specify things like : layer type (fill/paralax), alpha (transparency), layer index ( layer drawing order , 0 is bottom , >0 is more on top ), scroll factor (speed) and more…
A filled layer is filled with an image you select.
A paralax layer scrolls the selected image in the world in relation to the view size. So an image that would be the exact size of the viewer will not scroll (static background or HUD overlay). An image that has the exact world size dimensions will scroll with a factor of x=1, y=1.
When you have selected an image (one from your workspace or one shared by the community), you can scale it of change the image canvas size. You can also specify if the repeating/filling of the image is only one vertical or horizontal row and how that row should be aligned to the game world.
When selecting an image you can search for it in your workspace or in the shared community content repository.
You can view the image with it’s real size (if it fits on screen) using the ‘view’ link, left from the image icon display on the layer properties panel.
Generating PBE source code
When you edit the scene’s settings in your workspace you will find a ‘generate source code’ button. You can specify your application name, your asset path and if you want to embed or load the content.
If you choose to generate the generated source code will look something like this:
// ------------------------------------------------------------------
// http://www.makeyourglashgame.com
// Generated by user [mas] on September 20, 2010, 2:00 pm
// Scene 'PSK scene - Ice'
//
// Generated with XML templates
//
// !IMPORTANT
// - to compile this source you will need the free myfg as library
// download @ http://content.makeyourflashgame.com/pbe/com.myfg.rar
// - you will need to provide the image resources yourself.
// ------------------------------------------------------------------
package
{
import com.myfg.pbe.debug.StatusTextComponent;
import com.myfg.pbe.rendering.SceneLayerRenderer;
import com.myfg.pbe.rendering.SceneWorldComponent;
import com.myfg.pbe.spatial.MouseSpatialComponent;
import com.pblabs.engine.PBE;
import com.pblabs.engine.core.TemplateManager;
import com.pblabs.engine.entity.IEntity;
import com.pblabs.engine.entity.PropertyReference;
import com.pblabs.rendering2D.SpriteRenderer;
import com.pblabs.rendering2D.ui.SceneView;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
import flash.geom.Rectangle;
[SWF(width="500", height="300", framerate="60")]
public class Application extends Sprite
{
// ------------------------------------------------------------------
// public methods
// ------------------------------------------------------------------
public function Application()
{
super();
// initialize the application
initApplication();
}
// ------------------------------------------------------------------
// private methods
// ------------------------------------------------------------------
private function initApplication():void
{
// create background bitmap
var bmd:BitmapData = new BitmapData(500,300,false,0);
this.addChild(new Bitmap(bmd));
// initialize game engine
initEngine();
// create/download resources
new Resources(createEntities);
}
private function initEngine():void
{
// Start up Push Button Engine
if (!PBE.started)
PBE.startup(this);
// Set up a simple PBE scene
PBE.initializeScene(new SceneView(),"scene");
}
private function createEntities():void
{
// register PBE types
PBE.registerType(SpriteRenderer);
PBE.registerType(IEntity);
// register MYFG types
PBE.registerType(MouseSpatialComponent);
PBE.registerType(StatusTextComponent);
PBE.registerType(SceneWorldComponent);
PBE.registerType(SceneLayerRenderer);
PBE.templateManager.loadFile("entityXML");
PBE.templateManager.addEventListener(TemplateManager.LOADED_EVENT, templateLoaded);
}
private function templateLoaded(event:Event):void
{
// instantiate loaded entities
PBE.templateManager.instantiateEntity("mouse cursor");
mouse = PBE.lookupComponentByType("mouse cursor",MouseSpatialComponent) as MouseSpatialComponent;
PBE.templateManager.instantiateEntity("status");
status = PBE.lookupComponentByType("status",StatusTextComponent) as StatusTextComponent;
status.status = "world mouse coords |#mouse cursor.spatial.position|";
PBE.templateManager.instantiateEntity("PSK scene - Ice");
// add application event handlers
PBE.mainStage.addEventListener(Event.ENTER_FRAME,onFrame);
}
private function onFrame(e:Event):void
{
if (mouse!=null && mouse.buttonDown)
PBE.scene.position = PBE.scene.position.subtract(new Point(mouse.delta.x/20,mouse.delta.y/20));
}
// ------------------------------------------------------------------
// private and protected variables
// ------------------------------------------------------------------
private var status:StatusTextComponent
private var mouse:MouseSpatialComponent
}
}
// ------------------------------------------------------------------------
// Internal classes
// ------------------------------------------------------------------------
import com.pblabs.engine.PBE;
import com.pblabs.engine.resource.ImageResource;
import com.pblabs.engine.resource.Resource;
import com.pblabs.engine.resource.ResourceBundle;
import com.pblabs.engine.resource.XMLResource;
import com.pblabs.engine.resource.provider.IResourceProvider;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.DropShadowFilter;
import flash.geom.Point;
class Resources extends ResourceBundle implements IResourceProvider
{
[Embed(source="assets/IcyBG01_far.png")]
public var res1:Class;
[Embed(source="assets/IcyBG01_mid.png")]
public var res2:Class;
[Embed(source="assets/IcyBG01_near.png")]
public var res3:Class;
// ------------------------------------------------------------------
// public methods
// ------------------------------------------------------------------
public function Resources(callWhenReady:Function)
{
super();
PBE.resourceManager.registerResourceProvider(this);
createDynamicResources();
callWhenReady();
}
public function isResourceKnown(uri:String, type:Class):Boolean
{
if (uri == "mouseCursor" && type==ImageResource)
return true;
if (uri == "entityXML" && type==XMLResource)
return true;
return false;
}
public function getResource(uri:String, type:Class, forceReload:Boolean = false):Resource
{
if (uri == "mouseCursor" && type==ImageResource)
return mouseResource;
if (uri == "entityXML" && type==XMLResource)
return entityXMLResource;
return null;
}
// ------------------------------------------------------------------
// private and protected methods
// ------------------------------------------------------------------
private function createDynamicResources():void
{
mouseResource = new ImageResource();
mouseResource.initialize(createMouseCursor());
entityXMLResource = new XMLResource();
entityXMLResource.initialize(entityXML);
}
private function createMouseCursor():Bitmap
{
// create mouse pointer bitmap
var bitmapData:BitmapData = new BitmapData(17,19,true,0);
var sy:int = 3;
var ey:int = 15;
for (var x:int = 3; x<15; x++)
{
for (var y:int = sy; y<ey; y++)
{
bitmapData.setPixel32(x,y,0xffffffff);
}
sy+=1; ey-=1;
}
bitmapData.applyFilter(bitmapData,bitmapData.rect,new Point(0,0),
new DropShadowFilter(0,45,0,1,2,2,8));
return new Bitmap(bitmapData);
}
// ------------------------------------------------------------------
// private and protected attributes
// ------------------------------------------------------------------
private var mouseResource:ImageResource;
private var entityXMLResource:XMLResource;
private var entityXML:XML =
<things>
<entity name="mouse cursor">
<component type="com.pblabs.rendering2D.SpriteRenderer" name="render">
<fileName>mouseCursor</fileName>
<alpha>0</alpha>
<layerIndex>75</layerIndex>
<positionProperty>@spatial.position</positionProperty>
<rotationProperty>@spatial.rotation</rotationProperty>
</component>
<component type="com.myfg.pbe.spatial.MouseSpatialComponent" name="spatial">
<manager entityName="scene" componentName="Spatial" />
<rotateAround>true</rotateAround>
</component>
</entity>
<entity name="status">
<component type="com.myfg.pbe.debug.StatusTextComponent" name="text">
</component>
</entity>
<entity name="PSK scene - Ice">
<component type="com.myfg.pbe.rendering.SceneWorldComponent" name="world">
<world><x>0</x><y>0</y><width>2400</width><height>300</height></world>
<position>C</position>
</component>
<component type="com.myfg.pbe.rendering.SceneLayerRenderer" name="far">
<alpha>1</alpha>
<layerIndex>8</layerIndex>
<scrollOffset><x>0</x><y>0</y></scrollOffset>
<scrollFactor><x>0.10000000000000014</x><y>1</y></scrollFactor>
<paralax>false</paralax>
<fillSize><x>960</x><y>480</y></fillSize>
<fillScale><x>1</x><y>1</y></fillScale>
<horizontalDisplay>*</horizontalDisplay>
<verticalDisplay>B</verticalDisplay>
<fileName>assets/IcyBG01_far.png</fileName>
</component>
<component type="com.myfg.pbe.rendering.SceneLayerRenderer" name="med">
<alpha>0.7000000000000001</alpha>
<layerIndex>10</layerIndex>
<scrollOffset><x>0</x><y>0</y></scrollOffset>
<scrollFactor><x>0.40000000000000013</x><y>1</y></scrollFactor>
<paralax>false</paralax>
<fillSize><x>960</x><y>480</y></fillSize>
<fillScale><x>1</x><y>1</y></fillScale>
<horizontalDisplay>*</horizontalDisplay>
<verticalDisplay>*</verticalDisplay>
<fileName>assets/IcyBG01_mid.png</fileName>
</component>
<component type="com.myfg.pbe.rendering.SceneLayerRenderer" name="near">
<alpha>1</alpha>
<layerIndex>11</layerIndex>
<scrollOffset><x>0</x><y>0</y></scrollOffset>
<scrollFactor><x>1.8000000000000007</x><y>1</y></scrollFactor>
<paralax>false</paralax>
<fillSize><x>960</x><y>480</y></fillSize>
<fillScale><x>1</x><y>1.3000000000000005</y></fillScale>
<horizontalDisplay>*</horizontalDisplay>
<verticalDisplay>B</verticalDisplay>
<fileName>assets/IcyBG01_near.png</fileName>
</component>
</entity>
</things>;
}
!IMPORTANT You will have to put the image files that are embedded, or need to be loaded, into the assets folder yourself.
To compile the source code you will need the ‘free’ makeyourflashgame.com PBE library that you can download here.
!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.
