BTEC Extended Diploma in Game Development
Unit 20: Computer Games Platforms and Technologies
Assessment 3: Blackjack Game on Mobiles

Mobile Games (Task 1)

First of all before I start with anything I’m going to have to point out that iPhones and Android devices can vary in immensely in terms of capability. I’ll be using the Samsung Galaxy S6 Edge, one of the latest Android models released on the market. Please note that setting up GameMaker Studio so that it works easily with Android devices can be a tricky procedure. However, first of all I will be showing you the technical specs for the Samsung Galaxy S6 Edge.

Name: Samsung Galaxy S6 Edge Manufacturer: Samsung Electronics Series: Galaxy S series Type: Touchscreen smartphone Form Factor: Slate Dimensions: 142 mm (5.6 in) H             70.1 mm (2.76 in) W             7 mm (0.28 in) D Weight: 132 g (4.7 oz) Operating System: Android 5.0.2 "Lollipop" CPU: Exynos 7420 Octa-core, 2.1 GHz Quad + 1.5 GHz Quad GPU: Mali-T760 MP8 Memory: 3GB LPDDR4 Storage: 32, 64, or 128 GB Battery: 2,600 mAh Display: 5.1 in (130 mm) 2560x1440 pixel (577 Pixels per inch) Quad HD Super AMOLED Gorilla Glass 4 Rear Camera: 16 megapixel Sony Exmor RS IMX240, f/1.9, 2160p@30 frames per second (fps), 1080p@60fps, 720p@120fps, Auto HDR, optical image stabilization, tracking autofocus, manual focus, LED flash Front Camera: 5 MP, 1080p@30fps, dual video call, Auto HDR

To start working with GameMaker Studio on your Android device you’ll need to download both Android SDK and Android NDK. You’ll also have to install Java SE Development Kit (JDK). Below will be a quick how-to procedure in order to explain how to do this.

Install the Android SDK

1.   Run the Android SDK installer. You will be asked to install the Android SDK to the path "C:\Program Files (x86)\Android\android-sdk". We strongly recommend that you choose something with no spaces in the path, such as C:\android-sdk\, as the default path can cause problems with the actual Android updater program itself.

2.   Once you have successfully installed the Android SDK you will be given the option to start the Android SDK Manager. This you must do, as it will install additional tools and device specific functions. When it starts you should select only Android SDK Platform Tools, Android 2.1 (API 7), Android 2.2 (API 8), Android 3.2 (API 13), Android 4.0.3 (API 15), as well as the most recent version of Android (selected automatically by default by the manager). Please don't just select everything to be installed, as this will a) needlessly waste your bandwidth and HDD space, and b) might cause conflict errors during builds.

3.   It should be noted that after installing these files the Android Download Manager may inform you that there are other files to be installed and that you should close and prelaunch the SDK Manager, so please do this if asked.

4.   It is advised to check the revision details and see if you don't already have the selected update installed. You should also set the PATH variable to allow you to run the command line tools (more information here).

Your Android SDK Manager should look something like this:

GameMaker Studio Basic Setup

Once you have correctly installed the Android tools and are ready to proceed, you must then install GameMaker Studio and do the following:

1.   Launch GameMaker Studio

2.   Enter your License Key

3.   Create a new Project

4.   Select File > Preferences > Web Server

5.   Web Server Port: This is set to 51268 to 51280 by default. There is no need to change this unless these ports are already in use

6.   IP Allowed List: Enter your local IP address range in the format xxx.xxx.xxx.0/24. For example: 192.168.1.0/24

It is essential that the Android device (or devices) you are using with GameMaker Studio are configured to work properly with the software. It is recommended that there is a direct USB connection from the PC to the phone/tablet. The WIFI network on the Android must also be the same as the PC’s WIFI network.

1.   On your Android device, browse to Settings > Applications > Development and enable USB Debugging

2.   Connect your Android device to your PC via the data cable

