Flash game creation tutorial - part 1 (with AS3 classes)
Old readers should remember Flash game creation tutorial - part 1… it’s an ond AS2 tutorial about the creation of a game like Ball Revamped and its sequels.
Later Tim Edelaar coded it into AS3 in Step by step AS3 translation of Flash game creation tutorial - part 1, but with the whole code in a single class, and now it’s time for me to release the AS3 version of the tutorial using classes.
We are going to use three actionscript files: as3circle.as for the game, circle.as for the hero (the ball) and keys.as for keyboard input.
keys.as is the same class used in Introduction to AS3 classes so you can understand the importance of writing classes: I won’t have to worry for keyboard input anymore (well… as long as I am using arrows and space keys)
How to link classes
Linking classes is very important in AS3, that’s how you should manage class linking:
This is the movie properties panel:

Writing as3circle in the Document class field will set as3circle.as as the main class file.
This is the circle object properties panel:

Writing circle in the Class field will set circle.as as the class file for the circle object.
Now your .fla file and the three .as files must be in the same path.
And this is the code for every file… I don’t think there is any need to comment it because it was already commented in dozens of posts… anyway if you need comments, just ask for them in… the comments. Read more
The experiment - one year later
On october 28th, 2007, exactly one year ago, I started an experiment about monetizing a Flash game and released a one-day game called Circle Chain.
Since that day, I published a total of 10 games.
If you want to know more about the games, read the posts about Circle Chain, Christmas Couples, TileBall, GuessNext, Glomb, BallBalance, Bees n’ Flowers, Jamag, Summer Couples and RRODE.
But I think the real question you are asking is: how about the money?
Well, I have to say it’s not an easy question for two reasons:
1) Some games have been self sponsored to promote my blog and my brand, so I should add a percentual of this blog income, or determine an amount I would pay as a sponsor and add to the grand total.
2) Making these games made a multimedia company located in Italy hire me for a Flash related job, so I should add the income for that job, but since I passed the job to my company it would be really really a mess to determine the income due to my games.
So I decided to post the earnings based only on the games themselves… so forget points 1 and 2 because they are not included in the report. Read more
Introduction to AS3 classes
In my opinion one of the most important reasons people are afraid to migrate from AS2 to AS3 is its way of scripting.
Pure AS3 coding dislikes coding on the timeline and wants us to write and use custom classes.
Don't worry: you can still write your script on the timeline but you won't be able to benefit of new AS3 features doing this way.
If you want to buy a Flash AS3 version and keep on writing on the timeline, then simply don't buy it.
You will find it's not that hard to learn AS3 classes, but one common mistake is keeping the entire code into a single class.
If you aren't doing this for an educational purpose (it's easier to explain the code when it's all on a single file), then you should write as many classes as you can.
The reason is simple: the code is cleaner and easier to read.
Moreover once you wrote a messy class you won't be able to use it again in a future project, but if you have a collection of small classes, there are good chances to use them again and again and again, saving a lot of time and work.
This is a "wrong" class that simply traces if I pressed up, down, left, right or space keys.
I've taken it from New tile based platform engine - AS3 version.
-
package {
-
import flash.display.Sprite;
-
import flash.ui.Mouse;
-
import flash.events.Event;
-
import flash.events.KeyboardEvent;
-
public class all_in_one extends Sprite {
-
var press_left = false;
-
var press_right = false;
-
var press_up = false;
-
var press_down = false;
-
var press_space = false;
-
public function all_in_one() {
-
addEventListener(Event.ENTER_FRAME,on_enter_frame);
-
stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
-
stage.addEventListener(KeyboardEvent.KEY_UP, key_up);
-
}
-
public function key_down(event:KeyboardEvent) {
-
if (event.keyCode == 32) {
-
press_space = true;
-
}
-
if (event.keyCode == 37) {
-
press_left = true;
-
}
-
if (event.keyCode == 38) {
-
press_up = true;
-
}
-
if (event.keyCode == 39) {
-
press_right = true;
-
}
-
if (event.keyCode == 40) {
-
press_down = true;
-
}
-
}
-
public function key_up(event:KeyboardEvent) {
-
if (event.keyCode == 32) {
-
press_space = false;
-
}
-
if (event.keyCode == 37) {
-
press_left = false;
-
}
-
if (event.keyCode == 38) {
-
press_up = false;
-
}
-
if (event.keyCode == 39) {
-
press_right = false;
-
}
-
if (event.keyCode == 40) {
-
press_down = false;
-
}
-
}
-
public function on_enter_frame(event:Event) {
-
if (press_left) {
-
trace("left");
-
}
-
if (press_right) {
-
trace("right");
-
}
-
if (press_up) {
-
trace("up");
-
}
-
if (press_down) {
-
trace("down");
-
}
-
if (press_space) {
-
trace("space");
-
}
-
}
-
}
-
}
As you can notice, it's not that easy to use the code that checks for key pressed because is made by lines 7-11, lines 14-15 and lines 17-50.
Obviously you can cut/paste them but it's easy to forget some instructions and make errors. Read more
Platform game basics using Box2D
I wrote about Box2D Flash version about a year ago, then I published Playing with Box2DFlashAS3 and Create a Flash game like Totem Destroyer as examples covering what you can do with this library.
But I was really impressed by a thread on TriquiTips submitted by Hawdon called Box2DAs3 For Beginners! (read steps 1 and 2) that in my opinion deserves to be posted on this blog, to reach a wider public... because I know there is a lot of people looking for AS3 and Box2D and platform tutorials... and the prototype made by Hawdon merges them all this way:
Left-right to move and up to jump
This is the source code with some comments Read more
New tile based platform engine - part 11 - slopes part b
As said in New tile based platform engine - part 11 - slopes part a, the game needed a fix for the jump from/on slope bug.
In part b the bug becomes a glitch... now you can jump from/on the slope but sometimes there is a "rebounce" glitch.
It's very easy to determine why it's happening and fix it... I am just leaving the explication for next time because I just got my computer repaired and need to do a lot of things.
I just wanted to answer a question about senseless slopes and N game mechanics.
There is a lot of difference between my tile based engine and a raycasting one.
Maybe I'll cover it in next future.
Meanwhile, you are invited to take a look at the source code and fix the glitch at line 338 Read more
Developing hex map concept
Some months ago I released some tutorials about hexagonal tiles (and I developed an Halloween game based upon Hex maps creation and rollover and Finding adjacent cells in an hex map 1 and 2).
Later, Douglas Huskins told me 10 years ago he wrote a collection of functions that would help a person navigate hex maps. The functions included: Identifying the adjacent hexes, identifying the shortest path between two hexes, the relative position of a hex from the perspective of another hex and the distance between two hexes.
This can be really useful to make some strategy games.
Unfortunately most of the work seems to be lost, but Douglas still wants to share the concept with us, so he is rewriting it in Javascript.
Read what he says:
« I could not find my electronic copy of the source files.
All I have are some old Visual Basic printouts that lacked much documentation. I have recoded it into Javascript and need to test it.
However, here are two of the functions: Move and Range.
The hex map layout this code works for is based on a hex map with the points laying horizontally. The top and bottom of a hex are flat.
Hexes are numbered such that the first set of digits represent the column number and the second half of the hex number's digits represent the row number.
A typical hex number would be 0132. That would be a hex in the leftmost column and would be the 32nd hex down from the top.
This type of map comes in two flavors. The way to identify the two types of layouts is to compare 0101 with 0201. If 0101 is above 0201, then it is referred to as "Odd Column Up".
The code is able to support either flavor. There is a variable set at the top of the file (mapOddUp) which will let the code switch between the two layouts.
The unit (ship/car/etc) that sits in a hex will face one of the hex sides. The faces are numbered clockwise using either 0-5 or 1-6. Again, the code supports both numbering systems by treating 0 and 6 as the same direction (straight up). There is a variable at the top of the file (mapIsUp0) that determines which facing number system to use.
The code has the ability to change the map size. There are max and min values that can be set.
If you have any questions, please let me know. I will convert the remaining functions next week. After that, I will properly test everything and add a simple interface for it. In the meantime, this should help you create hex based games. »
Here it is the source code: Read more
When you realize you know nothing
Normally I hate when bloggers - expecially tech bloggers - write about their pets or something like "I am not writing because I got flu"... but when illness refers to computers, it's really something to talk about.
I was writing a post about online photo editors when my computer crashed.
Oh, well, who cares, I saved the post one minute ago - that's what I said.
The problem is my computer still crashes and restarts about 20 seconds after the boot.
Every "break glass in case of fire" procedure has been tried, and the computer still crashes.
I called the guy who takes care of our servers and he asked me "did you *******?"
Feel free to replace the ****** with weird BIOS settings, hybrid startup modes, motherboard jumpers configuration, impossible-to-remember regedit paths and so on.
Damn, that sounded greek... and if you're from Greece, imagine he was talking italian...
I had to bring my computer to his lab. My pride is under my shoes.

