Box2D Level Editor XML AS3 Loader for flash
In this entry we are going to use FABLE as3 loader. This loader is able to load the xml that is generated by fable and load the world including the images into a flash project.
To take this tutorial we will start with this fable project, this project is a marble machine, contains some complex fixtures and some complex joints, next we can see the example of the project.
The first step is to publish the project. For this we only go to File and publish. This will generate the following files.
Now in this same folder we will create a flash file with any name. We will also set the box2d library and the as3 loader, that you can download from the loader section. So this will look like this.
Now in our flash file we will add two layers so that it ends like this.
In the first frame we will move to the actions-frame and add the following line.var xml:XML = new XML((<![CDATA[
]]> ).toString());
So our flash looks like this.
This lines are a hack to make a xml with a multiline text. Now we will copy the contents of the .xml file that falbe generated and paste it between this two lines. It will look something like this.
Now We will get an a in our timeline like this.
It is important to mention that we need to have this layer on the top because the variable xml defined there will be used later in the layer that is below.
Now we move to the bottom layer and to the actions-frame tab and add the following lines of code.
import Box2D.Dynamics.b2World;
import Box2D.Common.Math.b2Vec2;
import flash.display.Sprite;
import flash.events.Event;
//Create the canvas where we will be drawing the world
var canvas:Sprite = new Sprite;
canvas.scaleX = canvas.scaleY = .25;
addChild(canvas);
//Create the world
var world:b2World = new b2World(new b2Vec2(), false);
//Create the as3 loader
var loader:Loader = new Loader(xml,world , canvas, true);
//If we have images load them
loader.loadImages(xml);
//Set the physics simulation data Those are the settings used in FABLE
var timeStep:Number = 1 / 30;
var velocityIterations:Number = 6;
var positionIterations:Number = 2;
//Add a listener to drive the physics simulation
addEventListener(Event.ENTER_FRAME,
function(e:Event):void{
//The call to the world physics
world.Step(timeStep, velocityIterations, positionIterations);
//THe call to sync the images
loader.synk();
});
So it will looks like this.
There some interesting things here, as you can see I am setting the canvas scale to .25, this is because the original fable project has a size of 2048×1536 pixels, that is huge so i am scalling it to 1/4 of the size.
Now we will set the flash project canvas to a value that is 1/4 the original fable canvas size, that is 512×359 and the frames per second to 30.
And we are set, now we publish the flash project and we should see the following.
This is the fable embeded in the page.
The latest version of the loader is in the loaders page.
Hello, dear Esteban Perez Mejia!
You created the remarkable tool! But I little distressed(
Using this lesson to me to manage with the help of FlashDevelop to collect the project and he was aptly started!
When I have tried with the help of FABLE BOX2dEditor to get new .xml file, that has found that he differs from that that is given in example.
In concrete no tags and … possible such new project will not begin in Flash Player?
Please help me!
Hi ZWayfarer, sorry for the troubles you are experiencing, this is because the application was not updated. I had just fixed the problem. Download the latest version of fable and your problem should be gone. Please let me know.
Thank you, Admin!
Here is code on FlashDevelop:
package
{
import Box2D.Dynamics.b2World;
import Box2D.Common.Math.b2Vec2;
import flash.display.Sprite;
import flash.events.Event;
//[SWF(width="800", height="480", frameRate="31", backgroundColor="#FFFFFF")]
public class Main extends Sprite
{
[Embed(source = "FableDemoOneFile.xml", mimeType="application/octet-stream")] private var FLABLE_xml:Class;
var xml:XML = new XML(new FLABLE_xml());
public function Main()
{
//Create the canvas where we will be drawing the world
var canvas:Sprite = new Sprite;
canvas.scaleX = canvas.scaleY = 1; // .25
addChild(canvas);
//Create the world
var world:b2World = new b2World(new b2Vec2(), false);
//Create the as3 loader
var loader:Loader = new Loader(xml, world, canvas, true);
//If we have images load them
loader.loadImages(xml);
//Set the physics simulation data Those are the settings used in FABLE
var timeStep:Number = 1 / 30;
var velocityIterations:Number = 6;
var positionIterations:Number = 2;
//Add a listener to drive the physics simulation
addEventListener(Event.ENTER_FRAME,
function(e:Event):void{
//The call to the world physics
world.Step(timeStep, velocityIterations, positionIterations);
//THe call to sync the images
loader.synk();
});
}
}
}
Now Flash Player does not display the textures, all are displayed only in mode “debugDraw”.
The Textures appear only on wink in the first frame in the manner of sprite sheet..
Prompt please what solve a problem?
var loader:Loader = new Loader(xml, world, canvas, true);
This line, the last parameter of the loader constructor is to toggle between texture and debugDraw mode. true is debugDraw, false is textures.
Even if you call loader.loadImages you should set this parameter, sorry if this cause confusion, Now That I review it it looks strange. Hope this solve your problem.
Thanks!
Yes, I changed on “false”, but so texture is seen only in the first frame in the manner of sprite sheet, but further on screen nothing be not displayed.
Want to turn Your attention on that I try write exhibit under Flash Player rather then under AIR, can this has importance? The Textures “FableDemoOneFile_0.png” and “FableDemoOneFile_1.png” they are found in one directory with .swf file.
Hi, It should not be any problem trying to use it in flashDevelop. I did a small test using your code and saw the texture flash. In my case this was due to the canvas being too big. Please make it small to see if you have the same problem.
In the following lines set scaleX and scaleY to something smaller, perhaps .2 or .1 instead of 1
//Create the canvas where we will be drawing the world
var canvas:Sprite = new Sprite;
canvas.scaleX = canvas.scaleY = 1; // .25
addChild(canvas);
Also I just make a small update to the loader in order to read the pixels to metters paramenter ptm, in the version you have it is fixed in the loader to 500 and not to what is set in falbe, if you want to fix your loader you can either download the new version or change this function to look like this in the loader.
public function setProperties(xml:XML):void{
ptm = Number(xml.properties.ptm.@value);
}
Hope this fix your problems.
Hi! Thank you!
Now textures are displayed!
But regrettably flash of the texture in initial frame all are seen under any importance scaleX and scaleY.
I have changed importance .25 in example on 1 therefor that size canvas was real such as in FABLE.
Glad to hear that, hope you find the program usefull 🙂
Thanks!)
Can this not greatly, but there is else such warnings:
…\Loader.as(43): col: 15 Warning: variable ‘ptm’ has no type declaration.
…\Loader.as(381): col: 43 Warning: parameter ‘xml’ has no type declaration.
…\Loader.as(403): col: 42 Warning: parameter ‘xml’ has no type declaration.
In functions ‘public function decodeBody(xml:XML, images:Array):b2Body’ I have not found need in parameter ‘images:Array’.