It’s a Box2D library designed to allow game developers making 2D side-scrolling platform games, including a graphical level builder that allows you to drag, drop, and customize all of the game objects and art in your game.

These are the main features, as they appear on the official site:

• Blazing 50 FPS in the browser on current machines, and 250+ FPS on the desktop (or Adobe AIR).
• Physics-based engine allows for tumbling crates, pulleys, vehicles, and just about anything else you can imagine, without the limitations of a grid.
• The Level Architect visual level editor makes it easier to create level blueprints, then tweak your level to your heart’s desire.
• Robust documentation includes and ASDoc API, tutorial videos, and a developer-friendly manual.
• Standards-based code API means developers and designers spend more time tweaking the fun stuff, and less time debugging.
• Level-based progressive downloading allows gamers to start playing the game quicker by only downloading what the next level needs.
• Pre-made commonly used objects, like a hero, coins, enemy, moving platforms, and more!
• Object spawning management
• Graphics rendering system that gives your animators and artists flexibility
• Sound management
• Keyboard and input management
• Intuitive events framework

That’s really a lot of features…

You can have it for free

Citrus Engine is now free for educational users. This means students, educators, and hobbiest wont’a pay for it.

You can STILL have it for free…

If you are looking to use the engine in commercial projects, you can still have it for free… just tweet about it before April 15th 2010 and you can win one commercial license or a $0.25 discount per follower.

I am testing the engine right now, so expect some tutorial very soon.

For some developers this dream could become true because MochiMedia created the Mochi GAME Developer Fund: a $10 million fund that will help promising Flash and social game developers support their games through sponsorship, licensing and publishing deals.

The fund will assist small Flash game development studios and independent game developers worldwide in building world-class games and businesses.

You will find the details in the official page, with some FAQs. Here’s the four more interesting:

Q: What is the Mochi GAME Developer Fund?
A: The Mochi GAME Developer Fund $10 million USD fund for investing in promising Flash and social game developers through sponsorship, licensing, and publishing. The goal of the Fund is to assist developers in launching and building rockstar premium games on the Mochi platform, and to cultivate long term relationships with Flash and social game developers looking to build world-class games and businesses.

Q: What is the target deal size for the Mochi GAME Developer Fund?
A: The Mochi GAME Developer Fund intends to partner with Flash and social game developers on a sponsorship, licensing or publishing basis anywhere from $1,000 to $100,000. Additional consideration may be given to other types of relationships on a case-by-case basis. Generally, the funds will be given upon the achievement of certain milestones of the game development process. The specific milestones can be discussed with the Mochi GAME Developer Fund team.

Q: What types of games is the Mochi GAME Developer Fund seeking?
A: We are open to Flash and social games of all genres and gameplay types targeting all kinds of audiences. Particular attention will be given to games that have high potential to monetize via MochiCoins microtransactions, include social elements that may be enhanced via MochiSocial or are particularly great games.

Q: I don’t live in the United States. Can I still work with the Mochi GAME Developer Fund?
A: Absolutely! Flash and social game developers are located all across the world. We care less about where you live and care more about helping you build great games using the Mochi platform.

According to these FAQs, it looks like an exclusive sponsorship, but I hope to give you more information as I’m running to submit the form and ask for some millions for my next game.

FOG is looking for any game, no matter how old it is or how wide spread it is already, as long as it’s a decent game. In this case FOG will buy you a site locked version of your game, or even the .fla source code.

What happens when FOG buys a site locked version of your game

* The game is sitelocked to FOG
* You have to interface your game with their API
* You have to remove all external branding and ads

What happens when FOG buys the source code of your game

* FOG retains the rights to re-release, resell, re-use, delete, make more version and all in all everything with your code
* All branding, ads and credits will be removed

Note: if your game is already sponsored, you may no longer have the right to sell your source code. Check with your sponsor as FOG is not responsible for your previous deals

My experience

I am currently managing the latest small details about BarBalance. I’m selling the source code. Working with Neil is a pleasure as he’s very kind, professional and will support you through the entire process. Just consider FOG’s HQ is located in United Kingdom when your plan to chat with him.

His email, as well as his Skype, Messenger, ICQ, Yahoo and GTalk ids is Neil[at]FOG[dot]COM

