Drawing boxes on the fly on Box2D
Filed Under Actionscript 3, Box2D, Flash, Users contributions • 2 Comments
Box2D is getting more and more popular among Flash developers, but it still lacks of adeguate tutorials and documentation about making games with it.
Andrew McGrath from Gamersgarden released a great tutorial about drawing boxes on the fly on Box2D.
Every detail of the script is fully commented, so you won’t miss anything, and you will get something like this:
Click and drag with the mouse to draw boxes on the fly.
This is the source code: Read more
Box2D joints: Distance Joint
One of the most interesting Box2D features are joints.
Joints are used to constraint two bodies together in various ways and allow you to create very complex objects such as ragdolls and motors.
At the moment, Box2D features six different joint types: Distance, Gear, Mouse, Prismatic, Pulley and Revolute joint.
In this post, we’ll learn everything about Distance joints.
A distance joint constrains two points on two bodies to remain at a fixed distance from each other.
You can think about it as a massless, rigid rod.
In this example we are going to create a square and a circle with a distance joint connecting them, all in just four lines.
Here they are:
And this is the source: Read more
Adding tabs easily in your WordPress theme
When you are running a blog for some time, you will have more and more contents to display, and the same space where to make them fit.
That’s why a lot of latest WordPress themes feature tabbed navigation to save space.
This screenshot refers to Linoluna theme, but there are thousands more using this kind of navigation.

You can find various tutorials in the web explaining how to do it, but I am going to tell you what I made.
What’s the difference? I won’t give you cut/paste code, as in most cases it will only work in the themes the tutorials is referring.
I am going to tell you how I made the tabbed navigation showing recent, most popular and top rated posts.
I made my tabbed navigation with one thing in mind: lightweight.
So I discarded all framework-based tabbed navs and used DOMTab. Once I downloaded the last version, I only uploaded the main file, domtab.js, into my theme directory.
Then I changed header.php adding
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script>before </head> tag.
Now it’s time to change the sidebar… forget the examples full of <p> and <div>, I just added
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <h2>Posts</h2> <div class ="domtab"> <ul class="domtabs"> <li><a href="#t1">Recent</a></li> <li><a href="#t2">Most popular</a></li> <li><a href="#t3">Top rated</a></li> </ul> <div> <a name="t1" id="t1"></a> <ul> <?php $recent = new WP_Query("showposts=10"); while($recent->have_posts()) : $recent->the_post();?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> </div> <div> <a name="t2" id="t2"></a> <?php tpbc_list(); ?> </div> <div> <a name="t3" id="t3"></a> <ul><?php get_highest_rated('both',18,10); ?></ul> </div> </div> |
and then I just had to define some styles. Just remember not to change the domtab and domtabs class names, or it won’t work.
As for the styles, I did not upload the external CSS provided with the package, but just defined some styles to the new classes recently added.
And that’s it… see the result in my sidebar… now I am going to add some fancy icons and my lightweight tabbed navigation is done.
Designing the structure of a Flash game - AS3 version - Part 2
I added some new features to Designing the structure of a Flash game - AS3 version game template and wanted to share the result with you.
Now the diagram is a little more complex, and it still lacks of some important features such as savegames and high scores.
Let’s look at the new diagram (if you want a fancy diagram like the one on this post, made in a couple of minutes without installing any software, visit Gliffy):

Now the player can select levels. The script does not check for already completed levels and there isn’t any “congratulations” screen if you complete the game.
Both features will be added later.
Also, there is some room for optimization, and I will try to optimize the template as much as I can because it’s going to be my template for all future AS3 games.
Here it is: Read more
Are you a real PROgrammer?
I know a lot of people saying they are programmers just because they can handle Excel formulas without (too much) hassle.
Others say they are programmers because they modified a form validator script found somewhere in the web and, hey, it worked. For almost a week.
Now I decided to write down 12 rules to determine if you are really a PROgrammer or just another wannabe
1) You are making a living with programming
I don’t want to know how much do you earn, because I know this depends a lot from the Country you live in, but if you are a PROgrammer, then PROgramming is your PROfession and you must make a living out of it.
2) You often fill your spare time programming
A PROgrammer never gets bored when programming, so you shouldn’t be surprised to find yourself testing some useless script just for the sake of doing it.
3) You often stay up to late night just to add “that feature” to your script
A real PROgrammer is never fully statisfied about his scripts, so he keeps adding new features until he’s about to fall asleep
4) You can’t sleep if your script does not work properly and you don’t know why
If a routine does not work and you can’t figure out why, then you cannot eat, you cannot go at the gym, you cannot even sleep before you know what happened
5) You have new ideas about increasing scripts performances in the strangest situations
I have such ideas at the restaurant, at the cinema, and even when I am listening to a friend of mine complaining his girlfriend is probably cheating him. It happened. Seriously. But I did not suggest him to “remove the object to free memory”.
6) You always wonder why the third letter of the alphabet has the same name as a programming language
As far as I know, who developed the alphabet did not know C, so this will probably remain a mistery.
7) Your bookshelf has a pile of books about programming
Who cares for latest Stephen King’s novel when you can read interesting books about programming? Here it is my bookshelf

