It was an experiment to port the famous tile based game SameGame into a real-world physics environment, and despite it was nothing that a prototype with some bugs – especially with collision management – the game got some success, with about 2.5 million views and two sponsorships by Rotten Tomato Games (now offline) and GirlGames.

Now I am making a sequel of the game, more polished, fun and playable, and it’s time to release the source code of the good old SamePhysics.

You are warned: the code is “as is” and it’s not even the latest Box2D distribution, but I think it could be interesting to learn the basics of Box2D programming from a real world successful example.

Download the source code.

People don’t want to read detailed instructions before playing a Flash game, they want to dig into action.

That’s why we have the need to create in-game tutorials, which are easy levels to make players get used to the game design while keeping them in action.

In my upcoming Flash game Kira the Witch, the tutorial is made of signs you can find around the levels. Once you touch a sign, you will be able to “read” it this way:

I am going to show you how to do it in the painless way.

We have two actors: the small sign and the big sign. Small signs are placed in the scene during level design, while the big sign (one for all) will be created on the fly.

Also, the small sign is a sensor so it won’t react to physics and has its own collision group, called “sign”.

The big sign is a doodad, which means it’s a special actor never allowed to collide with anything else.

There is a big difference between a sensor and a doodad. The sensor does not react to physics forces but registers collisions, the doodad does not register collisions.

Now let’s create some behaviors: the first, and the easiest, is called “Big sign information” and does not contain any action, as you can see:

So it may seems useless, but I added to this behavior three not hidden attributes called “Text to display”, “Big sign x position” and “Big sign y position”.

When I customize the behavior of each small sign and add “Big sign information” behavior…

I can set the each sign content, and the x and y coordinates to be shown once Kira “reads” a sign. This way, “Big sign information” behavior acts like a new data type:

Also please notice I am using an asterisk as line break character since using “\n” won’t work at this stage.

Then, I need another behavior called “Write sign text” which will write text inside the big sign, so obvioulsy will be tied to it:

This is also very easy as I am only setting a font and writing some text in the sign. Notice how at this time I need to replace “*” with “\n” to do line breaks.

The difficult task to create the big sign, place it, and write text in it by changing “Text to write” attribute is (and then remove it) made by main player’s behavior called “Kira touches a sign”

I commented it to let you understand how it works.

Basically the key is the communication among different behaviors to get and set attributes on the fly.

And we can say “goodbye” to that old lame “How to play” buttons in a matter of minutes.

In this physics game you have to beat all 40 levels collecting as much orbs as you can, throwing the ball with a sling. To make your life harder, several kind of blocks to avoid or interact with.

You can find some information about the prototype in these posts:

* Controlling a ball like in Flash Elasticity game tutorial
* Flash Elasticity prototype – AS3 version
* When Elasticity meets Bloons

The physics is powered by Box2D, while I used Flint particle system for the particles.

Talking about advertising, I used MochiMedia for the in-game ads and FlashGameLicense to find a sponsorship.

I recommend Rick from Hairy Games: he provides constructive feedback, helps you to make the game better and the branding process is easy.

I also used both Playtomic and MochiBot to track game statistics.

Play ita, rate it and give me feedback.

I will update you with some interesting new about the game once it’s in the wild for some time.

I blogged about it about a month ago and some people asked me some hints about the way used to catch the stars drawing a lasso around it.

There are a lot of mathematical formulas to solve this task, and range from “more than complicate” to “you must be joking”.

I decided to post a prototype of the code I used starting from the post Develop a Flash game like String Avoider – AS3 version – and more!, without any comment, and it will be up to you to guess how I solved the problem in a ridiculously easy way.

This is what you will get:

Catch the circle with a lasso to make it move in a random spot.

