Prerequisites:
- Use a current version of PushButton Engine.
- A properly initialized scene (see PBE Series: initializing your scene via ActionScript on how to setup it up)
Today I want to cover how to create spatial positioned objects with PushButton Engine via ActionScript.
With the current build, you got two possibilities:
- create a SimpleSpatialComponent or
- create a Box2DSpatialComponent.
Remark: if you want to display graphics only (meaning without a spatial component), it’s also possible to position them directly. See PBE Series: quickly displaying sprites via ActionScript for more information about that!
So what’s the difference between those two? In short, Simple-SpatialComponent is not driven by a physics engine. Box2D-SpatialComponent is, as the name might let one guess, bound to Box2D. If your SpatialManager is a Box2D-ManagerComponent (again, see PBE Series: initializing your scene via ActionScript how to setup your scene), you can easily work with both types of objects in your scene, but remember that a Simple-SpatialComponent cannot collide with a Box2D-SpatialComponent. So for everything which needs physical interaction, you want to use Box2D-SpatialComponent.
Anyway, not every game needs physics, so let’s start with the SimpleSpatialComponent:
//Create a new entity: var myEntity:IEntity = PBE.allocateEntity(); myEntity.initialize("MyEntity"); //Create our spatial component var spatialComp:SimpleSpatialComponent = new SimpleSpatialComponent(); spatialComp.spatialManager = PBE.getSpatialManager(); spatialComp.objectMask = new ObjectType("Renderable"); spatialComp.position = new Point(0, 0); spatialComp.size = new Point(256,64); //Add the component to the entity: myEntity.addComponent( spatialComp, "Spatial" ); //Since we want to visualize the entity, we need a simple sprite renderer: var renderComp:SpriteRenderer = new SpriteRenderer(); renderComp.scene = PBE.getScene(); renderComp.fileName = "../assets/Images/platform.png"; //Bind render component position and rotation to spatial component: renderComp.positionProperty = new PropertyReference("@Spatial.position"); renderComp.rotationProperty = new PropertyReference("@Spatial.rotation"); //Add the component to the entity: myEntity.addComponent( renderComp, "Render" );
The most important thing to note, is that the render component’s position and rotation properties are bound to the spatial component.
Now to the Box2DSpatialComponent:
//Create a new entity: var myEntity:IEntity = PBE.allocateEntity(); myEntity.initialize("MyEntity"); //Create our spatial component / body: var spatialComp:Box2DSpatialComponent = new Box2DSpatialComponent(); spatialComp.manager = (PBE.getSpatialManager() as Box2DManagerComponent); spatialComp.position = new Point(0, 0); spatialComp.size = new Point(50, 50); spatialComp.collisionType = new ObjectType("Something"); spatialComp.collidesWithTypes = new ObjectType("Something", "SomethingDifferent"); //We also need a collision shape, which collides with the world (meaning other shapes): var shape:CircleCollisionShape = new CircleCollisionShape(); shape.radius = 1.0; shape.density = 20; //Now we add the shape to the spatial component / body: spatialComp.collisionShapes = new Array(); spatialComp.collisionShapes.push(shape); spatialComp.buildCollisionShapes(); //don't forget to build the collision shapes! //Add the component to the entity: myEntity.addComponent( spatialComp, "Spatial" ); //Since we want to visualize the entity, we need a simple sprite renderer: var renderComp:SpriteRenderer = new SpriteRenderer(); renderComp.scene = PBE.getScene(); renderComp.fileName = "../assets/Images/platform.png"; renderComp.positionProperty = new PropertyReference("@Spatial.position"); renderComp.rotationProperty = new PropertyReference("@Spatial.rotation"); //Add the component to the entity: myEntity.addComponent( renderComp, "Render" );
I think the code is pretty self-explanatory. The basic work flow is to first create a body (spatial component), then some collision shapes, add those shapes to your body and then build the collision shapes. This is just a start, feel free to play around with all the properties and see how they affect the body’s behaviour!
Really great, thanks