How to Turn Your Phone Into a Simple Game Controller using Monaca
Monaca have just released two new exciting plugins--HttpServer and WebScoketServer plugins. This will open a lots of possibilities. Think of chat application, multi-player game, game controller, the limitation is your imagination. Here we will create a simple game controller, but before that, let me give a brief introduction to the two plugins.
HttpServer Plugin
With this plugin, you can turn your phone into a web server. Yes! It’s a mobile web server! When turned on, you can point any browser to your phone’s ip address and port, and have your phone serve the content of any folder in your project. We will use this plugin to serve our html5 game.
WebSocketServer Plugin
With this plugin, you can turn your phone into a websocket server. This will enable real-time communication between server and clients. We will use this plugin to send data from the phone to any connected clients.
Notice
- The WebServer plugin currently only work with Android.
- The code need to be run on Monaca platform. It is easy to get started with Monaca. Just sign-up at monaca.mobi and you are good to go.
The Game
To create a game controller, obviously we need a game to control.
I have chosen a simple demo from pixi.js. It is a simple game of a walking boy who will jump when you click on the screen. You can find the demo here and the source code here. We will make a game controller that will control the jumping of the boy. As can be seen on the figure below, when a user click the “Jump!” button, the boy will jump! It is simple but is good enough to illustrate the concept.
System Overview
The Project Structure
Since we are dealing with client and server codes, it is more cleaner to separate the two. Here I put all the client code inside “client” folder. We will tell the HttpServer plugin to serve files from this folder.
The rest of the folders are codes that run on the phone.
The Client
We will put the game code in the client folder. I use WebDav(see bottom part of the screenshot) to transfer files from my machine to the IDE. It is a fast and easy way to transfer lots of file to the IDE.
If you open “client/index.html”, you will see that there are two script tags that point to a missing folder. You need to copy the “pixi” folder from “../../src” folder to the “client” folder. Then modify the two script tags as shown below.
The Server
Enable WebServer Plugin
First we need to enable the plugin. Click on “Config” and select “Plugin Settings...”.
Then make sure to check the "Monaca Http and WebSocket Server" plugin.
HttpServer
Now let’s start the HttpServer with the following code. Put the code in “www/index.html”
Run the application. If nothing goes wrong, you will see this alert message which show that the server ip address and port.
Now the server has started successfully. You can point any browser to this phone ip address and port.
Hooray!! The server is working! So far so good but before we go on, we need to manage our code structure before it grows out of control. Let’s create an App namespace for your application so that other application module can attach to it. We will name it app.js
We will also move our HttpServer related code into http_server.js
WebSocket Server
We will put our WebSocket related server code in websocket_server.js
WebSocket Client
We need the client to listen to the server command. The code to focus on is "onmessage" event. We will put the code in “client/websocket_client.js”
Complete Code
I put the complete code of the project on github. Feel free to give it a spin!
https://github.com/kruyvanna/Monaca-Game-Controller
Conclusion
We have seen how easy it is to leverage WebServer plugin of Monaca to create a Game Controller application. I hope this will help you create awesome app of your dream.
