In this tutorial series I will show you how to make my the most played flash game Pick Up Sticks in HTML5 with no programming skills.

To do that, I will use Construct 2. It is a visual HTML5 game development tool and to successfully make this tutorial you must know to work with it. But even if you don't know how to use Construct2 you can learn it very fast by reading official tutorials and manual. It's really very easy and you don't need to write any line of source code!

Let's start making game by opening Construct2 and creating a new .capx project named Pick Up Sticks!

A tree structure of our first project is shown on the next image:

So we have a game layout bounded by an event game sheet. Layouts can consist of multiple layers which can be used to easily arrange objects on top of others, but for now we have only one layout with only one layer in this project example.

The size of our layout is 320x480 pixels and it is defined under layout properties. On the layout properties we are also choosing the event sheet which runs for that layout.

There are also added two objects to the project: a Mouse for a game control, and a Stick sprite object divided in two frames which consist very simple images of two differently colored sticks.

To add Mouse object right click on Object types in Projects window, select Insert New Object and choose Mouse from the opened dialog. Similarly, to add Stick object choose Sprite from the Insert New Object dialog and give it 'Stick' name when inserted it.

Now, we must add some sprite images to the Stick object from files saved somewhere on your disk. Right click on the previously inserted Stick object in Projects window and select Edit Animation to open Image Editor. Here you can several options to load images from a file so you can do that as you like the most! I usually load all frames from one previously created image (see the image below) using Import Sprite Strip option from the right menu in Animation Frames window.

After loading all sprite images to the frames of the Stick object we can use it in our game, but firstly we have to place it on the game layout! For our purpose we will place the Stick object somewhere outside of the game layout so that we don't see it when the game starts, but we will later create a pile of stick instances from it.

Next, let's see the properties of the Stick sprite object:

Currently, the most important properties for us are Layer, Position, Size and Z instance variable (it is manually added by add/edit option to store Z-depth of each created stick instance - this will be used later to detect which stick is currently placed on the top of the pile).

Finally, let's see the event game sheet. All game logic and events are placed here:

And here is the result of our first project. Click on the sticks to pick them all!

The complete .capx project you can download here!

Here is Falling Guru, an arcade/platformer flash game designed in an old retro style and made by FlashDevelop using Flixel Game Library (version 2.55).

It is based on a very simple but fun and addicting game concept in which you as a great falling guru have to jump over platforms and reach the bottom of the cave by falling down through it.

Download complete source code of this game (tutorial)!

As usual, the project is developed with FlashDevelop source code editor. To successfully compile it, you have to add a proper classpath to the AdamAtomic-flixel-2_55 game library installed on your computer as follows:
-> open project in FlashDevelop -> go to Project menu -> Properties -> Classpaths -> Add Classpath.

The game name, default level of zoom for the game's cameras (e.g. gameZoom = 2 : all pixels will be drawn at 2x), Mochi Game ID, game resolution and a movie clip for displaying Mochi ClickAwayAd are defined in Main.as class. Change these lines according to the settings of your game!

// define game name
public static const gameName:String = "Don't press space 2";

// define game zoom
public static const gameZoom:int = 2;

// define Mochi Game ID
public static var strMochiGameID:String = "f2f007e06bbe21d3"; // Substitute this with your Mochi Game ID !

// define Game Resolution
public static var strMochiGameRes:String = "600x480"; // Substitute this with a resolution of your game !

// movie clip to show Mochi ClickAwayAd in it - it will be created and loaded in MenuState Class!
public static var mcClickAwayAd:MovieClip;

A Mochi Click Away Ad is defined in create() function of MenuState.as class so here you can change the highlighted lines if you want to put Click Away Ad on some other position or skip it:

// display Mochi ClickAwayAd...
if (Main.mcClickAwayAd == null){ // create a movie clip to show Mochi ClickAwayAd in it
	Main.mcClickAwayAd = new MovieClip();

	Main.mcClickAwayAd.width = 300;
	Main.mcClickAwayAd.height = 250;

	Main.mcClickAwayAd.scaleX = 0.5 * Main.gameZoom;
	Main.mcClickAwayAd.scaleY = 0.5 * Main.gameZoom;

	Main.mcClickAwayAd.graphics.beginFill(0xff008800, 0);
	Main.mcClickAwayAd.graphics.drawRect(0, 0, 300, 250);
	Main.mcClickAwayAd.graphics.endFill();

	Main.mcClickAwayAd.x = (FlxG.width * Main.gameZoom - Main.mcClickAwayAd.width )  / 2 + 60 * Main.gameZoom;
	Main.mcClickAwayAd.y = (FlxG.height * Main.gameZoom - Main.mcClickAwayAd.height) / 2 + 50 * Main.gameZoom;

	FlxG.stage.addChild(Main.mcClickAwayAd); // to hide it use: FlxG.stage.removeChild(Main.mcClickAwayAd);

	// define options for Mochi ClickAwayAd
	var opts:Object = { };

	opts.id = Main.strMochiGameID; // mochi game ID

	opts.clip = Main.mcClickAwayAd; // attach Mochi ClickAwayAd to this movie clip
	opts.skip = false; //set this option to TRUE if you want to skip the ClickAwayAd 

	// show Mochi ClickAwayAd
	MochiAd.showClickAwayAd(opts);

} else {
	// movie clip with Mochi ClickAwayAd in it is already loaded -> display it!
	FlxG.stage.addChild(Main.mcClickAwayAd);
}

To show Mochi Leaderboard in the main menu screen open MenuState.as class and change these lines:

private function showMochiScore():void
{
	// Substitute these with your MochiAd leaderboard code !!!
	var o:Object = { n: [4, 2, 2, 9, 14, 10, 7, 12, 10, 5, 14, 5, 2, 4, 2, 15], f: function (i:Number,s:String):String { if (s.length == 16) return s; return this.f(i+1,s + this.n[i].toString(16));}};
	var boardID:String = o.f(0, "");

	MochiScores.showLeaderboard( { boardID: boardID, onDisplay: displayMochiScore, onClose: closeMochiScore, onError: closeMochiScore } );
}

To send score to Mochi Leaderboard when game is over open PlayState.as class and change these lines:

private function sendMochiScore(Timer:FlxTimer=null):void
{
	// Substitute these with your MochiAd leaderboard code !!!
	var o:Object = { n: [4, 2, 2, 9, 14, 10, 7, 12, 10, 5, 14, 5, 2, 4, 2, 15], f: function (i:Number,s:String):String { if (s.length == 16) return s; return this.f(i+1,s + this.n[i].toString(16));}};
	var boardID:String = o.f(0, "");

	MochiScores.showLeaderboard( { boardID: boardID, onClose: closeGame, onError: closeGame, score:FlxG.score } );

	...
}

Here you can try the game:

Here you can download complete source code of this game! I think it is quite good commented so there is no need for more explanations here.

The project is developed with FlashDevelop source code editor. To successfully compile it, you have to add a proper classpath to the AdamAtomic-flixel-2_35 game library installed on your computer as follows:
-> open project in FlashDevelop -> go to Project menu -> Properties -> Classpaths -> Add Classpath.

Here is a flowchart of the game template for better understanding how it works:

To set Mochi ID and resolution of your game open Main.as and change these lines:

// define Mochi Game ID
public static var strMochiGameID:String = "f2f007e06bbe21d3"; // Substitute this with your Mochi Game ID !

// define Game Resolution
public static var strMochiGameRes:String = "600x480"; // Substitute this with a resolution of your game !

A Mochi Click Away Ad is defined in create() function of MenuState.as class so here you can change the highlighted lines if you want to put Click Away Ad on some other position or skip it:

Main.mcClickAwayAd = new MovieClip();

Main.mcClickAwayAd.width = 300;
Main.mcClickAwayAd.height = 250;

Main.mcClickAwayAd.scaleX = .5;
Main.mcClickAwayAd.scaleY = .5;

Main.mcClickAwayAd.x = (FlxG.width - 150 ) / 2 + 50;
Main.mcClickAwayAd.y = (FlxG.height - 125 ) / 2 + 30;

this.addChild(Main.mcClickAwayAd);

// define options for Mochi ClickAwayAd
var opts:Object = { };

opts.id = Main.strMochiGameID; // mochi game ID

opts.clip = Main.mcClickAwayAd; // attach Mochi ClickAwayAd to this movie clip
opts.skip = false; //set this option to TRUE if you want to skip the ClickAwayAd 

// show Mochi ClickAwayAd
MochiAd.showClickAwayAd(opts);

To show Mochi Leaderboard in the main menu screen open MenuState.as and change these lines:

private function showMochiScore():void
{
	// Substitute these with your MochiAd leaderboard code !!!
	var o:Object = { n: [4, 2, 2, 9, 14, 10, 7, 12, 10, 5, 14, 5, 2, 4, 2, 15], f: function (i:Number,s:String):String { if (s.length == 16) return s; return this.f(i+1,s + this.n[i].toString(16));}};
	var boardID:String = o.f(0, "");

	MochiScores.showLeaderboard( { boardID: boardID, onDisplay: displayMochiScore, onClose: closeMochiScore, onError: closeMochiScore } );
}

To send score to Mochi Leaderboard when game is over open PlayState.as and change these lines:

private function sendMochiScore():void
{
	// Substitute these with your MochiAd leaderboard code !!!
	var o:Object = { n: [4, 2, 2, 9, 14, 10, 7, 12, 10, 5, 14, 5, 2, 4, 2, 15], f: function (i:Number,s:String):String { if (s.length == 16) return s; return this.f(i+1,s + this.n[i].toString(16));}};
	var boardID:String = o.f(0, "");

	MochiScores.showLeaderboard( { boardID: boardID, onClose: onQuitGame, onError: onQuitGame, score:FlxG.score } );
}

Here you can try the game:

ZOO Director is nominated for the Best of Casual Gameplay 2010 in the webtoy/sandbox category by the JayIsGames game portal. The game is made in three weeks for the  Casual Gameplay Design Competition #8 and it won the fifth place with the next score:

Theme: 4.38, Appeal: 3.10, Fun: 3.29, Composition: 2.71, Technical: 3.95, Rating: 3.43, Total (weighted avg): 3.62

Nomination comment is here:
Not a lot can be said without spoiling the fun of playing Srdjan Susnic's entry into our CGDC#8. What you should know is that ZOO Director is a truly traditional sandbox gameplay experience. Your aim is to rise above the rank of humble Zoo Novice to claim the glorious title of Zoo Director, by creating and maintaining your very own zoo. Sounds simple, but this quirky little game quickly reveals its challenges.

Find the game and vote for it here!

Update on February 11, 2011:

ZOO Director won Top 5 award

Well, today is a new beginning for this web site. After long preparations and redesigning, I can say now that it has a new look finally.

As you see, the site is now powered by WordPress script using Lightword Theme created by Andrei Luca. The old look of the site is shown for the history on the published image below.

Currently there are no my old tutorials, but I'm planning to add them as soon as possible.
For now you can play my online games (there are many addicting games for your fun, but also for wasting your time).

Enjoy!