I asked him a couple of questions just to give you as much information as possible

Are you really buying ANY kind of game .flas?

I primarily buy site locks of games, however if the source is available then we do try and purchase that too. I’m not out to purchase things left right and centre, all the games that are offered we review meticulously to see if it meets our standards, and at the moment, the majority of submissions are being rejected.

What’s the meaning of buying source codes? Don’t you think in most cases the sources would be hard to understand (i.e variable names in foreign languages, no optimization and so on…)

Sources in other languages aren’t too much of a concern as we have a multilingual staff base here at fog, if the code is not optimised then our in house programmer will go over it and see what can be done

Do you already have an example of a bought and republished game?

We have plenty of site locked games on our site. for games that we have bought source codes of and redone as fog games, and our own developed games can be seen at www.freegamesforyourwebsite.com

a few examples of site locks are

Pizza Pronto
Tank In Action
Mountain Rescue Driver
Perfect Balance 2

How much can a developer earn from FOG?

Generally prices range from $100-$500 for site locks, source code can be anything from $100-$1000 or more depending on the quality… I don’t feel that there is a limit on what a developer can earn for a
decent game, if it is really that good and someone wants it they’ll lay the money on the table to get it.

Hope this will help you to further monetize your games.

** edit **

BarBalance source code sold :)

This process will involve some interesting Box2D features, like sensors and custom collision management.

I would suggest to read the basics of sensors at Erase Box: the tutorial and custom collision management at Creation of a Flash Stabilize! clone using Box2D – part 4.

Although they are both referred to an older Box2D version, they’ll introduce you to sensor and collisions.

Now the concept is simple: we are placing some circular sensors around the stage (the coins), then we’ll create a custom contact listener class to check whether the player is over a coin or not. If it’s over, we’ll remove the coin.

So this is the main script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class ball02 extends Sprite {
		// world creation
		public var world:b2World=new b2World(new b2Vec2(0,10.0),true);
		public var world_scale:int=30;
		// the player
		public var player:b2Body;
		// force to apply to the player
		public var force:b2Vec2;
		// variables to store whether the keys are pressed or not
		// true = pressed;
		// false = unpressed
		public var left,right,up,down:Boolean=false;
		// declaring my custom contact listener class
		public var contact_listener=new custom_contact_listener();
		public function ball02():void {
			// assigning the contact listener to the world
			world.SetContactListener(contact_listener);
			// calling debug draw function
			debug_draw();
			// drawing the boundaries
			draw_box(250,400,500,10,false,"ground");
			draw_box(0,200,10,400,false,"left");
			draw_box(500,200,10,400,false,"right");
			draw_box(250,0,500,10,false,"roof");
			// adding the player at 250,200
			add_player(250,200);
			// adding some coins
			for (var i:int = 1; i<=5; i++) {
				draw_coin(Math.random()*400+50,Math.random()*300+50,Math.random()*3+2);
			}
			// listeners needed for the game to work
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(KeyboardEvent.KEY_DOWN,on_key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP,on_key_up);
		}
		// according to the key pressed, set the proper variable to "true"
		public function on_key_down(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 37 :
					left=true;
					break;
				case 38 :
					up=true;
					break;
				case 39 :
					right=true;
					break;
				case 40 :
					down=true;
					break;
			}
		}
		// according to the key released, set the proper variable to "false"
		public function on_key_up(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 37 :
					left=false;
					break;
				case 38 :
					up=false;
					break;
				case 39 :
					right=false;
					break;
				case 40 :
					down=false;
					break;
			}
		}
		// function to draw a coin
		public function draw_coin(px,py,r):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			var my_circle:b2CircleShape=new b2CircleShape(r/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_circle;
			// look! it's a sensor!!
			my_fixture.isSensor=true;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.CreateFixture(my_fixture);
		}
		// simple function to draw a box
		public function draw_box(px,py,w,h,d,ud):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			if (d) {
				my_body.type=b2Body.b2_dynamicBody;
			}
			var my_box:b2PolygonShape = new b2PolygonShape();
			my_box.SetAsBox(w/2/world_scale, h/2/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_box;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.SetUserData(ud);
			world_body.CreateFixture(my_fixture);
		}
		// function to add the player
		public function add_player(px,py):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			my_body.type=b2Body.b2_dynamicBody;
			var my_circle:b2CircleShape=new b2CircleShape(10/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_circle;
			player=world.CreateBody(my_body);
			player.CreateFixture(my_fixture);
		}
		// debug draw
		public function debug_draw():void {
			var debug_draw:b2DebugDraw = new b2DebugDraw();
			var debug_sprite:Sprite = new Sprite();
			addChild(debug_sprite);
			debug_draw.SetSprite(debug_sprite);
			debug_draw.SetDrawScale(world_scale);
			debug_draw.SetFlags(b2DebugDraw.e_shapeBit);
			world.SetDebugDraw(debug_draw);
		}
		// function to be executed at every frame
		public function update(e:Event):void {
			// setting the force to null
			force=new b2Vec2(0,0);
			// according to the key(s) pressed, add the proper vector force
			if (left) {
				force.Add(new b2Vec2(-10,0));
			}
			if (right) {
				force.Add(new b2Vec2(10,0));
			}
			if (up) {
				force.Add(new b2Vec2(0,-20));
			}
			if (down) {
				force.Add(new b2Vec2(0,5));
			}
			// if there is any force, then apply it
			if (force.x||force.y) {
				player.ApplyForce(force,player.GetWorldCenter());
			}
			world.Step(1/30,10,10);
			world.ClearForces();
			// scanning through all bodies
			for (var worldbody:b2Body = world.GetBodyList(); worldbody; worldbody = worldbody.GetNext()) {
				// if a body is marked as "remove"...
				if (worldbody.GetUserData()=="remove") {
					// ... just remove it!!
					world.DestroyBody(worldbody);
				}
			}
			world.DrawDebugData();
		}
	}
}