And 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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	public class Main extends Sprite {
		private var tailLenght:Number=1;
		private var tailNodes:Number=300;
		private var tailCanvas:Sprite=new Sprite();
		private var areaCanvas:Sprite=new Sprite();
		private var targetCanvas:Sprite=new Sprite();
		private var nodes:Vector.<Point>=new Vector.<Point>();
		private var target:Point;
		public function Main() {
			for (var i:int=0; i<tailNodes; i++) {
				nodes[i]=new Point(mouseX,mouseY);
			}
			addChild(areaCanvas);
			addChild(tailCanvas);
			addChild(targetCanvas);
			placeTarget();
			addEventListener(Event.ENTER_FRAME,update);
		}
		private function placeTarget():void {
			target=new Point(Math.floor(Math.random()*600)+20,Math.floor(Math.random()*440)+20);
			targetCanvas.graphics.clear();
			targetCanvas.graphics.lineStyle(1,0xffffff);
			targetCanvas.graphics.beginFill(0xffffff);
			targetCanvas.graphics.drawCircle(target.x,target.y,5);
			targetCanvas.graphics.endFill();
		}
		private function update(e:Event):void {
			var sampleNodes:Vector.<Point>=new Vector.<Point>();
			tailCanvas.graphics.clear();
			tailCanvas.graphics.lineStyle(3,0x00ff00);
			tailCanvas.graphics.moveTo(mouseX,mouseY);
			areaCanvas.graphics.clear();
			nodes[0]=new Point(mouseX,mouseY);
			sampleNodes[0]=new Point(mouseX,mouseY);
			for (var i:int=1; i<tailNodes-1; i++) {
				var nodeAngle:Number=Math.atan2(nodes[i].y-nodes[i-1].y,nodes[i].x-nodes[i-1].x);
				nodes[i]=new Point(nodes[i-1].x+tailLenght*Math.cos(nodeAngle),nodes[i-1].y+tailLenght*Math.sin(nodeAngle));
				tailCanvas.graphics.lineTo(nodes[i].x,nodes[i].y);
				if (i%10==0 || i==tailNodes-2) {
					sampleNodes.push(nodes[i]);
				}
			}
			for (i=0; i<sampleNodes.length-1; i++) {
				for (var j:int=i+2; j<sampleNodes.length-1; j++) {
					var p:Point=lineIntersection(sampleNodes[j+1],sampleNodes[j],sampleNodes[i+1],sampleNodes[i]);
					if ((p!=null && !isNaN(p.x))) {
						areaCanvas.graphics.beginFill(0xff0000,1);
						areaCanvas.graphics.moveTo(p.x,p.y);
						for (var k:int=i+1; k<=j; k++) {
							areaCanvas.graphics.lineTo(sampleNodes[k].x,sampleNodes[k].y);
						}
						areaCanvas.graphics.endFill();
					}
				}
			}
			if (areaCanvas.hitTestPoint(target.x,target.y,true)) {
				placeTarget();
			}
		}
		private function lineIntersection(p1:Point,p2:Point,p3:Point,p4:Point):Point {
			var x1:Number=p1.x;
			var x2:Number=p2.x;
			var x3:Number=p3.x;
			var x4:Number=p4.x;
			var y1:Number=p1.y;
			var y2:Number=p2.y;
			var y3:Number=p3.y;
			var y4:Number=p4.y;
			var px:Number=(((((x1*y2)-y1*x2)*(x3-x4))-(x1-x2)*((x3*y4)-y3*x4))/(((x1-x2)*(y3-y4))-(y1-y2)*(x3-x4)));
			var py:Number=(((((x1*y2)-y1*x2)*(y3-y4))-(y1-y2)*((x3*y4)-y3*x4))/(((x1-x2)*(y3-y4))-(y1-y2)*(x3-x4)));
			var segment1Len:Number=Math.pow(p1.x-p2.x,2)+Math.pow(p1.y-p2.y,2);
			var segment2Len:Number=Math.pow(p3.x-p4.x,2)+Math.pow(p3.y-p4.y,2);
			if (Math.pow(p1.x-px,2)+Math.pow(p1.y-py,2)>segment1Len) {
				return null;
			}
			if (Math.pow(p2.x-px,2)+Math.pow(p2.y-py,2)>segment1Len) {
				return null;
			}
			if (Math.pow(p3.x-px,2)+Math.pow(p3.y-py,2)>segment2Len) {
				return null;
			}
			if (Math.pow(p4.x-px,2)+Math.pow(p4.y-py,2)>segment2Len) {
				return null;
			}
			return new Point(px,py);
		}
	}
}

No need to download anything, you can replace the code contained in the original prototype with this one.

Did you figure out how I made it possible with no formulas?

Anyway, in some platform games you need to make the player die if falling from high places.

Try to play this prototype:

You can play with ARROW keys, and perform double jumps.

If you fall down the left cliff, you will die (actually, you turn gray for couple of seconds – that’s how I show you would have died).

If you fall down the right cliff, you won’t die.

If you jump from the right cliff and fall down, you will die.

This happens because there’s a maximum falling height. If you’re falling for more than such height, you will die.

To make this kind of behavior, first we need some attributes:

is falling is a Boolean variable to determine whether the player is falling or not

falling start is the y coordinate in pixels of the player when it begins to fall

deadly height is the height, in pixels, of the deadly height. Also notice this attribute is not hidden so it can be set when the behavior is added to the player:

Then, this is the behavior:

As you can see it’s just a matter of checking if player’s y speed is greater than zero (the player is moving down, so it’s falling), and once it hits the ground again, calculating for how long it kept on falling.