I realized there is no difference between me and Uncle Sophie (imagine Uncle Sophie as a fat mid aged woman using the computer only to play Window solitaire).
I can make (almost) everything I want just writing some lines of code, but when that big black box called "computer" seriously crashes, I know nothing.
How much do you know?
New tile based platform engine - part 11 - slopes part a
You asked for it, I made it... ladies and gentlemen... SLOPES! (applause).
I decided to split slopes in two parts, because they are a bit more difficult than other tile types.
In this part, you can walk on slopes but you can't jump on/from them. Oh, well, you can actually jump or land on them, but without the second part of the code, there could be some glitches.
Obviously if you want to suggest your jumping routine, you're welcome.
Slopes need a lot of rules in order to work, that can be summarized in one big rule: don't make senseless slopes.
For senseless slopes I mean everything... senseless... refer to the picture:

Green shapes show some possible slopes while red ones show impossible ones.
Then the is_on_slope function solves slope walking.
Once I'll publish jumping routine, I'll write a detailed slope tutorial.
Meanwhile take the source code: Read more
Create a Wordpress MochiAds Leaderboards Widget
Some time ago I blogged about Showing MochiAds leaderboards in any Flash movie or web page with a script made by myself that displayed MochiAds leaderboards on your site.
Yesterday MochiAds guys released a widget that accepts a game slug and partner ID and will display all the available leaderboards for the given game. The partner ID will constrain the widget to showing only scores from your site if you choose to do so. The widget is a Flash .SWF that can be embedded on any HTML page on your site.
In the official docs page there is an example using swfobject library but there is a much simpler way to embed scores... here it is:
-
<embed src="http://dev.mochiads.com/static/pub/swf/LeaderboardWidget.swf?game=ballbalance" allowscriptaccess="always" menu="false" quality="high" width="400" height="400" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
Just replace ballbalance with the game slug you want to display highscores.
Width and height have minimum values of 230 and 200 pixels, and the score table will adjust according to size. Read more
Flash Player 10 released
Today Adobe released Flash Player 10 for download.
Probably some of you already downloaded the beta some weeks ago, but now it's available for download the release stable version.
At the moment there is a lot of interest about Pixel Bender that will allow to implement image processing algorithms in a hardware-independent manner.
In other words, it can be the same revolutionary idea that was behind DirectX creation.
You can find a demo of pixelbender capabilities here (Flash Player 10 required).
I can't wait to mess around with FP10 new features, meanwhile I strongly suggest you to download the player