3.   The device drivers should be installed automatically at this stage (if they aren't already), but if they are not, then please refer to your device manufacturer's support information to locate and install the correct ADB drivers. It is very important you get ADB drivers, not the standard consumer ones.

4.   Now test your phone driver to confirm if it's correct. Follow the appropriate

·          If you have already set up the PATH variable as mentioned above, simply Windows Key and R to open a new Run window and type "   CMD" (no quotes) and hit enter, then type "ADB devices"

·          Go to your Android install folder and then the "platform-tools" folder inside it (e.g., C:\android-sdk\platform-tools) and then hold down the shift key and then right-click in some empty space and choose "Open a command window here". In the new command window, type "ADB devices" (without the quotes).

There is one more and final important step that needs to be taking before games can be created for Android devices with GameMaker Studio, and that is to set up the preferences, which can be found in File > Preferences > Android. Before beginning you must also make sure that the Android device is connected and that the following steps above have been followed.

If all has gone correctly, the first three sections should have been filled in automatically by GameMaker Studio itself. This now leaves you to create a private KeyStore from the KeyStore Tab.

The KeyStore is a file that will be used to "sign" all your Android device apps in which they must be filled in with all of the correct details. It is also suggested and highly-recommended that this file is backed up.

·          Name: This is the filename of the KeyStore (note : Not your name or the company name!)

·          Password: Your security password for the KeyStore file which must be at least six characters long.

·          Alias: This is the name of the "user" for this keystore and can differ from the Name field above.

·          Password: The same password as written in the Password field two above. This is a long-time Android SDK bug.

The right-hand side is optional and has no relation inside GameMaker: Studio, but we'd recommend you fill them in anyway.

·          Common Name: This would normally be your name

·          Organisational Unit: The department within the company that you are in

·          Organisation: The name of your company

·          Location: The name of the town or city where you are based

·          Country: The two letter code for the country where you are based

Note that all names must have only letters, numbers and spaces but no special characters. Once this info has been filled in, press the button marked “Generate” for GameMaker Studio to create the necessary KeyStore file. This may take a moment but once it has finished you will see that the section marked as “Private KeyStore” file will have been updated to reflect the new name that it has been given. Once this is done it normally will not need to be changed again.

Once GameMaker Studio has been set up on the Android device, it’s very simple to get the games up and running. The first thing to do on GameMaker Studio is to go the target dropdown dialogue in the main window and select “Android”. The next step then depends on whether or not the device is connected via data cable or WiFi.

1.   Make sure your device is connected to your pc through its USB data cable and that you have followed the device setup advice.

2.   Click the Green play button at the top of the main GameMaker: Studio window to compile your game

3.   As soon the compiling is complete, your game should appear on the device as designed.

Before you can use the WiFi setup, you need to make sure that the device to be tested has the YoYo Games runner installed. This can only be achieved through a data cable connection. This means that you must follow the connected device steps at least once before WiFi connections will work, as this is currently the easiest way to install the runner on the device (you can use Dropbox folders and double-click the runner .PKG on your phone, etc.).

1.   Make sure that you have correctly configured GameMaker: Studio (see GameMaker: Studio Basic Setup for more details)

2.   Click the Green play button at the top of the main GameMaker Studio window to compile your game

3.   When compiled, tap the YoYo Games Runner on the device and you will get the "connecting" window. Your game will now run as normal, unless this is the first time you are running the WiFi mode, in which case you should also follow the next steps too.

4.   When the YoYo Games Runner starts up there is button marked Settings. Tap that button to open a new screen with two further options.

5.   You should set the GM: Studio IP Address to the one that your computer is currently using. If your network supports name resolution you can use the PC's name and avoid issues with the IP changing later.

6.   You should set the GM: Studio Port Number to match the one that you setup in GamneMaker: Studio Basic Setup (51268 by default)

7.   The game should now connect and run automatically every time that you press the green "play" button on GameMaker Studio.

The game should now connect and run automatically every time that you press the green "play" button on GameMaker Studio.

Resizing and Comparison

Anyways, back on topic one of the most notable aspects you’d notice in regards of games on an Android device is that the dimensions are downscaled, compared to games you’d see on a Console or PC. In order for me to put my game onto a Samsung Galaxy S6 Edge, I’d have to resize everything ranging from sprites (34x48) by half and a bit. As well I resize the game’s room from 605x384 to 415x210. I would also have to take into consideration the arrangement and the actual coding itself, and using my room as reference change everything as such. 

As well as resize the game’s room from 605x384 to 415x210. I would also have to take into consideration the arrangement and the actual coding itself, and using my room as reference change everything as such.

This is obviously because Android devices are a lot smaller then say a IIYAMA PC screen by 500x500 (Android Galaxy Samsung s6 Edge) and 605x385 (Original Screen) on a 27" IIYAMA Screen. A good example and comparison is the images accompanied below. 

Galaxy Samsung S6 Edge

VS

Original Screen Size

Mouse to Touchscreen

It is also notable that an Android device lacks a PC’s Mouse and Keyboard, thus making any GameMaker games ported to an Android device nearly impossible to play with. However, the answer to this particularly simple and merely needs a bit of coding to get around. Simply put, before one ports the game to an Android or IOS they must change the Mouse event. The Mouse event is separated into a series of sub events that can be selected to give you a more precise control over what is happening in your game. Below you can see exactly what these Sub Events are:

The Left Button, Right Button and Middle Button events (Whether normal, pressed or released) all work by masking the instance of that event. This means that GameMaker Studio will check the position of the mouse in the room when those buttons are used against the collision masks of the instances that have a mouse event. As such, if there is a “collision” then the event will be triggered, so one will have to make sure that any object with these events has a sprite with a valid mask or that the object has a mask selected in the object properties. As their names would imply, these events will be triggered either once when the chosen Mouse button is first pressed or released, or continuously each step while the button is maintained.

The Mouse’s Enter and Release events are also similar to the Button events in that they also rely on the mask of the instance to work, but this time they are triggered when the Mouse first “Enters” (Touches) the object when the Mouse “Leaves” (Releases) the object. Events like these are not continuous, however, and they are triggered only once each time the Mouse enters/leaves the object making them an ideal method for creating. For example, Buttons that need to change as the Mouse hovers over them before going back to normal when the Mouse is removed. 

Finally, we have another event called the “Global Mouse”. Within the submenu you’ll find a selection of events that that are for generating mouse events in instances even when the mouse is not over them or even near them. These are events that are generated for all instances and if there are actions or code defined for the specified event then it will be run, regardless of the position of the mouse within the game room. As such, even without a Mouse objects on the Blackjack screen like “Restart”, “Twist” and “Stick” will be able to be triggered, and thus making the game itself playable on an Android device or IOS device, such as the Samsung Galaxy. 

Web Games (Task 2)

Creating a Web Game with GameMaker Studio is a lot easier than making a Mobile game with GameMaker Studio. In order to do so, one needs the Professional Edition of Gamemaker Studio and change the “Target” from “Windows” to “HTML5”. If you do not know how to so you could easily follow these simple steps as seen below:

1. Right-Click on the GameMaker Studio

2. Click Properties > Shortcuts > Open File Location

3. Click Apps and then pick Gamemaker Studio: Education (Professional Edition)

4. Afterwards, click “Target” then change “Windows” to “HTML5”

5. click the “Create Target Executable” button

6. This should bring up a “Save Folder”-- Before saving, I suggest you create a new folder with a simple name like “Web”.

In this new folder you are given three files-- HTML5GAME, FAVICON and Index. These folders hold your entire game and the option to open it on a Web Browser. By right-clicking “Index”, you are given several options but the option you need to open up the game on different Web Browsers is “Open with”. By clicking this you’ll get the option to open up your game with a different Web Browser like Internet Explorer, Google Chrome Etc. depending on your preference.

Below I will compare the difference(s) on four different Web Browsers: Internet Explorer, Google Chrome, FireFox and Maxthon. 



Internet Explorer


Opening up the game on Internet Explorer is relatively simple. However, I did run into a few problems. One of the first problems is that the Webpage is restricted by either its running script or ActiveX Controls. This can be bypassed by clicking “Allow Blocked Content”.  

However, following this I received another Message from the Webpage advising me against using Internet Explorer due to Files, Colours etc. not working completely or working altogether. However, by bypassing this by clicking “OK” will actually come up and work. 

Once the game has come up, though, I quickly noticed a large mass of blackness which takes up most of the screen. Unfortunately, at the minute I do not know how to remove it and it is easier to just shrink the screen down to size. However, due to the previous issues Internet Explorer is probably not the best browser to use with GameMaker, unless the issues are properly fixed. 

Notably, Internet Explorer’s quality is a lot poorer than the other Web Browsers such as Google Chrome and FireFox. As such, I highly-suggest that you’d use either Google Chrome or FireFox because Internet Explorer, despite its updates is typically old-fashioned and isn’t really built for Flash games or Web games. The screen for the actual game is a lot smaller when compared to Google Chrome and FireFox.

Google Chrome

Compared to Internet Explorer, Google Chrome only really had one issue with working with GameMaker and opening up-- This problem in particular was Google Chrome bringing up an message with regards of a Java Script Alert. Much like Internet Explorer, this advised me against using Google Chrome due to issues with Files, Colours Etc. not working.

Similar to Internet Explorer, Google Chrome had the same issue with the mass of blackness in which took up most of the screen but could be rectified by resizing the screen itself. This problem can be fixed via programming, but it’d probably take me awhile to research and I was told it’d be quite complicated as a result. However, unlike Internet Explorer, Google Chrome is simply awesome when it comes to speed. Moreover, its superb support and stability for running games inside the browser make it stand out from all other browsers in my opinion. 

Unlike Internet Explorer, the quality for both Google Chrome and FireFox is a lot better and built round with Flash Games and Web Games in mind, as well as the other technical specs that was put into designing and creating them. 

FireFox

Much like Internet Explorer and Google Chrome, I once again ran into the issue of having a “Java Script Message” advising me against FireFox, due to issues with Files, Colours Etc. not working. This is fine and I’ve come to expect this, and I simply clicked “OK”.

Surprise! Surprise! I once again ran into the mass of blackness which takes up most of the screen. Again, this isn’t much of a problem and I can simply resize the screen. Much like Google Chrome, FireFox is a lot more reliable and supportive when it comes to Flash and Web-based games.

Much like Google Chrome, FireFox’s quality is a lot better than it is compared to that of Internet Explorer. And unlike the Web Browsers I have compared so far, the screen for the game is a lot bigger and eye-catching. As I mentioned before, FireFox is a lot better and built round for Flash Games and Web Games, as well as the other technical specs that was put into designing and creating it.

Maxthon

I think you get the routine now; I opened up my Blackjack game with Maxthon only to receive a “Java Script Message” and I said “OK”, effectively ignoring it. It basically advised me against using it because of issues with Files, Colours Etc. not working… Yadda Yadda Yadda…

Shock and Behold…!! The mass of blackness has returned…!! Will I ever rid myself of this haunting darkness? The answer is probably not yet. But once again, there is a temporally solution in regards of an easy fix. Just make the screen smaller and everything will be A-OK. 

Admittedly, I’m not quite sure about Maxthon itself. From a variety of sources I am told that Maxthon wants to be the Web Browser for Gamers and that it brags about having high-performance, console-quality. And in all fairness, Maxthon does make my Blackjack game look nicer and larger than what I've seen with Google Chrome and FireFox. 



Published Game (Task 3)

For the final part I’ll show you how to actually publish your game to be used on your Web Browser. This was actually all covered on above on Task Two (Web Games) but here’s a little reminder. First, you need to open up your game up on GameMaker Professional. Next you need to set your game to HTML5 and then click the “Create Target Executable” button, between the “Save File” button and “Play” button. This should bring up a “Save Folder”-- Before saving, I suggest you create a new folder with a simple name like “Web”.

In this new folder you are given two files-- HTML5GAME, FAVICON and Index. These folders hold your entire game and the ability to open it up on the Web. By right-clicking “Index”, you are given several options but the option you need to open up the game on different Web Browsers is “Open with”. By clicking this you’ll get the option to open up your game with a different Web Browser like Internet Explorer, Google Chrome Etc. depending on your preference. 

Congratulations, you can now open your game up on Web Browsers. Below is a link of my Blackjack game (Warning: It's still a bit buggy); in a Zip File:

https://drive.google.com/file/d/0B5GSR1wxkIBsNTVIdWNtcXpRVGs/view?usp=sharing