Match 3 Game algorithm Part 6 - A real Android Match 3 Game demo

Sorry for the late. The release date for the Match 3 Game as stated last time might be delayed a bit.

HORRAY! The Match 3 Pop Saga is now available in the Google Play Store Now!

After several weeks of hard work, i have finally come out with a 'sample' of the Match 3 Game, with the Candy Crush Saga as the main reference, and the algorithms stated previously. (The "Saga" is imitated to gain some SEO points, hopefully... oops)

However, different from the Candy Crush, my Match 3 Pop Saga only has a total of 9 stages. Furthermore, it includes a bit of RPG elements: Level up. Basically, the more you play (popping more balloons), the higher levels you are. And the higher levels will reward you a higher score per pop (and time too!). Interesting huh? :)

Note that it is a balloon, not a colorful Easter egg.
I am not a graphic designer. The pictures are obtained from devianart.

Something to note is that, the 'striped candy' now is a glowing balloon (right, simple animation), while the 'wrapped candy' is something like this (bordered):

The maximum level in the Match 3 Pop Saga is 15 (which i think you won't need that for completing all the stages with 3 stars).

Finally, thanks for trying this game. Feel free to drop some feedback, either on the game flow, or the game experiences~

Running Man Quiz solution - Background music

In the Running Man Variety Show, each Running Man member has unique background musics that are played during the races. For example, when Lee Kwang Soo incurs bad luck / awkward situation, his music will appear. When Yoo Jae Seok shows some strategic skills, his Yoo mes Bond music will be played. If you have been watching the Running Man all the while, i am pretty sure you will be able to recognize them easily :)

Hence, in the Running Man Quiz, i purposely included some music clips to the 'Music' section. Be honest, i got some original sources from here. But to make it more complete (for the need of the 'solution' of the app), i re-organize the list here:

1. Yoo Jae Seok

• James Bond's Movie Theme
• Extreme Ways
• Pink Panther Theme
• Step By Step

2. Lee Kwang Soo

• Saint Agnes and the Burning Train
• Theme of False Emperor
• No Matter How i think about it 
• Public Enemy Main Theme  (This music appears when Lee Kwang Soo is in the Betrayal Mode)

3. Gary

* (All the musics of are from the Gary's self established Hip-hop duo LeeSsang)

• Woman who cannot break up, man who cannot leave
• You are the answer to a guy like me
• Our Meeting
• Blues

4. Song Ji Hyo

• Angry Bird
• Tears
• Hot Issue
• Cheesy/Ticklish/Ganjireobgeh

5. Kim Jong Kook

• What we need is a Hero
• This is Sparta

6. Haha

• Perfect Love
• Pororo
• Rosa

7. Ji Seok Jin

• The House You Live In (JYP)
• I Swear
• Angel (Romeo and Juliet OST)

8. Easy Brothers

•  Super Monkey Return Kidding

You may search and listen to the musics from Youtube. Then, you will be able to get 5 R stickers for all the quizzes :)

Running Man Quiz app is in the Google Play Store now!

Hooray!
Finally, there is an app "Running Man Quiz" available in the Google Play Store.

For those fans of the Running Man Variety Shows, now it is time to show your craziness towards the Running Man - answering all the quizzes in the app :)

Overall, there are four categories of quizzes:

 

 

a) Relationship

- Basically, you are required to guess the names, nicknames of the RM members. Remember, the staffs are included too (eg: Who is the Floor director of the RM show?)

 

 

 

b) Music

- If you are really a Running Man Show maniac, this is definitely not a problem to you. Still remember the "Angry Bird" background music? Which member does the music belong to?

 

 

c) Medal

- Episodes by episodes, you will be asked about who (or which team) won the final game? (eg: who is the last survival of the name tag tearing game in the episode xxx?) I admit this is a bit challenging. But fret not, hints are given sometimes. :)

 

 

d) Storyline

- Similar to the Medal category, the quizzes in the storyline are based on the episodes. Here, the questions will be more details, and definitely test your memories, lol.


So, what to hesitate? Quickly grab the Running Man Quiz game at the play store~

