{"id":24,"date":"2014-04-01T04:06:00","date_gmt":"2014-04-01T08:06:00","guid":{"rendered":"http:\/\/naplandgames.com\/blog\/2014\/04\/01\/agk-tutorial-online-high-score-system\/"},"modified":"2018-12-18T09:14:17","modified_gmt":"2018-12-18T14:14:17","slug":"agk-tutorial-online-high-score-system","status":"publish","type":"post","link":"https:\/\/naplandgames.com\/blog\/2014\/04\/01\/agk-tutorial-online-high-score-system\/","title":{"rendered":"AGK Tutorial &#8211; Online High Score System"},"content":{"rendered":"<div style=\"text-align: center;\">Originally published in the <a href=\"http:\/\/www.thegamecreators.com\/pages\/newsletters\/newsletter_issue_134.html\" target=\"_blank\" rel=\"noopener\">TGC Newsletter &#8211; April, 2014<\/a><\/div>\n<div style=\"text-align: left;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><span style=\"line-height: 1.5;\">In concert with the current competition to make an addictive game, we thought it might be a good idea to show how to set up an online scoring system. This tutorial will make use of AGK Tier 1 BASIC, PHP, and MySQL. You will need access to a server with PHP and MySQL capabilities.<\/span><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">To start, if you don&#8217;t already have a server set up, you can install XAMPP (<a style=\"color: #996699;\" href=\"http:\/\/www.apachefriends.org\/\" target=\"_blank\" rel=\"noopener\">www.apachefriends.org<\/a>) to your local PC. This could be used as your server, but you will need to allow access to outside networks which can be dangerous without the proper knowledge of security. I do suggest that you use XAMPP for testing before going to a live server.<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<h4 style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">The database<\/h4>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">After you have XAMPP set up you&#8217;ll need to create a database and table for the highscores to be recorded in. For this tutorial let&#8217;s call the database &#8220;<em>high_scores<\/em>&#8221; and the table will be &#8220;<em>my_game<\/em>&#8220;. You&#8217;ll also need to create a user for the database who has access to selecting (searching), and inserting the row. The table will need the following columns as a minimum:<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">\n<ul>\n<li style=\"list-style: square; margin-left: 0px; padding-left: 0px;\"><span style=\"line-height: 1.5;\">PID &#8211; the primary index for the database and set to auto increment.\u00a0<\/span><\/li>\n<li style=\"list-style: square; margin-left: 0px; padding-left: 0px;\"><span style=\"line-height: 1.5;\">NAME &#8211; this is where you&#8217;ll store the user&#8217;s name. I&#8217;d suggest limiting it to 12 characters or less and making this column a VARCHAR(13) type. The 13 is the maximum string length (12) plus 1.<\/span><\/li>\n<li style=\"list-style: square; margin-left: 0px; padding-left: 0px;\"><span style=\"line-height: 1.5;\">SCORE &#8211; an integer<\/span><\/li>\n<li style=\"list-style: square; margin-left: 0px; padding-left: 0px;\"><span style=\"line-height: 1.5;\">DATE &#8211; Type is TIMESTAMP and I like to use the &#8220;current date on update&#8221; feature so that whenever a new score is entered you know the date of entry.<\/span><\/li>\n<\/ul>\n<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><span style=\"line-height: 1.5;\">Another thing about the database is that you might want to clean it up every so often to delete scores that are below the top 10 high scores. You can either automate this process or do it manually. The database should be fairly lightweight so it really won&#8217;t need to be done often.<\/span><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<h4 style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">The PHP Scripts<\/h4>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">Now we&#8217;ve got the database all set up let&#8217;s take a look at a simple PHP script that will allow your app to send data to the database. We&#8217;ll call this script &#8220;<em>scores.php<\/em>&#8220;. Because the code inthese examples is substantial, theyhave been extracted into text files for you to view and also to copy to your own implementation.<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px; text-align: center;\"><a style=\"color: #996699;\" href=\"http:\/\/www.thegamecreators.com\/images\/newsletter\/issue134\/highscores_script1.txt\" target=\"_blank\" rel=\"noopener\">Click here for PHP Script #1<\/a><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">Note that this script checks that the score is a new high score and inserts it into the database at the same time. For a live application you might want to split this into two scripts: One that will initially check to see if the player&#8217;s score is a high score and then report back to the app. The app will then ask for the player&#8217;s name. Then finally you&#8217;d use the above script to insert the new high score. You&#8217;ll also want to put scripts like this into a protected directory on your server so that they cannot be abused. You can also add other mechanisms to the script to check for unreasonable scores.<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<h4 style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">Sending the Data<\/h4>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><span style=\"line-height: 1.5;\">For the next part we&#8217;ll examine how to send this data from your AGK app to the server. Here I&#8217;m assuming that you have placed the PHP script in a protected directory as I&#8217;ve suggested. For this example, the protected directory is called &#8220;<em>myProtectedDirectory<\/em>&#8220;, the user for that directory is &#8220;<em>myUserName<\/em>&#8221; and the password is &#8220;<em>myPassword<\/em>&#8220;.<\/span><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px; text-align: center;\"><a style=\"color: #996699;\" href=\"http:\/\/www.thegamecreators.com\/images\/newsletter\/issue134\/highscores_script2.txt\" target=\"_blank\" rel=\"noopener\">Click here for AGK Script #1<\/a><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">The above function is a very basic framework and will need you to add in user interface elements and what to do when the different events (high score is good, not a high score, and error) occur.<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<h4 style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">Retrieving the Scores<\/h4>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><span style=\"line-height: 1.5;\">Next let&#8217;s take a look at how to get the high score data back to the application.<\/span><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">Create a PHP script called &#8220;<em>getscores.php<\/em>&#8221; with the following contents:<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">\n<div style=\"text-align: center;\"><a style=\"color: #996699;\" href=\"http:\/\/www.thegamecreators.com\/images\/newsletter\/issue134\/highscores_script3.txt\" target=\"_blank\" rel=\"noopener\">Click here for PHP Script #2<\/a><\/div>\n<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">Back in AGK we will be able to fetch this string and output it with the following function. I used Chr(10) to separate each row by a new line which will allow it to be displayed easily in a\u00a0<em>Message<\/em>() window. You may want to use something different and implement AGK&#8217;s\u00a0<em>GetStringToken<\/em>() function to parse the data to your needs.<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">\n<div style=\"text-align: center;\"><a style=\"color: #996699;\" href=\"http:\/\/www.thegamecreators.com\/images\/newsletter\/issue134\/highscores_script4.txt\" target=\"_blank\" rel=\"noopener\">Click here for AGK Script #2<\/a><\/div>\n<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<p>&nbsp;<\/p>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><a href=\"https:\/\/naplandgames.com\/blog\/wp-content\/uploads\/2014\/04\/hiscore-1.jpg\" rel=\"lightbox[24]\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-124\" src=\"https:\/\/naplandgames.com\/blog\/wp-content\/uploads\/2014\/04\/hiscore-1-193x300.jpg\" alt=\"hiscore\" width=\"193\" height=\"300\" srcset=\"https:\/\/naplandgames.com\/blog\/wp-content\/uploads\/2014\/04\/hiscore-1-193x300.jpg 193w, https:\/\/naplandgames.com\/blog\/wp-content\/uploads\/2014\/04\/hiscore-1.jpg 250w\" sizes=\"(max-width: 193px) 100vw, 193px\" \/><\/a>Notice that the function\u00a0<em>GetHighScores<\/em>() is very similar to\u00a0<em>SendScore<\/em>(). If you plan to use HTTP connections in your program, you&#8217;ll likely want to separate out the first 21 lines of those two functions into their own function. The\u00a0<em>GetHighScore<\/em>() function is very basic and needs a bit of polish before it is ready to be used in a game, but it serves its purpose for this tutorial. Another item you may want to consider is what to do when a player might have more than 1 high score in the top ten. On old arcade games this would likely just allow them to have multiple entries on the list which might allow them to dominate the list. Instead you might want to first check the database for that user&#8217;s name and then only update their score if they beat their last high score. Another consideration to make is whether you want to censor user name entry. Since the list is public you probably don&#8217;t want a bunch of vulgar names showing up on the list.\u00a0<a style=\"color: #996699;\" href=\"http:\/\/banbuilder.com\/\" target=\"_blank\" rel=\"noopener\">Ban builder<\/a>\u00a0is a very simple and easy to set up filter that will allow you to censor name input. It takes less than 5 minutes to set up. Also make sure to look over the word list before making it live because there are words like &#8220;hell&#8221; in there that might be a part of someone&#8217;s name like &#8220;<em>shelly<\/em>&#8220;.<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">Although the easiest and safest way to maintain an online high score system is to use your own server, there is at least one free alternative that I know of: Google Docs. With Google Forms you can set up a form that will allow you to pass data to it via a post method which will store the data in a Google Spreadsheet. You can then turn around and query that spreadsheet via a URL. An example of querying by URL is\u00a0<a style=\"color: #996699;\" href=\"http:\/\/acrl.ala.org\/techconnect\/?p=4001\" target=\"_blank\" rel=\"noopener\">given here<\/a>. To send data to a Google Form via post you&#8217;ll need to create a form and then determine the form&#8217;s key and closely examine the source for it to to find the names of the post variables. The response from the query will be a json string which means that you&#8217;ll need to do a bit of parsing to get at the data you need. While Google docs is an alternative to having your own server, it is likely a bit more work to get it up and going. It may also be subject to abuse by users if they are able to gain your spreadsheet&#8217;s access key.<\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\"><\/div>\n<div style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21.600000381469727px;\">There are also some cheap servers out there that you can get. Digital Awakening on the forums brought\u00a0<a style=\"color: #996699;\" href=\"http:\/\/www.one.com\/en\/product\" target=\"_blank\" rel=\"noopener\">One.com<\/a>\u00a0to my attention. Right now it appears that they&#8217;re offering one year free which includes a domain registration plus a small setup fee. Quite worth it if you&#8217;re just looking for a small server to handle things like scoreboards. Phaelax from the forums has also made a free online high score system available to all\u00a0<a style=\"color: #996699;\" href=\"http:\/\/forum.thegamecreators.com\/?m=forum_view&amp;t=210569&amp;b=41\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/div>\n<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_24\" class=\"pvc_stats all  \" data-element-id=\"24\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/naplandgames.com\/blog\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Originally published in the TGC Newsletter &#8211; April, 2014 In concert with the current competition to make an addictive game, we thought it might be a good idea to show how to set up an online scoring system. This tutorial will make use of AGK Tier 1 BASIC, PHP, and MySQL. You will need access to a server with PHP and MySQL capabilities. To start, if you don&#8217;t already have a server set up, you can install XAMPP (www.apachefriends.org) to your local PC. This could be used as your server, but you will need to allow access to outside networks&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/naplandgames.com\/blog\/2014\/04\/01\/agk-tutorial-online-high-score-system\/\">Continue reading<span class=\"screen-reader-text\">AGK Tutorial &#8211; Online High Score System<\/span><\/a><\/div>\n<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_24\" class=\"pvc_stats all  \" data-element-id=\"24\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/naplandgames.com\/blog\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"a3_pvc":{"activated":true,"total_views":1637,"today_views":0},"_links":{"self":[{"href":"https:\/\/naplandgames.com\/blog\/wp-json\/wp\/v2\/posts\/24"}],"collection":[{"href":"https:\/\/naplandgames.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naplandgames.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naplandgames.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naplandgames.com\/blog\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":4,"href":"https:\/\/naplandgames.com\/blog\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":334,"href":"https:\/\/naplandgames.com\/blog\/wp-json\/wp\/v2\/posts\/24\/revisions\/334"}],"wp:attachment":[{"href":"https:\/\/naplandgames.com\/blog\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naplandgames.com\/blog\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naplandgames.com\/blog\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}