Let’s see the interesting lines:

Line 22: declaring my contact_listener variable, as custom_contact_listener type

Line 25: assigning my custom contact listener class to Box2D world

Lines 36-38: calling five times the draw_coin function passing three parameters: x position, y position and radius.

Lines 79-89: the draw_coin function… just a basic function that draw a circle… just notice at line 86 how I am declaring the circle as a sensor. This way the circle exists in the world but won’t physically collide with anything. Also, a sensor should be a static body, or it will fall down outside the stage as it won’t collide with anything.

Lines 150-156: scanning through all bodies to find, and eventually remove, bodies marked with remove. Such marker is handled by the custom contact listener class, located in the custom_contact_listener.as file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

package {
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Dynamics.Joints.*;
	import Box2D.Dynamics.Contacts.*;
	import Box2D.Common.*;
	import Box2D.Common.Math.*;
	class custom_contact_listener extends b2ContactListener {
		override public function BeginContact(contact:b2Contact):void {
			// getting the fixtures that collided
			var fixtureA:b2Fixture=contact.GetFixtureA();
			var fixtureB:b2Fixture=contact.GetFixtureB();
			// if the fixture is a sensor, mark the parent body to be removed
			if (fixtureB.IsSensor()) {
				fixtureB.GetBody().SetUserData("remove");
			}
			if (fixtureA.IsSensor()) {
				fixtureA.GetBody().SetUserData("remove");
			}
		}
	}
}

BeginContact function will give us the fixtures involved in the collision. Then at lines 15-17 and 18-20 I am checking if the fixture is a sensor, then eventually mark its parent body to be removed.

Important: don’t try to remove the body inside this function, because bodies have a locked status while they are in the middle of a timestep, so you should remove a body only after you performed the Step (line 147 of the main file). This gave me a little headache, so you’ve been warned!

This is the result:

Pick up all little circles moving the player tapping on arrow keys.

Download the source code.

As you should know, isometric projection is a method of visually representing three-dimensional objects in two dimensions, in which the three coordinate axes appear equally foreshortened and the angles between any two of them are 120 degrees. A great way to represent 3D worlds on old 8-bit computers since their CPUs did not handle a real 3D world, and a great way to create casual adventure games nowadays.

I am showing you a list of 11 Flash isometric engines, some of them are free, others are commercial, and some still unreleased. I am writing to all authors to have more info about their engines, meanwhile this the most complete list I was able to make.

Engines are listed in alphabetical order.

2D isometric engine – Free

http://code.google.com/p/2d-isometric-engine/