Actionscript ProgressBar DIY in Starling Framework

The Starling Framework doesn't come with the built-in Progress Bar, but the Feathers framework does.

However, i find that it isn't that hard to create a progress bar ourselves, and to be used with the Starling Framework.

Here, what we need to do is to create a ProgressBar class:

    public class ProgressBar extends Sprite
    {
        private const BAR_WIDTH:int = 100;
        private const BAR_HEIGHT:int = 30;
        public var qdMax:Quad; // a static bar
        public var qdMove:Quad; // a moving bar
       
        public function ProgressBar()
        {
            this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        }
       
        private function onAddedToStage():void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
           
            qdMax = new Quad(BAR_WIDTH,BAR_HEIGHT,0xf0f0f0);
            qdMove = new Quad(1, BAR_HEIGHT, 0x990000);
            addChild(qdMax);
            addChild(qdMove);
        }
       
        public function updateBarMove(_ratio:Number):void
        {
            qdMove.width = (_ratio)*qdMax.width; //adjust the width
        }
    }

Here, we have a very simple class. The main thing to note here is that, there is a function updateBarMove which takes the parameter of a 'ratio', ranging from 0 to 1, and is to be called from time to time to update the visual bar status. Any example of using this? Here it is:

How to show the progress bar while playing the audio files in Starling Framework (AS3)?

Yup, with the class defined above, we can easily display the progress of the audio files when it is played or paused. Here's the original source as your reference. Now with the onEnterFrame function, it can be performed with ease.

So, assume that you have a button switching from "play" to "pause" and vice versa. When it is "played", we dispatch the Enter Frame Event, as shown below:

      public var pBar:ProgressBar;
    public var sound:Sound;
    public var sc:SoundChannel = new SoundChannel();
    public var musicLength:int;
       private function onEnterFrame(e:EnterFrameEvent):void
    {
       var ratio:Number = sc.position/musicLength;
           
       if(ratio >= 1) //when the audio playing finishes
       {
           sc.stop();
           sc = sound.play(0);
           sc.stop();
           this.removeEventListeners(Event.ENTER_FRAME); //stop updating
       }
           
       pBar.updateBarMove(sc.position/musicLength); //passing a ratio
   }

Here you go, the progress bar is created!

How to load TextureAtlas with the AssetManager in Starling Framework?

From the Hsharma's tutorial, we have learned that using a Sprite Sheet to load the textures is crucial to ensure a great performance. Next, you may want to ask, if the Sprite Sheet is too big to be loaded at run-time, are we able to tell the users, "hey, we are loading the resources, please wait a minute" to serve as a buffer before we proceed to the next screen/activity?

Good news. Tracking the process of loading the textures or other assets is made possible with the AssetManager class in the Starling Framework. In fact, the original tutorial could be found at here. In this post, particularly, i would like to show how to load TextureAtlas with the AssetManager.

Similar to loading the normal textures, to begin loading the TextureAtlas, let's have a class EmbeddedAssets.

public class EmbeddedAssets
{
     // Texture
     [Embed(source="../media/graphics/mypng.png")]
     public static const mypng:Class;
       
     // XML
     [Embed(source="../media/graphics/myxml.xml", mimeType="application/octet-stream")]
     public static const myxml:Class;
}

In the EmbeddedAssets class, we embed the TextureAtlas and the TextureXml as usual. Yup, just embed them as usual. Then, we could just use the AssetManager to load it (with the enqueue function).

public var assets:AssetManager = new AssetManager();

.....
assets.enqueue(EmbeddedAssets); //yes, enqueue the entire class
assets.loadQueue(function(ratio:Number):void
 {
    trace("Loading assets, progress:", ratio); //track the progress with this ratio
    if (ratio == 1.0)
          initGame();
 }); 

 Finally, in the initGame and the subsequent functions, we are able to load the texture with the function getTexture. For example, assume that you have a texture named "playButton" in the TextureAtlas, you can easily load it with the line below:

 var texture:Texture = assets.getTexture("playButton");

Isn't that very convenient?

Creating a timer with the Actionscript onEnterFrame