8) You are really excited when comes out a new language/version
New language/version means new features, new possibilities, new challenges…
9) You are amazed when you look at a software and think about the programming behind it
This happens mostly when playing games… when I played Quake, I wasn’t amazed by the first real 3D first person shooter, but by knowing someone was skilled enough to code a real 3D engine performing enough to handle all gamind dynamics
10) You can’t bring it down you can’t program everything
I mean… wouldn’t it be perfect if you TV remote control had a little console where you can enter something like this:
1 2 3 4 | if(current_channel.isBoring() && current_channel.getBetterChannels == null){ playstation.turnOn(); playstation.loadGame("Dead Space"); } |
It would be fantastic…
11) Other PROgrammers are your idols
This is very important. If you want to be fan of famous PROgrammer, check this page and be his fan. One day or another, he will publish some exclusive content in it.
12) You did not take this list too seriously
PROgrammers are ironic. If you aren’t ironic, check your configuration file or report it to your customer service
In-game banner experiments: 10k views results
In my latest game, Red Flowers, I introduced a new way to show ads.
At the bottom of the level-select screen, I am showing three ads. One linking to this blog, one asking for a PayPal donation, and one linking to Triqui.com.
Now it’s the time to publish some stats after 10k views.
First, I have to say banners appear randomly, and I did not count how many times every banner has been shown.
But, according to probability theory, in a large number of views each banner should have been shown the same number of times.
Let’s see the results:
Banner to this blog: 280 clicks
Banner to PayPal: 238 clicks
Banner to triqui.com: 339 clicks
Total clicks: 857
Click ratio: 857/11,055*100 = 7.75% (11,055 is the exact number of views I managed to look at the stats… it’s quite hard to stop at 10,000 sharp…)
It’s a great click-through in my opinion, and sponsors should have more interest in showing their ads in level-select screen rather than in useless fancy preloaders.
Now you may think: OMG you got 238 PayPal donations!!!
You’re wrong. I just got 2, for as much as $7… but it’s still a $0.63 eCPM that adds to $0.23 MochiAds is giving me at the moment.
At the moment I am completing another game with a different way to show banners (yes! another one!)
Stay tuned, as usual…
Understanding AS3 shared objects
This is the AS3 version of Managing savegames with Flash shared objects.
In this post I’ll explain the basic of shared objects, then later I’ll add the feature to Designing the structure of a Flash game - AS3 version in order to have a game template more complete.
Let’s start with the result: that’s what we are going to create:
As you will see, the counter increases when you reload the page.
Let’s take a look at the script: Read more
Sudoku creator/solver with AS3
At the beginning of this month I published the Sudoku creator/solver with PHP.
Now, after a little hassle due to a strange way AS3 manages arrays (in my opinion), I am ready to post the AS3 version of the solver.
This is what you will get
Results may vary if you don’t have Lucida Console font installed in your system, anyway the complete solved sudoku is in the sudoku array, so feel free to modify the code in order to display the sudoku in a more eye catching way.
Here it is the script: Read more
A strange way AS3 manages arrays
Today I was porting my Sudoku creator/solver with PHP in AS3 when I found this strange behavior.
I am calling it “strange behavior” because it’s not properly a bug… let’s say an issue.
Look at this script and its comments…
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 | package { import flash.display.Sprite; public class wtf extends Sprite { public function wtf() { var my_array = new Array(1,2,3); var my_saved_array = new Array(); trace(my_array); // 1,2,3 ... of course my_saved_array.push(my_array); trace(my_saved_array); // 1,2,3 ... of course my_array[2] = 4; trace(my_array); // 1,2,4 ... of course trace(my_saved_array); // 1,2,4 !!!! WHY? WHY? my_saved_array.push(my_array.slice()) trace(my_saved_array); // 1,2,4,1,2,4 ... dirty trick... my_array[2] = 5; trace(my_saved_array); // 1,2,5,1,2,4 ... yeah! } } } |
I wanted to save various instances of my_array in my_saved_array in order to make some backtracking, when I found push() does not save the array content but the array itself, so if I change some my_array values, the pushed array will also change.
You can prevent it by saving a copy of your original array like I did with slice().
This does not happen neither with Php nor, as far as I remember, with C
What I know, I had an hard time debugging the script I was writing…
10 most popular Flash games of 2008 (from a PROgrammer point of view)
Ten days ago CNN published an article about Mochi Network: 10 Most Popular Flash Games of 2008.
Where normal people just see a list of funny games, a PROgrammer sees a list of funny games he could take as inspiration when making his next game.
The one that follows, is the top 10 list, with my personal considerations from a PROgrammer point of view.
The aim is to determine which game could easily be developed to make the next game of the year
1) BLOONS

It’s a simple game with a monkey popping balloons with darts, boomerangs and some other weapons. I also made a tutorial about the basics of this game in Create a Flash game like Bloons tutorial. Beside this, some weapons and bricks require some skills in coding.
Great level design.
Skills needed in coding: 2/5
Skills needed in graphics: 1/5
Skills needed in level design: 4/5
Overall difficulty: 2/5
2) Jane’s Hotel

As an inn-keeper, you must make your hotel gain popularity by satisfying your customers. Cool graphics and some advanced game mechanics make this game quite difficult to clone.
Skills needed in coding: 4/5
Skills needed in graphics: 5/5
Skills needed in level design: 2/5
Overall difficulty: 4/5

It’s a Pang clone (also known as Buster Bros). Great game, but not so hard to code.
Skills needed in coding: 2/5
Skills needed in graphics: 2/5
Skills needed in level design: 2/5
Overall difficulty: 2/5

As a Pizzeria owner, you must make you customers happy. Very complex game mechanic with a lot of variables such as ingredients, timing and pizza slicing. Cool graphics and a great intro make this game a pain to clone
Skills needed in coding: 4/5
Skills needed in graphics: 5/5
Skills needed in level design: 3/5
Overall difficulty: 4/5
5) The Fancy Pants Adventure: World 2