Open source, multilevel and multiplayer tilebased isometric engine, reviewed in this post

as3isolib – Free

http://as3isolib.wordpress.com/

As3isolib is an open-source ActionScript 3.0 Isometric Library developed to assist in creating isometrically projected content (such as games and graphics) targeted for the Flash player platform. As3isolib includes utilities, primitives and views. As3isolib was developed with simplicity, speed and performance in mind so that developers can focus on actual implementations rather than having to learn a complex API.

You can see latest project using this engine at http://apps.facebook.com/downtowngame/

FFilmation – Free

http://www.ffilmation.org/

The FFilmation Engine is an AS3 isometric programing engine, focused mainly on game development. The aim of the project is providing a robust development platform, where game designers can work on the game’s details and forget about the render engine. It is intended to be really usable from a “real production scenario” point of view.

See a demo playing My Name is Poncho

Flash 3D Isometric Game Engine – Unreleased

http://actionscripter.co.uk/blog/?page_id=76

Vector isometric engine allowing to zoom, rotate and pan the environment in a “real” 3D world. I’m asking the author more information, stay tuned

isoengineas3 – Free

http://isoengineas3.sourceforge.net/

2D Isometric Engine project build with Flash AS3. It is an open source, multilevel and multiplayer tilebased isometric engine. No more information.

Isometric Game Engine – Unreleased

http://www.davidworks.com/?id=int_iso

An isometric engine built from scratch for an online virtual campus. No more info.

The demo is quite interesting so I am going to contact the author for more information.

Isometric terrain engine – Free

http://yaief.wordpress.com/2008/12/05/isometric-terrain-engine/

This is an isometric terrain generator, actually an abandoned project but still an inspiration.

OpenSpace – Commercial – Trial version available

http://www.openspace-engine.com/

OpenSpace is a powerful Flash based isometric engine and framework for rapid development of multi-user virtual worlds and MMO communities.

Check Football Village to see it in action.

OpenSpace is licensed on a “per-seat” basis: a separate license is required for each user working with OpenSpace.

Sean Cooper Isometric Engine – Commercial

http://www.games.seantcooper.com/IsometricEngine.aspx

Made by Sean “BoxHead” Cooper, the engine is based on some techniques used in the PC game Syndicate, which he wrote in 1993. The technique is simple and extremely fast, well suited to Flash and will run fast on most machines.

At the moment there isn’t any project showcase, just a demo in the official page, and no info about the license, but being developed by a PROgrammer like Sean makes this engine quite interesting.

TheoWorlds – Commercial

http://www.theoworlds.com/products.php

TheoWorlds Builder SDK v2 is a kit that will help you develop online virtual worlds much faster, without starting from scratch. At its core it contains the original Theo Isometric Engine™ that lets you create pseudo-3D maps, place on them objects and characters, and organize the interaction between them.

You can test the engine playing Treasure Hunter

TheoWorlds Builder SDK v2 is priced $3,200, while the light SDK v1 $799

T.I.L.E. (Tangerine Isometric Level Editor) – Commercial

http://www.tangerinepop.com/ then click on “tech”

According to the site, T.I.L.E. provides the ability to rapidly build a standard lock & key adventure game with hundreds of rooms. It also provides the primary software framework needed to build a quality MMO with numerous maps and new play modes via in increasing list of new game mechanics.

An example of a game developed with this technology is GraveShift

Prices range from (as said on the site) “half to less than half the costs of building it yourself”

Now he is explaining us a new way to monetize Flash games: GamesChart

« When I first saw the announcement on Flash Game Developers group on www.linkedIn.com about the GamesChart beta program I immediately thought to participate. It was a surprise to me to find that my game Haunted House was at first position for the entire 4 weeks of the beta program!

Actually also my Alice Memory game is also on the chart, even if never more than in the 6th position.

What GamesChart is about?

It’s another way to generate money from you Flash games. The nice thing is that it is not an alternative to the traditional banner you place during the loading of the game. But it goes together.
The main idea is to have publisher to “bid” for which game will be in the chart and this will generate extra revenue to the developer, to the publisher who correctly bid and of course to the GamesChart organization.

This is from Barry White directly from linkedIn group.

I thought I’d include some more information about how GamesChart can earn developers money:

+ Every game that has the GamesChart API embedded in it is tracked by GamesChart.

+ The developer can also choose to enable or disable a series of dynamic charts that actually display within the Flash game itself.

+ The most popular games each week make their way to the top of the charts.

+ Any gamers who click on a game listed in these charts is taken to play that game on another portal.

+ Publishers use an advanced pay per click bidding system to purchase this traffic and drive users back to their own sites to play the games they have bid on.

+ Games need to be uploaded to the Publishers portal before they can receive traffic. (great for seeding)

+ Developers receive up to a 50% revenue share of any outbound clicks generated from within their game should they choose to display the charts. (also full blacklisting available)

+ Publishers also receive 10% of total revenues generated from any GamesChart enabled games featured on their site.

I am going to explain the very easy steps to follow to have a game added to this GamesChart.

In order to do so I am going to provide my other game Tokyo Train with this service as well.

First thing you need to register as developer, if you don’t already. This is quite easy to do, just follow instruction on the site.

You then are prompted to add a game:

So do not hesitate: go to click the button and create the new game:

Instructions are easy and nice to follow: I have to admit they did a very good job on make your job easy.

You are now prompted with the game id that you need to put on the component property to have your game identified.
Of course first of all you need to download the API library from the “GamesChart Wiki” link.

You have the choice to get the component for Adobe Flash IDE or the complete API if you use FlashDevelop and for both choices you can choose between AS3 and AS2. My choice was for the component and AS3.

The very first time you download the zip pack, you need to double click on the GamesChartAPI-AS3.mpx:

This will install the component, and that’s the only thing you really need to install: brilliant.

Now open your FLA and browse for the components (Windows > Components menu): you will find the GamesChartAPI one.

Now, again it’s easy: drag and drop the component onto the stage (better if at the top layer):

Do not worry about the position: it will be hidden once the game starts. Do you remember the game id? Go to grab it and paste it in the component inspector:

That’s all! You can now publish the game: you will notice a small G icon on top right of the stage.

You can force to have this cute icon can be hidden or display when you want. Or you can also move it.

I would suggest you to leave it for the entire game and in that position: it’s the best position, just adjust your buttons if you have any conflict.

In this way a player can click on the icon anytime during the game. This will let him vote your game and show chart. In fact when the icon is clicked the chart will appear and will let you open a new window with the games on the list.

You need one more thing: to publish the game. You can get your SWF file or you can first upload on MochiAds with version control as I am doing. This is the best solution because your game will be updated all over the world with the cute G icon.
That’s all!
Enjoy!

PS.: I just discovered that Haunted House is no more on first position! So let’s go there and click the cute “G” icon!! »

It was the first of a series to create a game like jmtb’s ball games. It was an old AS2 series, and some steps have been ported in AS3 with Create a Flash ball game using AS3.

The “ball” game is so simple yet addictive and customizable that I think it’s the perfect game to start a tutorial series based on a new language.

This time I am not covering a new language but the famous Box2D library, but I am going to add all necessary features to make it an interesting game to play.

In this first chapter, I am going to create the ball and the way you control it, by tapping arrow keys.

I am using the basics of Understanding Box2D applicable forces and Box2D tutorial for the absolute beginners – revamped, which I recommend you to read.