For those who are Actionscript-savvy, the "onEnterFrame" Event is a familiar term. It is in fact an elegant way of handling the animations in the game.

This post, is particularly a demo of how do i use the AS3 "onEnterFrame" to replace the class Timer (which is in the package flash.utils). You might think that this is redundant. But i really favor the way the "onEnterFrame" perform this with ease, while you can implement the other animations simultaneously.

Here's a snippet of the "onEnterFrame" function. What it does is that, the object is able to perform an animation A on each frame, while performing another animation B at an interval of one second (adjustable).

private var timePassed:Number = 0;
private var startInt:int = 1;
private function onEnterFrame(e:EnterFrameEvent):void
{
     timePassed += e.passedTime;
     if(startInt < 10)
    {
         //doAnimationA();
         if(Math.floor(timePassed) == startInt)
        {
             startInt++;
             //doAnimationB();
        }
     }
     else
    {
        this.removeEventListeners(Event.ENTER_FRAME); //clean the event
     }
 }

One thing to note is that, the data type of the timePassed has to be "Number", but not "integer". In the code, after passing 10 seconds, the enterframe event is removed.

Sound effect resources for Android Games

In case you are wondering where to look for free sound effect resources for Android Games, here i have a recommended link.

There are 3 main reasons i pick this sound effect resources instead of the others:

a) Resourceful solutions

The different types of sound effects are categorized clearly at the left, listing:

• Pickup/Coin - eg: Mario Coin
• Laser/Shoot - eg: Space shooter
• Explosion - eg: tower defense bomb
• Powerup - eg: RPG level up
• Hit/Hurt - eg: Streetfighter / King of fighter attack
• Jump - eg: Mario jump
• Blip/Select
• Randomize
• Mutation

b) Intuitive and flexible

By clicking the button, it will generate a sound effect of your choice. Each click will generate a different sound. Basically you can perform unlimited clicks until you hear the one of your favorites. Furthermore, Each sound effect generated is tunable with a number of attributes:

• Attack Time
• Sustain Time
• Punch
• Decay Time
• Compression
• Frequency
• Frequency cutoff
• etc ....

c) Free for all

If there is a Facebook "Like" button, or a Google "+" button, i won't be hesitating to share this to all my friends. You can easily export all the sound effects generated for free. YES, you are not reading the typo. There are really some Samaritans out there researching and creating free products for us!

I believe most of us are not sound engineers, so having this resource would be definitely a helpful one.

Note: If you are going to load the sound effects into the Flash Builder, remember to perform the up-sampling / down-sampling the frequency of the audio files with the appropriate software, as mentioned in previous post.

How to create the Monopoly Deal Card Game?

Yesterday, I published the Monopoly Deal Mini Minipoly Deal, a lite version of the Monopoly Deal Card Game.

Frankly, i was surprised to find that that isn't an official Monopoly Deal Card Game published in the Google Play Store. Furthermore, the information of the Monopoly Deal's algorithm is very limited from the search engines. A brief search of "How to create the Monopoly Deal Card Game" would return a dismayed result. Hence, curiosity makes me create this similar card game. And only after several weeks of efforts, I came to know the complexity and the challenges behind. To make the explanation clearer, i summarize the difficulties into several points:

a) Too many cards to fit into the screen

Apart from the 4 rule cards, there are a total of 106 cards comprising CASH, PROPERTY, and ACTION. To be more specific, there are around 10 different colors of property cards which may be placed on the table. How to design the graphic user interface (GUI) to accommodate so much spaces for different players? In my Monopoly Deal Mini, i have reduced the card numbers and the card sizes to compromise this issue. But i know it isn't a perfect solution.

b) Too hard to make a great computer Artificial Intelligence (AI)

There are too much variations in the game play. How to tell the computer to decide placing property first before an action, or vice versa? How to know a Sly action first before a Rent action could impact more to the opponents? What kind of payments are the most advantageous to his own? When to become more offensive or defensive? It seriously depends on how much cards on his own hands, tables and those from the opponents' table. Here i have to say my AI is relatively a dumb one... -.-

c) Exception cases are everywhere

