Banner
Flash / PHP / MySQL Score System

This tutorial is designed to give flash game creators a relatively simple way to create a high score system in their games. I have included a file that you can download and set up on your server that will allow you to create a high score table in your own MySQL database.

Note that this score system is far from perfect. As with many score systems in flash, it isn't very secure. In addition, I haven't tested it under many verions of PHP / MySQL, so if you encounter any problems please e-mail me at This e-mail address is being protected from spambots. You need JavaScript enabled to view it and I will see what I can do to help get it up and running for you.

Before you begin:


I strongly urge you to consider any one of the off the shelf high score scripts available online. Here are a few highly reputable sites that provide this:

The MochiAds leaderboard allows you to distribute your .swf file on any site and it will work, the Kongregate API is designed to be used on their site, but it has the advantage of allowing you to create XBox 360-style "achievements". Both terrific solutions.

Step 1: Preparing your server

The first thing you will need to do is download this file:

Tutorial 1 Source Files

Once you have downloaded and unzipped the source files you will need to upload the "installScores.php" file to your server. Make sure you put this file in the same place where you want the flash game to call to to add scores.

You will have to make sure that the folder you are saving the file to is set to allow scripts full read / write access. This permission is set in different ways on different servers, if you do a search for "ftp permission 777" on either Google or Yahoo, you should be able to track down a method easily enough. Once those permissions have been set your server is basically ready to get started.

Step 2: Configuring the high score table

Once you have finished step 1 you will need to do a little digging around. For this step you will need to track down the following information:

  • Your MySQL server location
  • MySQL Database Name
  • MySQL Database Login
  • MySQL Database Password

Often this information is sent to you by your web host when you first set up your account, however insome cases you may need to set up a new database on your server. How this is done largely depends on your web host, so I won't go into it here. Basically if you don't know the above information for your server, you can always get it by contacting your web host and asking for your MySQL login information.

Once you have all of the above information ready, you can navigate to the "installScores.php" page that you copied to your server in step 1. If this page was put at the root of your site, for example, all you need to do is open up your web browser and navigate to http://www.yoursitehere.com/installScores.php.

Note that your web server must support PHP in order for this page to work. If you aren't sure if your server supports PHP, you can always check the hosting plan details list at your web hosts sales page.

Once you are at the "installScores.php" page you should see something that looks like this: Install Scores Form

This form will allow you to create a new table in the MySQL database, as well as generate the code that you will need to add to your flash game to send scores. In addition, it will generate sample code that will allow you to view the top ranked scorers on the site.

Here is where the information that I asked you to gather earlier will come in useful. Fill in all of the fields shown above. Here is a brief description of what each field is:

  • Database server: this field is the location of the MySQL database. In many cases you can keep this as "localhost" and it will be fine. You can use a full domain name here or an IP address as well.
  • Database name: Sometimes you may have several different databases on the same server. This allows you to select which one you would like to use.
  • Database login: This is the user name you use to get into your MySQL database.
  • Database password: This is the password you use to log in to your MySQL database.
  • Create Table Name: This can be anything you want, really. If you want to have tow different games that each had their own scores, this is the field that you would change for each game. For example, if you had a Match 3 type game and an action game, you could put match3 or actionGame in this field. You should not use any spaces or special characters in this field.
  • Number of Scores to Show: This defines how many scores should be shown in the high score list. If you set this to 1 the list will only ever show the higest scoring player, if you set it to 100 you will have a long list of the top 100 scorers.

Once you have entered all of the required information, press the "Submit Query" button and wait a few seconds, when the page is done loading you should be able to move on to step 3!

Step 3: Adding score code to game

Now that you have created the score submission page and the MySQL database tables, all you need to do is copy the code provided on the results page into the proper locations. In this step we will examine how to get the code from the first box working in your flash application.

Somewhere in your game there will be a variable that keeps track of the score. Inside the zip file for this tutorial you will find a .FLA file called "CatchIt.fla". Inside this game file, on the top layer is all the code for the game. Open the code window for that frame and you will see a line that says, "Add your sendScores function between these lines". Copy the code from the first grey box on the "installScores.php" results page into the blank space between the dashed lines. (Hint: the code you need to copy starts with "function sendScores".)

Once you have completed this, test the movie, you should be able to submit scores to your remote server directly from the testing environment.

To implement the score system in a game of your own creation, you would still copy the sendScores function into your flash file, but you would have to create your own call to the function when the game ends. In order to do this, you will need to pass the sendScores function the name of the player and the player's score. The resulting function call should look like this:

sendScores("EgoAnt",15000);

Now, one other thing... In the sample game included with the tutorial files you will need to make some modifications to the sendScores function in order for the game to work properly. To begin, find the following lines in the default sendScores function:

score_result.onLoad = function(success:Boolean) {
	if (success) {
		trace(this.scoreIn);
		trace(this.scoreError);
	} else {
		trace("Error connecting to server.");
	}
};

Replace those lines with the following:

score_result.onLoad = function(success:Boolean) {
	submitScoreClip._visible = false;
	startGameClip._visible = true;
	setScore(0,0);
	setLife(0,100);
	if (success && this.scoreIn == "1") {
		systemText.text = "Score sent!";
	} else {
		systemText.text = "Error sending score to server.";
		trace(this.scoreError);
	}
};

This demonstrates how you can follow a score submission with code to reset your game.

Step 4: The high score table

Finally we will examine how to display the scores on a PHP page. In the second grey box on the "installScores.php" results page is a block of code that starts with <table border="0" cellspacing="4" cellpadding="4">.

In order to display the table of high scores you will need to copy this block of code into a php page. As you can see on the sample page for this tutorial, you can put this table on the same page as your game, or you can put it into an entirely seperate page.

Once you have added the code to the page where you want the scores to be displayed you will need to play the game through once to add a score to the database. Then, navigate to the page where you copied the score table to see your high score displayed!
NOTE: It is highly recommended that you delete this page from your server after using it, as it can be used as a point of attack by hackers.

Step 5: The high score table in flash

Ah, step five. I just added this because I realized I didn't really show how to display the score in the flash file.

So I have changed the flash file and the installer. Now an additional file will be written, getScores.php will pass the current list of scores to the flash file.

If you look on the first frame of the new sample flash file you will see code that loads the variables from the getScores.php page and then parses through them and adds their values to the score table.


blog comments powered by Disqus
 

Share

Related Articles

Development Tutorial Updates

EgoAnt Development Tutorials

Game Profile

All About Animals

This game was also designed by DevBox, with me doing the coding.

Play All About Animals