Great game that reminds Sonic the Hedgehog with great graphics. The game with the best level design in this chart, and the hardest to clone.
Skills needed in coding: 5/5
Skills needed in graphics: 5/5
Skills needed in level design: 5/5
Overall difficulty: 5/5
6) Tower Bloxx

Build your tower by stacking blocks. The basics are simple to clone, but some visual effects require skill at drawing. The full game, featuring some managerial issues, adds some difficulty to coding.
Skills needed in coding: 4/5
Skills needed in graphics: 3/5
Skills needed in level design: 2/5
Overall difficulty: 3/5
7) Cube Crash

Clone of SameGame, this game can be easily written in any language, from javascript to Php. Basic graphics.
Skills needed in coding: 1/5
Skills needed in graphics: 1/5
Skills needed in level design: 1/5
Overall difficulty: 1/5

Same thing as Cube Crash

Feed Paris Hilton without letting her dog eat your meal. The most difficult thing when making this game is not getting sued by Paris Hilton
Skills needed in coding: 1/5
Skills needed in graphics: 2/5
Skills needed in level design: 1/5
Overall difficulty: 1/5

Great game based on an old C64 game called Kick Start with improved graphics and gameplay.
Very hard to clone without a physics enginem and still quite hard even with Box2D or another similar tool.
Skills needed in coding: 5/5
Skills needed in graphics: 4/5
Skills needed in level design: 4/5
Overall difficulty: 5/5
That’s all. Now it’s up to you: should I start with an AS3 tutorial about Bloons or Bubbe Struggle?
Posts
- Drawing boxes on the fly on Box2D
- Box2D joints: Distance Joint
- Adding tabs easily in your WordPress theme
- Designing the structure of a Flash game - AS3 version - Part 2
- Are you a real PROgrammer?
- In-game banner experiments: 10k views results
- Understanding AS3 shared objects
- Sudoku creator/solver with AS3
- A strange way AS3 manages arrays
- 10 most popular Flash games of 2008 (from a PROgrammer point of view)
- Flash game creation tutorial - part 1
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Create a flash draw game like Line Rider or others - part 1
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash artillery game - step 1
- Create a flash draw game like Line Rider or others - part 5
- Create a flash game like Security - part 1
- Click image and get coordinates with Javascript (4.96 out of 5)
- Create a flash artillery game - step 1 (4.83 out of 5)
- The experiment - one year later (4.79 out of 5)
- Create a survival horror game in Flash tutorial - part 1 (4.78 out of 5)
- New tile based platform engine - part 6 - ladders (4.74 out of 5)
- Flash game creation tutorial - part 1 (4.7 out of 5)
- Create a Flash Racing Game Tutorial (4.7 out of 5)
- Creation of a Flash arcade site using WordPress - step 2 (4.69 out of 5)
- Create a Lightbox effect only with CSS - no javascript needed (4.59 out of 5)
- Create a Flash game like Totem Destroyer (4.55 out of 5)