teachinTech


Play Your Game on Another Device

People play games on a lot of different devices. This activity walks you through playing your game on other devices that have a web browser.

Turn In: This is an optional activity so nothing needs to be turned in. If you do this activity, provide your instructor with a screenshot showing your game running in a web browser at http://localhost/game/

In this activity, we are going to install XAMPP on the computer running Construct2, export our game out of Construct2, then pull our game up on another device.

Note: There are other export formats, we are going to focus on the HTML5 website format.

Install XAMPP

Go to the link below ...

XAMPP Installers and Downloads for Apache Friends

Click on the Download tab at the top of the page.

There are a number of options available. At the time this activity was written, PHP 7 was recently released and PHP 5.6 is still supported. We are going to download and install version 7.

In the XAMPP for Windows section, click on "Download (32 bit)" button for version 7. Tell your browser where to put the file. If it does not ask you, check in the Downloads folder. The file will be named something like xampp-win32-7.x.x-x-VC14-installer.exe where the x's will be part of the current version number.

Once you have the file downloaded, right click on it and pick Properties. In the lower right corner of the General tab, if there is an Unblock button click on it or if there is a checkbox that says Unblock, check it. Then click Ok.

Double click on the file to run the installer. Below is what you will see when doing the installation.

* May get a message to allow the install to continue or to provide administrative credentials.

* A message will come up if running antivirus. Yes to continue installation

* May get message about UAC (User Account Control) and permission issue if installing to c:\Program Files (x86). Click Ok, we will choose a different location.

* Deactivate components not using. For this course, you will need Apache, MySQL, PHP, phpMyAdmin. The rest are not needed so you can leave them if you like or uncheck them if you don't want them installed.

* Select your installation folder ... default is c:\xampp and is a good place to choose unless you have reason to put it elsewhere.

* Can learn more about Bitnami or uncheck the box if you don't want to.

* Click Next several times until the install starts.

* When finished, you will be asked if you want to start the Control Panel. Leave that checked and click on the Finish button.

Click on the Config button and put check Apache under the Autostart of modules section. Click on the Save button which saves your changes and takes you back to the Control Panel.

Click on the Start button beside Apache in the Control panel. This will start up the Apache web server and show you the Apache name in green and then numbers in the PID(s) and Port(s) columns. From the Control panel you can start/stop Apache or any of the other applications and also configure some of them.

To run your games on other computers, you will need to have the Apache server running. There are a few ways to do this.

Choose one of the following two ...

1. Start the XAMPP control panel. Since you check Apache as an auto-start item, it will start Apache when it starts up. You can Quit out of the control panel and Apache will still be running.

2. Run the apache_start.bat which will open a command window and tell you that apache is running. Leave the window open to keep Apache running.

Tip: You can create a Windows shortcut to either the XAMPP control panel or the apache_start.bat file. Please the shortcut on your desktop or pin it to your task bar if you want quick access to run it.

Tip: If you always want Apache running and do not want to have to start it each time you turn your computer on, you can create a shortcut to the program you use to start Apache then put that shortcut into your Startup group so that it starts when you log into your computer.

To make sure that Apache is running, open a web browser and go to the following location ...

http://localhost/

If all is working ok, you should be taken to the XAMPP Dashboard.

Optional: Position your XAMP control panel somewhere on the web browser with the XAMPP Dashboard page and take a screenshot of the web browser and the XAMPP control panel in front of it. Then use one of the markup tools and write your first name on the screenshot and save the screenshot.

Note: XAMPP is intended for development and learning. It is not recommended to run a production web site or application on.

Export Construct2

The instructions below assume that you used the default of c:\xampp to install XAMPP on your computer. Navigate to the C drive then the xampp folder then the htdocs folder. Create a folder named games. You can export your games to that folder or you can create subfolders if you want to have more than one game available at a time. The instructions below assume the games folder, adjust the path accordingly.

File then Export Project. Choose "HTML5 Website". Click Next. Export files to C:\xampp\htdocs\games\ (leave rest of things as is). Click Next. Click Export. You may get a warning about script minifier and Java, if so, click Ok. Click "Go back to Construct 2".

Pull Up Your Game On A Different Device

In order to view your game on a different device, you need to know the IP address of your Construct2 computer. An easy way to do that is to press the Windows key or the Start button then type in cmd and hit enter. That should open up a command prompt (a black box that lets you type in commands). Type in the command ... ipconfig

You will see an IP address displayed. Lets say that the address you get is 192.168.1.2 ... that is your IP address on your local network. Other devices on your local network should be able to connect to your server.

Note: If you have a firewall running on your Construct2 computer, you either need to disable it or you need to allow port 80 through the firewall.

If you put your game into the c:\xampp\htdocs\games\ folder above and your IP address is 192.168.1.2 then the address to put into the web browser of another computer, your gaming system, or your mobile device would be ...

http://192.168.1.2/games/

Adjust for your IP address and if you used a different folder to export your game.

Contact your instructor if you have any difficulty in completing this.

Note: The Personal version (pay version) of Construct has a "Preview Server" option (in File then Preferences of the pay version) that lets other devices play your game without having to do the export process.


Copyright © 2021 Eric Schumm. Permission granted to freely use this in your classroom.