There is no general algorithm for this Monopoly Deal Card Game. We have property wild cards that are movable and adjustable at any time. We have Rent actions, Sly Deal, Deal Breaker, Double the Rent, House, Hotel, Pass and Go, Just Say No, and etc which are to be handled differently, and are not categorize-able. Not every property set can own a house or a hotel. How to compute the highest potential Rent? etc etc

In short, only after creating the Monopoly Deal Card Game myself, i realize how complicated this Card Game is. I used to playing this game with lots of fun, but making this to appear as a successful Android game is still to far to achieve....

Minipoly Deal is in the Google Play Store now

Rejoiced! The long awaiting Monopoly Deal Card Game now has a lite version in the Google Play Store - Monopoly Deal Mini Minipoly Deal (Updated app name)

First, I admit i am just a fan of this card game. :)

Be honest, this game is created out of curiosity, as i am one of the Monopoly Deal Card Game fans as well. However, compared to the original Card Game, my Minipoly Deal (the mini version of the Monopoly Deal) is relatively having lesser cards. Also, to fit into the mobile devices, i have made the CASH and ACTION cards spherical, while the PROPERTY cards are in squares instead of rectangles.

The game rules are still remained: You will win the game if you collect three or more property sets. During the game play, you can perform actions to steal/request the cash and the properties from your opponent. At the current version, the Minipoly Deal only has a 1 vs 1 mode, which is player versus computer. To have better understanding of how to play the game, kindly go to the Help section.

Here's the home page of the game:

Don't you think the top red logo is familiar? There you go, i was trying to imitate the back side of the original Monopoly Deal Card.

So, what are you still waiting? Let's download the game and drop some feedback. Your suggestions will be appreciated :)

Brave Heroes - Heroes comparison

Previously, I have posted the Brave Heroes Game Tips with a number of critical information...
But that was for the early stages. After continuing to play the game, I think it is more appropriate to add more points in the game play experience, especially the Heroes comparison.

As you can notice in the picture, i have 2 Melee Heroes reaching the max level of 45: Penguin and the Gloria. And here's a brief comparison

First, please ignore the Enchant, though it may add a little but negligible impact (from my upgrades).

Attribute	Penguin	Gloria
Attack	9303	11662

Note: the difference of Attack is around 2400

In short, upgrading the Gloria is more crucial than upgrading the Penguin. Alright, you will say that it is normal to make the subsequently unlocked Heroes stronger. I was thinking the same. And i am quite shocked to see the huge gap between the Heroes, especially the one shown below:

Yes, it is the Ninja Jin VS the Nebiross (Range/Distance Heroes)

Attribute	Jin	Nebiross
Attack	9028	27613

Note: the difference of Attack is about 18000!!! (200% - 300% of the Jin)

Here, i would like to mention that, the MAX LEVEL of Nebiross is higher than the Jin, which is 50 instead of 45! (in fact, i believe the Heroes from the second row can reach higher maximum levels)
Furthermore, it is noteworthy to remember that, the Nebiross has two very critical skills.
Skill 1: Shoots an arrow piercing through the enemy, with Attack +200%
Skill 2: Increases the Critical Hit chance by 30%

Basically, if the Nebiross combines both the skills, his attack can reach 27000 x 2.5 x 2, which is more than 100,000 per arrow, and penetrating through ALL the enemies in front! What an awesome combination! It is with this hero that i can survive through Level 40++

And yes, Nebiross is the hero that you can buy with Gold (not diamond) - $500,000, and the Gold can be obtained through the strategies i mentioned before. And of course, i still didn't spend any penny on this game :)

Guess Car Brands - a beginner's Android game

Few months ago, i published a relatively simple Android game - Guess Car Brands.

The objective of creating the game is to learn some basic algorithms, such as how to generate the random alphabetical letters when a random car brand is popped up. At the end of the day, it isn't that complicated. In fact, the approach of creating a unique random numbers has been posted before. As long as the letters are being 'shuffled', it has achieved its original goal.

I admit that this Guess Car Brands is a kind of imitation, of the another game - "Guess Car Brand". Note - my app has an 's' at the end.

