Saturday, August 15, 2009

Creating a game with APE - APEOut - Part 1

Following up on my introductory blog post on APE, Today we are going to create a simple Breakout clone with APE. I'm going to call this APEOut having just 1 level. I'll split this tutorial into 3 parts. In the first part, we'll create a bat, ball and the boundaries. In the second part, we'll create the bricks and add movement for the bat. In the third part, we'll add collision detection and scores.
So, lets get started.

package
{
import flash.display.Sprite;
import flash.events.Event;

import org.cove.ape.APEngine;
import org.cove.ape.Group;
import org.cove.ape.VectorForce;

/**
* APEOut - A Breakout clone using the ActionScript Physics Engine
* @author Pradeek
*/

[SWF(width = 600, height = 400)]
public class APEOut extends Sprite
{
private var group:Group;

public function APEOut():void
{
initAPE();
initObjects();
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

private function initAPE():void
{
APEngine.init();
APEngine.container = this;
APEngine.addForce(new VectorForce(false, 0, 4));
}

private function initObjects():void
{
group = new Group(true);
APEngine.addGroup(group);
}

private function onEnterFrame(e:Event):void
{
APEngine.step();
APEngine.paint();
}

}

}

The above code is similar to the one we wrote in the last post. Basically, we're setting up the engine, creating a group and updating and drawing on the ENTER_FRAME event. Next, we create the 3 boundaries - top, left and right and the bat and the ball. Create objects of the RectangleParticle class for topWall, leftWall , rightWall and bat and the CircleParticle class for the ball. Modify the initObjects method as follows :

private function initObjects():void
{
group = new Group(true);

leftWall = new RectangleParticle( -10, 0, 10, 1000, 0, true, 1, 0.3, 1);
rightWall = new RectangleParticle(610, 0, 10, 1000, 0, true, 1, 0.3, 1);
topWall = new RectangleParticle(0, -10, 1200, 10, 0, true, 1, 0.3, 1);

bat = new RectangleParticle(250, 325, 125, 10, 0, true, 1, 0.50, 1);
bat.setFill(0x0000FF);

ball = new CircleParticle(220, 225, 15, false, 1, 0.65, 1);
ball.setFill(0xFF0000);

group.addParticle(leftWall);
group.addParticle(rightWall);
group.addParticle(topWall);

group.addParticle(bat);

group.addParticle(ball);

APEngine.addGroup(group);
}


A little code explanation :
We position three rectangular blocks on the top, left and the right sides. Since they are walls, we're hiding them. We create a bat and a ball and position them appropriately.
Try to run this. You should see the ball bouncing on the bat. If you wait a bit, you'll see that it hits the top and bounces back.
The next step is creating the bricks and making the bat move. We'll do that in the next post. If you have any questions, please post it in the comments. Thanks for reading.

No comments:

Post a Comment