Now this is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class ball01 extends Sprite {
		// world creation
		public var world:b2World=new b2World(new b2Vec2(0,10.0),true);
		public var world_scale:int=30;
		// the player
		public var player:b2Body;
		// force to apply to the player
		public var force:b2Vec2;
		// variables to store whether the keys are pressed or not
		// true = pressed;
		// false = unpressed
		public var left,right,up,down:Boolean=false;
		public function ball01():void {
			// calling thebug draw function
			debug_draw();
			// drawing the boundaries
			draw_box(250,400,500,10,false,"ground");
			draw_box(0,200,10,400,false,"left");
			draw_box(500,200,10,400,false,"right");
			draw_box(250,0,500,10,false,"roof");
			// adding the player at 250,200
			// some listeners
			add_player(250,200);
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(KeyboardEvent.KEY_DOWN,on_key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP,on_key_up);
		}
		// according to the key pressed, set the proper variable to "true"
		public function on_key_down(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 37 :
					left=true;
					break;
				case 38 :
					up=true;
					break;
				case 39 :
					right=true;
					break;
				case 40 :
					down=true;
					break;
			}
		}
		// according to the key released, set the proper variable to "false"
		public function on_key_up(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 37 :
					left=false;
					break;
				case 38 :
					up=false;
					break;
				case 39 :
					right=false;
					break;
				case 40 :
					down=false;
					break;
			}
		}
		// simple function to draw a box
		public function draw_box(px,py,w,h,d,ud):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			if (d) {
				my_body.type=b2Body.b2_dynamicBody;
			}
			var my_box:b2PolygonShape = new b2PolygonShape();
			my_box.SetAsBox(w/2/world_scale, h/2/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_box;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.SetUserData(ud);
			world_body.CreateFixture(my_fixture);
		}
		// function to add the player
		public function add_player(px,py):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			my_body.type=b2Body.b2_dynamicBody;
			var my_circle:b2CircleShape=new b2CircleShape(10/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_circle;
			player=world.CreateBody(my_body);
			player.CreateFixture(my_fixture);
		}
		// debug draw
		public function debug_draw():void {
			var debug_draw:b2DebugDraw = new b2DebugDraw();
			var debug_sprite:Sprite = new Sprite();
			addChild(debug_sprite);
			debug_draw.SetSprite(debug_sprite);
			debug_draw.SetDrawScale(world_scale);
			debug_draw.SetFlags(b2DebugDraw.e_shapeBit);
			world.SetDebugDraw(debug_draw);
		}
		// functiojn to be executed at every frame
		public function update(e:Event):void {
			// setting the force to null
			force=new b2Vec2(0,0);
			// according to the key(s) pressed, add the proper vector force
			if (left) {
				force.Add(new b2Vec2(-10,0));
			}
			if (right) {
				force.Add(new b2Vec2(10,0));
			}
			if (up) {
				force.Add(new b2Vec2(0,-20));
			}
			if (down) {
				force.Add(new b2Vec2(0,5));
			}
			// if there is any force, then apply it
			if (force.x||force.y) {
				player.ApplyForce(force,player.GetWorldCenter());
			}
			world.Step(1/30,10,10);
			world.ClearForces();
			world.DrawDebugData();
		}
	}
}

As you can see, I did not change that much from Understanding Box2D applicable forces and Box2D tutorial for the absolute beginners – revamped.

draw_circle function at lines 19-30 in Box2D tutorial for the absolute beginners – revamped now is called add_player (lines 86-95) and places a circle in the (px,py) coordinates.

The body is named player and is declared in the class at line 14, then is used at line 125 to have the force applied with ApplyForce explained at Understanding Box2D applicable forces.

Notice how different forces are applied according to the arrow key pressed… playing with these values will change the gameplay… which values would you use?

This is the result:

Tap arrow keys to move the ball.

Download the source code.

Well, I have to say I didn’t use Box2d, but another library called Collision Detection Kit.

I’ll publish some tutorial about it once I’ll complete the game, but it’s not the point of today’s post.

A reader from Argentina, Adolfo Chacon, sent me an AS3 basic engine to do the same thing (maybe even better) using the concepts I explained soooooo long ago in the Create a flash draw game like Line Rider or others series.

It’s a basic, uncommented script because it’s just a prototype… basically Adolfo took my old script, adjusted trigonometry and did the magic dividing the simulation in steps to manage slower speeds.

I resized it, changed variable names (translating from spanish) and some operators since the auto format option gave me errors when trying to format a<-b, forcing me to change into a<b*-1.