It was hoped that in line with the popularity of the game, my game can gain some fame from it. However, it seems that i have been so wrong... oops

Anyway, I just imitate the logo and the game play, but not duplicate the images. Also, i do add more variations into the game play:
a) first mode - choose the country of the cars that you want to guess.
b) second mode - the real car guessing mode. In this mode, there are 25 cars picked from the total, each with 4 scores. At the end, your performance is recorded.

Interestingly, you can use hints when guessing car brands. The hints can be obtained from the practicing in the first mode. However, once you have consumed the hints, the highest score would become only 2.

More and more car brands would be added in the future. Leave a message if you see any room for improvement.

How to set the frame rate in the Flash Builder Actionscript project?

In some of the games such as Tower Defense or RPG, a consistently high frame rate is necessary to maintain a smooth display of the animations. By default, an Actionscript project in the Flash Builder has a frame rate of 25. This is barely enough for a few movements on the screen. If there are tonnes of bullets or enemy armies bombarding the screen display, the players will experience a horrible game play experience (and most importantly, rate your game badly....)

So, setting the game frame rate is necessary. To do that, you need to include a simple SWF meta tag above your class definition (and AFTER your library import), as stated below:

package
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.geom.Rectangle;
   
    [SWF(frameRate="60", width="640", height="960",backgroundColor="0xffffff")]
    public class YourGame extends Sprite
    {
        public function YourGame()
        {

           ....

In the code, make sure you have your SWF meta tag written just before your Class. Here, a frame rate of 60 is chosen. Apart from the frame rate, you can set other configurations as well, such as width, height, background color, etc.

One thing to note is that, the effect of the frame rate "may not" be reflected if you are in the debugging mode with the Adobe AIR simulator. Therefore, don't be surprised if you still observe some lagging when debugging the game. Everything will be alright when you "Export Release Build".

How to crop an image with the Starling Framework?

So this is the post of how to perform image cropping on run-time in Starling Framework (AS3).

Allow me to grab any random image from the web for demo purposes, as below:

Question: how to crop the car image above? (Its original size is 300px width, 150px height). The final result is only the center car image.

The action is similar to cropping it with Microsoft Office Picture Manager, as shown below:

But how is it done in AS3 code?

First, let's have a look at the important function setTextCoords stated here.

Sets the texture coordinates of a vertex. Coordinates are in the range [0, 1].

To put the explanation of the function in a clearer picture:

Here, the vertex ID (first parameter) of a picture starts from top left, which is 0.
vertex ID 1 - Top right
vertex ID 2 - Bottom left
vertex ID 3 - Bottom right

Then, the coordinates (second parameter) simply means at which point of the image should the vertex be located. The allowed coordinates are in the range of [0,1]

So, let's see how we want to crop the image. As we can see above (the picture of Microsoft Office Picture Manager), i crop the image with the following criteria:
a) Left: 50px
b) Right: 50px
c) Top: 35px
d) Bottom: 10px

By converting them into the proper value (from 0 to 1), now we have:
a) Vertex 0th: (50/300, 35/150)
    - coordinates (1/6, 7/30)
b) Vertex 1st: ((300-50)/300, 35/150)
    - coordinates (5/6, 7/30)
c) Vertex 2nd: (50/300, (150-10)/150)
    - coordinates (1/6, 14/15)
d) Vertex 3rd: ((300-50)/300, (150-10)/150)
    - coordinates (5/6, 14/15)

Hence to crop the image with AS3, we just need the few lines below:

var bitmap:Bitmap = new car(); //assume you have embedded the car image
var myTexture:Texture = Texture.fromBitmap(bitmap);
var img:Image = new Image(myTexture);
img.setTexCoords(0, new Point(1/6, 7/30));
img.setTexCoords(1, new Point(5/6, 7/30));
img.setTexCoords(2, new Point(1/6, 14/15));
img.setTexCoords(3, new Point(5/6, 14/15));
addChild(img);

Isn't that easy? At last, remember to set the width and height of your final image. Else, the cropped image will have the size similar to the original one (which would be undesirable).