Playing your game on a phone or tablet

Knowledgebase / Playing your game on a phone or tablet

We’re going to play our game on a mobile device. We’ll also explore adding touchscreen controls to make our game mobile compatible.

Step 1: Play test on Mobile

Here’s what you need to do to test your game on your phone or tablet. Open the Mobile sidebar (if you cannot see this icon, enable it by clicking on your profile image and select Beta Testing.)

Screen Shot 2016-06-21 at 3.38.13 pm

Screen Shot 2016-06-21 at 3.39.34 pm

Click on the button to get the app on your device (Google Play for Android, and App Store for iOS).

Once you’ve installed the app, make sure you save your game, then click Generate Code. Then open the app on your device, and type the code into the app.

Screen Shot 2016-06-21 at 3.44.42 pm

Now your game will run on your device.

phone1

Your game might look funny. If it does, you can change your game’s resolution to target your device and orientation. Your game’s resolution defaults to 768×512, but if you change it to 768 x 432, or 850 x 480, or 960 x 540 your game will fit properly inside your phone’s screen. You can tweak these numbers and generate a new code until it looks right for you.

Your game might not be controllable! In the next step we’ll add touchscreen controls.

Step 2: Adding touchscreen controls

Grab the Touchscreen D-Pad pack from the Marketplace.

Screen Shot 2016-06-21 at 4.20.35 pm

Create a new layer above everything, and place the D-Pad and buttons in the top-left area of your game.

Then open the Game Properties sidebar, and take not of how big your world size is.

Screen Shot 2016-06-21 at 4.23.56 pm

Then temporarily change the world size to match the resolution. In this example, my resolution is 768 x 432, so I’ll set my world size to match that. This will show you the size of your game on mobile.

Screen Shot 2016-06-21 at 4.29.07 pm

Move the d-pad and buttons so that they are exactly where you’d want to see them when playing your game. Then change the world size back to its original size (don’t change back the resolution). Repeat step 1 and test your game on your mobile device.

phone2

Step 3: Hooking up the touchscreen control scripts

The d-pad is designed to work with Gamefroot characters like the classic platform player and Newton character. If the d-pad controls don’t work, then we’ll need to add the right script blocks to the game object you want to control. (If it works fine you can skip this step.)

When the d-pad buttons are pressed and released, messages are sent to the target object to control it. For example, when the left button is pressed, the d-pad script sends the message “START_LEFT” to a character, and then the character’s script makes it move left when it receives that message. If the target game object is going to do anything with these messages, we need to make sure the object has the script blocks necessary to receive a message.

Edit the script on the game object you wish to be controlled by the d-pad. First, we need to make sure the game object will be recognized as the player. Grab the “add tag tag name on myself” block (from Sensing) and drag into a “When created” block. Change the tag name to “player”.

Screen Shot 2016-06-21 at 4.40.30 pm

Next we’ll get the message receivers working. The events that you’re using to control the object will need to be swapped out with “When a message of message is retrieved” blocks (from Events).

Screen Shot 2016-06-21 at 4.41.23 pm

Here are the messages you can retrieve from the d-pad:

  • START_DOWN
  • START_LEFT
  • START_RIGHT
  • START_UP (this one is sent from the d-pad’s up button and the A button)
  • STOP_DOWN
  • STOP_LEFT
  • STOP_RIGHT
  • STOP_UP (this one is sent from the d-pad’s up button and the A button)
  • START_ACTION (this one is from the B button)
  • STOP_ACTION (this one is from the B button)

Here’s an example of a script BEFORE the proper blocks have been added:

Screen Shot 2016-06-21 at 3.29.57 pm

And here’s that script AFTER the message blocks have added to make the d-pad work:

Screen Shot 2016-06-21 at 3.34.12 pm

Step 4: Scripting your own touchscreen controls

If you’d prefer to create your own touchscreen controls, these are the blocks you need to know about.

The event block to use for detecting finger(s) on a touchscreen is “When stage is pressed pointer”. This block detects when the game screen is touched, and also saves the pointer as a local variable (remember, local variable values are only stored inside a single event or function). The pointer variable saves information about the mouse pointer, or fingers that are touching the screen.

Screen Shot 2016-06-21 at 3.06.33 pm

The Touch section of the Sensing tab is where you’ll find blocks that can detect the position of a finger, detect the amount of time a finger has been pressing the screen, and differentiate between multiple fingers.

Screen Shot 2016-06-21 at 2.59.30 pm

Here’s an example of these blocks in use in a script:

Screen Shot 2016-06-21 at 2.56.22 pm

Step 5: (PRO) Exporting your game to publish on the iOS App Store or the Google Play Store

When you want to take your game and get it on the App Store or Play Store, you’ll need to export your game files and download them to your computer (you need a Pro account to do this). Click on the Publish menu, and select Export to iOS or Export to Android.

publish-menu

Give your app a name, choose the orientation, and upload an icon.

Screen Shot 2016-06-21 at 5.05.13 pm

Remember to take note of the requirements you’ll need before you can publish to the App store or Play store. Then click Get IPA File or Get APK File.

Screen Shot 2016-06-21 at 5.17.53 pm

Your file will start generating. Once that’s done, this box will have the link to your app files. Click on that link to download your files.

Screen Shot 2016-06-21 at 5.36.02 pm

That’s as far as Gamefroot can take you. Your next steps will be to use Apple’s or Google’s tools to get your app ready to publish. Here’s how to Get Started with Publishing to Android, and Here’s How it Works for Apple.

Good luck!