Now enjoy the script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	public class pixel_engine extends Sprite {
		public var ball_radius:int;
		public var precision:int=120;
		public var degrees_to_radians:Number=0.0174532925;
		public var x_speed:Number=0;
		public var y_speed:Number=0;
		public var friction:Number=0.9;
		public var max_speed:int=15;
		public var gravity:Number=0.98;
		public var steps=2;
		public var ball:ball_mc = new ball_mc();
		public var terrain:terrain_mc = new terrain_mc();
		public function pixel_engine():void {
			addChild(ball);
			ball.x=250;
			ball_radius=ball.width/2;
			addChild(terrain);
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, reverse_gravity);
		}
		private function reverse_gravity(event:MouseEvent):void {
			gravity*=-1;
		}
		public function update(e : Event):void {
			if (ball.y>400) {
				ball.y-=400;
			}
			if (ball.y<0) {
				ball.y+=400;
			}
			for (var j:int = 1; j<=steps; j++) {
				var number_of_collisions:int=0;
				var sum_x_collision:Number=0;
				var sum_y_collision:Number=0;
				if (x_speed>max_speed) {
					x_speed=max_speed;
				} else {
					if (x_speed<max_speed*-1) {
						x_speed=- max_speed;
					}
				}
				if (y_speed>max_speed) {
					y_speed=max_speed;
				} else {
					if (y_speed<max_speed*-1) {
						y_speed=- max_speed;
					}
				}
				ball.x=ball.x+x_speed/steps;
				ball.y=ball.y+y_speed/steps;
				y_speed=y_speed+gravity/steps;
				for (var i:int=1; i<=precision; i++) {
					var x_test:Number=ball.x+ball_radius*Math.sin(i*360/precision*degrees_to_radians);
					var y_test:Number=ball.y-ball_radius*Math.cos(i*360/precision*degrees_to_radians);
					if (terrain.hitTestPoint(x_test,y_test,true)) {
						number_of_collisions++;
						sum_x_collision=sum_x_collision+x_test;
						sum_y_collision=sum_y_collision+y_test;
					}
				}
				var average_x:Number=sum_x_collision/number_of_collisions;
				var average_y:Number=sum_y_collision/number_of_collisions;
				if (number_of_collisions>0) {
					var collision_angle:Number=Math.atan2(ball.x-average_x,ball.y-average_y)/degrees_to_radians*-1+90;
					var collision_x:Number = ball.x - ball_radius * Math.sin((collision_angle + 90) * degrees_to_radians);
					var collision_y:Number = ball.y + ball_radius * Math.cos((collision_angle + 90) * degrees_to_radians);
					var delta_x:Number = (collision_x - ball.x) / ball_radius * -1;
					var delta_y:Number = (collision_y - ball.y) / ball_radius * -1;
					var speed:Number=Math.sqrt(x_speed*x_speed+y_speed*y_speed)*friction;
					var bounce:Number=Math.atan2(x_speed,y_speed)/degrees_to_radians*-1;
					var ricochet:Number=2*collision_angle-bounce-180;
					x_speed=Math.sin(ricochet*degrees_to_radians)*speed;
					y_speed=- Math.cos(ricochet*degrees_to_radians)*speed;
					while (terrain.hitTestPoint(collision_x, collision_y,true)) {
						ball.x=ball.x+delta_x;
						ball.y=ball.y+delta_y;
						collision_x=ball.x-delta_x*ball_radius;
						collision_y=ball.y-delta_y*ball_radius;
					}
				}
			}
		}
	}
}

And play with the result… just watch the simulation and press left mouse button to reverse gravity.

Download the source code. Who said draw games are dead?

It’s a draw game, a classic in which you must draw a line to make a ball reach the goal, but with some twists, such as the ability to control ball’s speed with arrow keys, red zones that will kill your ball if it touches the lines you drew, 42 levels some of them with moving environment, and so on.

The engine is almost complete, and at the moment I am working on level design, then I’ll retouch the graphics and polish some details, and it will be completed.

As you can see, I am keeping the menu very simple, with only two buttons, and some space for the sponsors. In the level selection screen, there is also a lot of space for sponsor logos.

The only thing I still have to decide is how to save level progression… I don’t know if I should use a Mochi account, or simply save it as a shared object, or using Mochi Coins to unlock some levels, or allowing to play some levels only on the official site…

The game will be completed in about a week, if there is anyone interested in sponsoring it, I am open to any deal since I am still working on the game… just drop me a mail at info[at]emanueleferonato[dot]com.

As said, it’s not that new, there isn’t any documentation or tutorial or even a feature list.

So, you may wonder why should I write about it, considering it’s a bitmap-based framework just like Flixel, which has a better documentation.

Well, the main reason is the blog is mine :) … the second reason is PixelBlitz supports the Flash IDE, and this means you can use the library with Flash, while Flixel only supports Adobe Flex Builder or FlashDevelop.

In the downloadable package you can find at Google Code you can find some examples but they are incomplete… you will only find the .as files, without the .fla.