The official theme for FGS 2012 is Maximize Your Game. Why? Game developers (and the industry in general) are doing amazing things with Flash games. We are seeing games being designed and created (maximized) for multiple devices and platforms. Developers are increasing (maximizing) the value of their IP. Game designers and artists are improving (maximizing) the overall quality of their games. New tools and resources are available to help improve (maximize) development time. Marketing and monetization strategies are emerging to enhance (maximize) overall game distribution, discovery, and revenue streams. Maximize Your Game reflects all of the exciting innovation we are seeing in the Flash games industry today.

Moreover, there is space for speakers in the following topics:

* Mobile-specific
* Design
* Development
* Marketing strategy
* Designing for multiple devices
* Game post-mortems
* Game Development
* Multi-player
* Developing for multiple platforms
* Development tools
* Performance optimization
* Game Design
* Design tips & tricks
* Game post-mortems
* 3D-specific
* Pros and cons
* Optimizing 2D performance
* Using Stage 3D
* Game post-mortems
* Business
* Building a business (going from one person to a small team)
* Artwork
* Graphics
* Animation

And it’s not over yet! Sign up for the conference with the discount code blog_Emanuele (hey! It’s me!!) and attend the summit with a 15% OFF!!

This means the player can jump, and while in the air, can jump once more to get higher platforms.

Something like this demo made with StencylWorks, taken from my upcoming game Kira the Witch:

Move with LEFT and RIGHT arrow keys, jump and double jump with UP arrow key.

I already showed you how to make an actor jump in the post Create awesome Flash games in no time with StencylWorks – adding intro, jumping and more, but when we want a double jump, we need two more attributes: one to see if we are jumping, that is if we are in the air because we made a jump (and not because we are falling down a platform) and one to determine if we can perform a double jump.

In the end, the double jump can be made only when you jump, and before you touch the ground you release the jump key and then press it again.

That is, the behavior you can see here:

Useless to say, really easy, like all StencylWorks features.

This is the game involved in the experiment:

Use arrow keys to move the frog, or click on the frog controller in the bottom right corner of the game.

Here is a brief intro by Roger:

I will first explain something of the logic controlling the game. It is very important to point out that the logic itself has nothing to do with any of the frameworks I’ll use. The frameworks for the most part only influence the VIEW part of the logic: the actual rendering of textures on screen in place of all the rectangle objects the logic handles.

So these tutorials are not meant to be on how to build a game like Frogger, but how to blitt stuff to the screen.

Having said that, I thought I might as well explain enough of the game logic so that you can separate that logic from the actual framework code.

The Game Engine

The engine manages a series of Screen objects, but displays only one screen at a time. So you can build an Intro Screen, a How to Play Screen, a High Scores Screen, a Game Screen… The Engine then updates the currently displayed Screen object within a loop.

For this example I created two screens, one called a MenuScreen that shows the instructions on how to play the game, and one screen called GameScreen where the actual game runs.

The main Game object contains exposed references to GameData, the TextureAtlas and Sounds. Every object in the game receives a reference to the Game object. I’ve decide to use composition and drop the Singletons.

Controls

For the Flash version of the game I will use two sets of controls: Key presses and Mouse clicks. Later when porting to mobile devices I will drop the Keyboard input logic and just keep the touch events.

The Game Logic

The game logic is very simple. The screen is divided into 13 rows, I called them Tiers. Each Tier has a bunch of sprites inside it, they can be cars, or turtles or tree logs.

The frog sprite, controlled by the player, can have only 13 possible values for its Y position, one value per Tier. So with every UP or DOWN movement the player Y value changes to either the next Tier or the previous one.

Collision is run only with the objects belonging to the Tier the frog is currently at.

Each Tier has the responsibility to update the positions of the sprites it contains.

The Skin Property

As I talked about earlier, the different frameworks used will be in charge of the SKIN property of the Sprites used in the game as well as the various Texture objects a skin may use (if it’s animated for instance.) It is here that the Framework logic and syntax can be found.

However when I update the position of sprites in the game I do this through the wrappers and not directly to the Image objects. This might seem like extra work for you, and you’re free to change this. I simply find this way to be the easiest when taking the same logic to different platforms as I only need to change the logic controlling rendering of the skins.

Now, you are ready to ready one of the most interesting tutorials I’ve ever seen.

http://www.rengelbert.com/tutorial.php?id=163 (using Starling)
http://www.rengelbert.com/tutorial.php?id=167 (using Sparrow)
http://www.rengelbert.com/tutorial.php?id=171 (using Cocos2D)
http://www.rengelbert.com/tutorial.php?id=175 (using LibGDX)

I am looking forward for playing and messing around with frameworks and publish my thoughts.

And, even more important, you should be able to manage saved games so players won’t be forced to complete the game in a single session.

Two posts which explain how to do it respectively with AS2 and AS3 are managing savegames with Flash shared objects and understanding AS3 shared objects.

Obviously, with StencylWorks everything is easier.

First, we start with the creation of another animation for the door actor, which now will have two animations (two static images in this case, but it’s the same for the scope of this post).

