Game Art

As it is Chinese New Year right now, I decide to develop this game with new year festive theme, and using Mahjong as the puzzle tiles. If you are not familiar with Mahjong, you can use to the image below as a quick reference.

The Mahjong tile pattern was originally draw by Jerry Crimson Mann. But I need a 3D rotating Mahjong tile for my game, so I quickly model a low poly Mahjong in Blender and render the rotation sequence. Then, some final touch up was done in Photoshop to give it a pixel art feel.

Play The Game

A sequence of numbers will be shown for a brief seconds. Remember it and click them in ascending order. You can play “Mahjong Memory Game” in my labs page.

The idea of loading data dynamically is not new in game development. Peoples had been doing it since long time ago with a more sophisticated approach. They develop in-house tool where the user just draw some flow charts, or even implement a scripting interface for the designers to code the quest logic. The Flash I did here is still in early stage and basic.

View the Flash

Click on the image to view this basic XML RPG dialogue system. Instructions are found on the page. You can view the XML file here.

Install Flash Player 11 Beta 2

To view Flash Stage 3D content, you will need to install the beta version of flash player 11.

• Download and install Flash Player 11 Beta 2.

Setup FlashDevelop 4 with Flex 4.5 and Away3D 4

To publish Flash Stage3D content, you will need the new Flex 4.5 SDK. In my case, I will be using FlashDevelop 4 and Away3D 4.

• Download and install Java runtime.

• Download and install FlashDevelop 3.3.4

• Download and extract Flex 4.5 SDK. When you installing FlashDevelop 4, It will give you an option download this SDK too.

• Download and extract Away3D Core FP11

• Download flashplayer11_b2_playerglobal_080811.swc and rename it to playerglobal.swc

• Copy playerglobal.swc to [Flex 4.5 SDK Path]frameworks>libs>player>11.0 folder. FlashDevelop 4 will create this folder for you when setting up, if not create the folder and put the SWC here.

• Download and extract Away3D Core FP11 Examples

• Launch FlashDevelop and start a new AS3 Flex 4 Project. Set your project folder to Away3D examples folder you extract earlier. A warning message about folder not empty and template files will pop up, click OK to copy them. FlashDevelop will then generate the index file for you.

• Go to Tools>Program Settings>AS3 Context>Installed Flex SDKs. Fill in the location where you extract Flex 4.5 SDK.

• Go to Project>Properties>Class Paths. Click Add Class Path and browse to the location where you extract Away3D 4. Remember to target the sub folder name src, not the main folder.

• Go to Project>Properties>Output>Platform. Make sure it is Flash Player 11.0.

• Go to Project>Properties>Output>Test Project. Select Open document from dropdown list. Click Edit button and type bin\index.html

• Go to Project>Properties>Compiler Options>Additional Compiler Options. Key in -swf-version=13

• Done. Right click on any of Away3D example source files which can be found at src folder, choose Set Document Class, compile and profit!

The Tower of Hanoi or Towers of Hanoi is a mathematical game or puzzle. It consists of three rods, and a number of disks of different sizes which can slide onto any rod. The puzzle starts with the disks in a neat stack in ascending order of size on one rod, the smallest at the top, thus making a conical shape. The objective of the puzzle is to move the entire stack to another rod.

Game rules

The description from wiki might sound confusing, but the game is actually quite simple. Let’s look at the pictures that I quickly draw. The game start with 3 rods, A,B and C. Initially, all disks are stack on rod A, and you have to move all the disk in ascending order on rod C to win.

Of course, there are few criteria or rules when moving the disk around. First, only 1 disk can be move at a time. Second, only the top most disk can be move. Third, disk can only be placed on top of a larger disk.

Gameplay Programming

After looking at the game rules, you will find out that how easy the game logic can be script. Use 3 arrays to represent the 3 rods, which contain list of values that represent all the disks. The bigger the disk, the larger the number (or the other way round, depend on how you do the condition statement later). Then, use array/stack PUSH and POP function to “move the disk around”. In this case, the PUSH and POP function work exactly like what we want, removing and adding items from the top of the array/stack. Last, just do a condition check to see if a disk can be move on to another rod base on target rod top most disk size. To check the top most disk size, just POP it.

Recursive Solution

The puzzle can be solve by using a recursive function using the following algorithm. Assume N equals to total number of disks.
STEP 1) move DISKS N−1 from A to B.
STEP 2) move DISK N from A to C.
STEP 3) move DISKS N−1 from B to C.

Play The Game

You can play “Tower of Hanoi” in my labs page. I have include the recursive puzzle solving function as well.

Download

If anyone is interested, here is the Flash CS4 source files. Code might not be most optimized and tidy, but can be a good starting point for your project. This source is without graphics and music.
Tower of Hanoi FLA Source – 20KB

Reference

Tower of Hanoi Wikipedia Entry
Recursion: Towers of Hanoi

Adobe just released Flash Player 11 beta 2 earlier this month and their “Molehill” 3D API is now known as “Stage 3D“. This blog entry is not applicable now, so please refer to my new blog entry about this topic FlashDevelop Stage3D Away3D.

Install Flash Player Incubator

To view Flash Molehill content, you will need to install the alpha version of new flash player.

• Download and install Flash Player Incubator

Setup FlashDevelop with Flex Hero Framework and Away3D

To publish Flash Molehill content, you will need the new Flex Hero SDK. In my case, I will be using FlashDevelop and Away3D.

• Download and install Java runtime.

• Download and install FlashDevelop 3.3.4

• Download and extract Away3D Version 4.0.0 Alpha (Broomstick).

• Download and extract Flex HERO SDK build 4.5.0.19786.

• Download flashplayer_inc_playerglobal_022711.swc and rename it to playerglobal.swc

• Copy playerglobal.swc to [Flex Hero SDK Path]frameworks\libs\player\10.1. You will need to create the 10.1 folder

• Launch FlashDevelop and start a new AS3 Project. You can set your project folder to Away3D examples, if you downloaded them.

• Go to Tools>Program Settings>AS3 Context>Flex SDK Location. Fill in the location where you extract Flex Hero SDK.

• Go to Project>Properties>Class Paths. Click Add Class Path and browse to the location where you extract Away3D 4.

• Go to Project>Properties>Output>Platform. Change Target to Flash Player 10.1.

• Go to Project>Properties>Output>Test Movie. Select Open document from dropdown list. Click Edit button and type in FlashDevelop output location, usually bin\index.html

• Go to Project>Properties>Compiler Options>Additional Compiler Options. Key in -swf-version=13

• Add wmode: “direct” parameter for swfobject in the output HTML which usually at [Project Path]bin\index.html. Software fallback will be used if you do not include this parameter.

• Done. Right click on any of Away3D example source files which can be found at [Project Path]src, choose Always compile and GO!

Problem?

• If you get error message like Type was not found or Call to a possibly undefined method. In FlashDevelop, open the libs folder in the project file list, right click and select Add To Library for both lib_simplegui.swc and MinimalComps_0_9_9.swc
• If you get an error about LZMA Decoder, download it here. Then extract it to [Project Path]libs. In FlashDevelop, select apparat-lzma-decoder-1.0-RC9.swc in the project file list, right click and select Add To Library.
• If you cant view the MD5 and MD2 examples, most probably the assets path is wrong. Just copy the assets folder from [Project Path]srcassets to [Project Path]bin