“Hundreds” Flash game prototype – Nape version

January 17, 2013 • Actionscript 3, Flash, Game design by Emanuele Feronato • 3 Comments

Today, something interesting for Nape users… I made the “Hundreds” Flash game prototype using Box2D with Nape, so you can decide what’s better.

It works the same way move the mouse over a circle and see…

… but the source code is different:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;
	import nape.geom.Vec2;
	import nape.phys.Body;
	import nape.phys.BodyList;
	import nape.phys.BodyType;
	import nape.shape.Polygon;
	import nape.shape.Circle;
	import nape.space.Space;
	import nape.util.ShapeDebug;
	import nape.shape.ShapeList;

	public class Main extends Sprite {
		private var napeWorld:Space=new Space(new Vec2(0,0));
		private var debug:ShapeDebug=new ShapeDebug(640,480,0x00ff00);
		private var napeDebugSprite:Sprite=new Sprite();
		private var circleSpeed:Number=150;
		public function Main():void {
			addChild(napeDebugSprite);
			napeDebugSprite.addChild(debug.display);
			for (var i:Number=1; i<=10; i++) {
				addCircle();
			}
			addWall(320,0,640,10);
			addWall(320,480,640,10);
			addWall(0,240,10,480);
			addWall(640,240,10,480);
			addEventListener(Event.ENTER_FRAME,update);
		}
		private function addCircle():void {
			var napeBody:Body=new Body(BodyType.DYNAMIC,new Vec2(Math.round(Math.random()*600+20),Math.round(Math.random()*440+20)));
			var circle:Circle=new Circle(10);
			circle.material.elasticity=0.5;
			circle.material.density=1;
			circle.material.staticFriction=0;
			napeBody.shapes.add(circle);
			napeBody.space=napeWorld;
			napeBody.userData.name="circle";
			var randomAngle:Number=Math.random()*2*Math.PI;
			napeBody.velocity=new Vec2(circleSpeed*Math.cos(randomAngle),circleSpeed*Math.sin(randomAngle));
		}
		private function addWall(pX:Number,pY:Number,w:Number,h:Number):void {
			var napeBody:Body=new Body(BodyType.STATIC,new Vec2(pX,pY));
			var polygon:Polygon=new Polygon(Polygon.box(w,h));
			polygon.material.elasticity=0.5;
			polygon.material.density=1;
			polygon.material.staticFriction=0;
			napeBody.shapes.add(polygon);
			napeBody.space=napeWorld;
		}
		private function update(e:Event):void {
			napeWorld.step(1/30,10,10);
			var bodies:BodyList=napeWorld.bodies;
			for (var i:int = 0; i < bodies.length; i++) {
				var body:Body=bodies.at(i);
				if (body.userData.name=="circle") {
					var velocity:Vec2=body.velocity;
					var speed:Number=velocity.length;
					var ratio:Number=circleSpeed/speed;
					body.velocity.muleq(ratio);
				}
			}
			bodies=napeWorld.bodiesUnderPoint(new Vec2(mouseX,mouseY));
			if (bodies.length>0) {
				for (i = 0; i < bodies.length; i++) {
					body=bodies.at(i);
					if (body.userData.name=="circle") {
						var shapes:ShapeList=body.shapes;
						var circle:Circle=shapes.at(i) as Circle;
						if(circle.radius<50){
							circle.radius++
							}
					}
				}
			}
			debug.clear();
			debug.draw(napeWorld);
			debug.flush();
		}
	}
}

package {

import flash.display.Sprite;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.events.KeyboardEvent;

import nape.geom.Vec2;

import nape.phys.Body;

import nape.phys.BodyList;

import nape.phys.BodyType;

import nape.shape.Polygon;

import nape.shape.Circle;

import nape.space.Space;

import nape.util.ShapeDebug;

import nape.shape.ShapeList;

public class Main extends Sprite {

private var napeWorld:Space=new Space(new Vec2(0,0));

private var debug:ShapeDebug=new ShapeDebug(640,480,0x00ff00);

private var napeDebugSprite:Sprite=new Sprite();

private var circleSpeed:Number=150;

public function Main():void {

addChild(napeDebugSprite);

napeDebugSprite.addChild(debug.display);

for (var i:Number=1; i<=10; i++) {

addCircle();

}

addWall(320,0,640,10);

addWall(320,480,640,10);

addWall(0,240,10,480);

addWall(640,240,10,480);

addEventListener(Event.ENTER_FRAME,update);

}

private function addCircle():void {

var napeBody:Body=new Body(BodyType.DYNAMIC,new Vec2(Math.round(Math.random()*600+20),Math.round(Math.random()*440+20)));

var circle:Circle=new Circle(10);

circle.material.elasticity=0.5;

circle.material.density=1;

circle.material.staticFriction=0;

napeBody.shapes.add(circle);

napeBody.space=napeWorld;

napeBody.userData.name="circle";

var randomAngle:Number=Math.random()*2*Math.PI;

napeBody.velocity=new Vec2(circleSpeed*Math.cos(randomAngle),circleSpeed*Math.sin(randomAngle));

}

private function addWall(pX:Number,pY:Number,w:Number,h:Number):void {

var napeBody:Body=new Body(BodyType.STATIC,new Vec2(pX,pY));

var polygon:Polygon=new Polygon(Polygon.box(w,h));

polygon.material.elasticity=0.5;

polygon.material.density=1;

polygon.material.staticFriction=0;

napeBody.shapes.add(polygon);

napeBody.space=napeWorld;

}

private function update(e:Event):void {

napeWorld.step(1/30,10,10);

var bodies:BodyList=napeWorld.bodies;

for (var i:int = 0; i < bodies.length; i++) {

var body:Body=bodies.at(i);

if (body.userData.name=="circle") {

var velocity:Vec2=body.velocity;

var speed:Number=velocity.length;

var ratio:Number=circleSpeed/speed;

body.velocity.muleq(ratio);

}

bodies=napeWorld.bodiesUnderPoint(new Vec2(mouseX,mouseY));

if (bodies.length>0) {

for (i = 0; i < bodies.length; i++) {

body=bodies.at(i);

if (body.userData.name=="circle") {

var shapes:ShapeList=body.shapes;

var circle:Circle=shapes.at(i) as Circle;

if(circle.radius<50){

circle.radius++

}

debug.clear();

debug.draw(napeWorld);

debug.flush();

}

Next time, something you won’t find easily around the web, Nape collision handling

Rate this post: 1 Star

(5 votes, average: 4.80 out of 5)

Loading ...

Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 3 comments

rreis

on January 18, 2013 at 2:40 pm

Hi Emanuele, how are you?

This is a great tutorial. I´ve just started studying Nape and really liked it.
Could I give you a suggestion for the next tutorial using Nape?
A prototype of a Pool Game. I really like Pool Games and I know other programmers would like to study it too.

Once more, thank you for sharing with us your knowledge.

Regards,
The Don

on January 21, 2013 at 4:27 pm

As a starter with Nape and Starling, this little Tut is top notch and much appreciated. Keep it going Emanuele.
Jack

on February 22, 2013 at 8:27 am

Great tutorial.

I thinks code “var circle:Circle=shapes.at(i) as Circle;” should be

“var circle:Circle=shapes.at(0) as Circle;”

Emanuele Feronato

italian geek and PROgrammer

“Hundreds” Flash game prototype – Nape version

This post has 3 comments

rreis

The Don

Jack