One for the open, clickable door which will bring us to an unlocked level, and one for the closed, not clickable door, which represents the locked levels.

Then we have to create two game attributes. Game attributes are global variables which are accessible to every behavior. I am calling them “Highest Level Completed” and “Current Level” and I will use them to store respectively the number of the highest level completed and the current level being played. Both attributes have a starting value of zero.

Using game attributes for this purpose is very important, as StencylWorks allows you to save and load all game attributes.

Now we need to create a behavior to load game attributes, which should be executed as soon as possible, so you’d better bind it to the splash screen. It’s very easy as StencylWorks has a “load save file” block.

Now, the hardest task: show open gates for playable levels and make them clickable, and closed gates for unplayable levels. Modify the “Click to play level” behavior I showed you in create awesome Flash games in no time with StencylWorks – Selecting levels this way:

Let’s see what changed:

In the “always” block you can see the behavior has a new attribute called “level number” and it can be clicked only if the value of “Highest Level Completed” game attribute is greater or equal than “level number” attribute.

If it’s true, then we set “Current Level” game attribute to “level number” value and we make the player to to the level.

The “when drawing” block will also check for “Highest Level Completed” game attribute to be greater or equal to “level number” attribute, and will show the “Open” door animation, along with the level number, if true. Otherwise, the “Closed” door animation will be shown.

At this time, we have to customize the behavior of each door, just like you made in the previous step, this time setting also “level number” attribute to zero for level one, then one for level two, and so on.

Finally, once the player completes a level, in this case when the player hits the door, we have to set “Highest Level Completed” game variable to the larger number between “Highest Level Completed” game variable itself and “Current Level” game variable.

Then, you can save the game. This way, “Highest Level Completed” variable will be locally saved, and made available once you launch the game again.

This is what you should see once you beat level two:

I am making a complete game without writing a single line of code.

So, I wrote this 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

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	public final class Main extends Sprite {
		private static const tailLenght:Number=1;
		private static const tailNodes:Number=300;
		private static const head:Head=new Head();
		private static const tailCanvas:Sprite=new Sprite();
		private static const bg:Background=new Background();
		private var nodes:Vector.<Point>=new Vector.<Point>();
		private var followTheMouse:Boolean=false;
		public function Main() {
			addChild(bg);
			bg.cacheAsBitmap=true;
			addChild(head);
			head.cacheAsBitmap=true
			head.x=160;
			head.y=240;
			head.addEventListener(MouseEvent.MOUSE_DOWN,followMouse);
			addChild(tailCanvas);
			for (var i:int=0; i<tailNodes; i++) {
				nodes[i]=new Point(head.x,head.y);
			}
			addEventListener(Event.ENTER_FRAME,update);
			stage.addEventListener(MouseEvent.MOUSE_UP,stopMouse);
		}
		private function followMouse(e:MouseEvent):void {
			followTheMouse=true;
			head.visible=false;
		}
		private function stopMouse(e:MouseEvent):void {
			followTheMouse=false;
			head.visible=true;
		}
		private function update(e:Event):void {
			if (followTheMouse) {
				head.x=mouseX;
				head.y=mouseY;
				tailCanvas.graphics.clear();
				tailCanvas.graphics.lineStyle(2,0xffffff);
				tailCanvas.graphics.moveTo(head.x,head.y);
				nodes[0]=new Point(head.x,head.y);
				for (var i:int=1; i<tailNodes-1; i++) {
					var nodeAngle:Number=Math.atan2(nodes[i].y-nodes[i-1].y,nodes[i].x-nodes[i-1].x);
					nodes[i]=new Point(nodes[i-1].x+tailLenght*Math.cos(nodeAngle),nodes[i-1].y+tailLenght*Math.sin(nodeAngle));
					tailCanvas.graphics.lineTo(nodes[i].x,nodes[i].y);
				}
			}
			// do other stuff in the game
		}
	}
}

Which is basically the same as the original prototype, just dragging the string when the finger (mouse) is down and showing a circle where to tap (click) to start dragging again if the player leaves the finger (releases mouse button).

Play with the result:

Drag the white circle to move the string.

I also optimized a bit the code defining the class as final since it’s not meant for being extended and its methods aren’t meant for being overridden. final classes should execute faster than other classes, and since I am looking for the best performance improvement, I used this trick.

Using static in some variable declarations also should increase the speed. static specifies that a variable (or a constant) belongs to the class rather than to the instances of the class.

Finally, cacheAsBitmap method allows me to render the Display Objects as bitmaps rather than vectors. You may say “just use a PNG image then”, and you’re right, but I wanted to keep the code as much similar to the original as I can.

This is the final example of the app working on my Iphone4:

It works quite well although I am considering using a sequence of dots rather than a thin line, I will keep you updated.