So I took the most promising example (in my opinion) and created a complete project, with the .fla file and all needed objects (well, just one object, but it’s everything you need to make it work).

This is the script, let the comments guide you through the entire process.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

package {
 
	import flash.display.Sprite;
	import flash.geom.Point;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import com.normsoule.pixelblitz.core.Renderer2D;
	import com.normsoule.pixelblitz.effects.TrailsEffect;
	import com.normsoule.pixelblitz.elements.PixelSprite;
	import com.normsoule.pixelblitz.layers.RenderLayer;
 
	/**
	 * This example bounces 20 PixelSprites around the stage. Click on a PixelSprite and it will be removed.
	 *
	 * This demonstrates several of the basic ingredients in using the PixelBlitz engine: 
	 *
	 *create the main renderer, 
	 *create a renderLayer and add it to the renderer,
	 *create some PixelSprites and add them to the renderLayer,
	 *create and apply an effect to a layer,
	 *check mouse interaction using the getCollisionPoint method
	 *properly remove PixelSprites and make them available for garbage collection
	 * and lastly call the renderer.render() method to render the PixelClips to the screen
	 */ 
 
	public class pixelblitz extends Sprite {
		private const stageWidth:int = stage.stageWidth;
		private const stageHeight:int = stage.stageHeight;
		// main renderer
		private var renderer:Renderer2D=new Renderer2D(stageWidth,stageHeight);
		// renderLayer to hold the PixelClips
		private var layer:RenderLayer = new RenderLayer();
		// array to hold a reference to all of the PixelClips
		private var holder:Array = [];
		public function pixelblitz() {
			for (var i:int = 0; i < 20; i++) {
				// create 20 pixelClips
				spawn();
			}
			// add the layer to the renderer
			renderer.addLayer( layer );
			layer.effect = new TrailsEffect();
			stage.addEventListener( Event.ENTER_FRAME, update );
			stage.addEventListener( MouseEvent.MOUSE_DOWN, mouseHandler );
			addChild( renderer );
		}
		private function spawn():void {
			// create a new PixelSprite with the library linked symbol BoxHead
			var ps:PixelSprite = new PixelSprite( new BoxHead() );
			// center on the x axis
			ps.x=stageWidth/2;
			// center on the y axis
			ps.y=stageHeight/2;
			// assign a random x velocity
			ps.vx=Math.random()*12-6;
			// assign a random y velocity
			ps.vy=Math.random()*12-6;
			// add the PixelSprite to the layer
			layer.addItem( ps );
			// store a reference to the PixelSprite in the holder array
			holder.push( ps );
		}
		private function mouseHandler( event:MouseEvent ):void {
			// loop backwards through the holder array to check the top-most clips first
			for (var i:int = holder.length - 1; i > -1; i--) {
				// reference to each PixelSprite
				var ps:PixelSprite=holder[i];
				// check if the current mouse position is within a PixelSprite
				if (ps.getCollisionPoint(new Point(stage.mouseX,stage.mouseY))) {
					// remove the pixelSprite and clear internal data
					ps.dispose();
					// destroy the reference to the PixelSprite to make it available for garbage collection
					holder.splice( i, 1 );
					// break out of the loop to avoid removing more than one per click
					break;
				}
			}
		}
		private function update( event:Event ):void {
			for (var i:int = 0; i < holder.length; i++) {
				// grab a reference to each PixelSprite
				var ps:PixelSprite=holder[i];
				// bounce off of the walls
				if (ps.x+ps.width>stageWidth) {
					ps.x=stageWidth-ps.width;
					ps.vx=- ps.vx;
				} else if ( ps.x < 0 ) {
					ps.x=0;
					ps.vx=- ps.vx;
				}
				if (ps.y+ps.height>stageHeight) {
					ps.y=stageHeight-ps.height;
					ps.vy=- ps.vy;
				} else if ( ps.y < 0 ) {
					ps.y=0;
					ps.vy=- ps.vy;
				}
				// move on the x axis
				ps.x+=ps.vx;
				// move on the y axis
				ps.y+=ps.vy;
			}
			// render everything
			renderer.render();
		}
	}
}

And this is the result:

click on the sprites to make them disappear

Download the source code, library included.