This is part 5 in my article series about how I created "Pizza Peers". If you haven't read the previous articles, be sure to do so now! Here's the link: How I Created "Pizza Peers"
Now that we can communicate with the game over the internet, we need an interface to make this communication easy and intuitive.
At the end of the previous article, I showed you the "updatePlayer()" function. We'll be creating the interface for that in this article.
(The rest of the interface consists of buttons, buttons, and even more buttons. I'll give one example of how such a button works, and that should be enough.)
In the previous article, I showed you how the game could send and receive signals.
Now I'll show you how the player (the one holding the smartphone) can do this.
Remember the "on(data)" listener we placed on the peer? The one I told you would do all the magic? Well, that was no understatement.
It actually handles all signals for both computer and player. It's just that the computer needs an extra step to relay this information to the in-game objects.
The code below is all placed within the on(data) listener on the peer.
This code is for buying ingredients. The first statement actually performs the buying action within the game. The second is triggered when a player enters a buying location, the third when that player leaves the location again.
NOTE: Even though computers and players use different parts, it's all collected within the same listener. (A player will simply never received a "buy" event, so it will always ignore that if-statement.)
Anything you want to happen within the game, just use the structure above. Make up the signals you need and send/receive them on the peer. If it's the computer, relay the signal to the game object (if needed).
Moving players, again
Phones do not have a joystick, or moving parts at all for that matter. I also don't want to emulate a keyboard and print a bunch of (arrow) keys on the screen.
So, how do we allow 360 degree movement on the smartphone? Well, I chose the simplest route: simply treat the whole screen as the joystick.
Whenever you touch the screen, it calculates the vector between the center of the screen and your touch, and that's your movement.
The code below is all you need.
(In the full code I also allow using a non-touch screen to control the game, but I want to keep it simple. I mainly allowed mouse input because it made testing much quicker on my laptop.)
All we need to do to send a signal, is call "peer.send( message )".
The message is, again, stringified JSON. We can put in any properties we like, but I recommend keeping it as small and simple as possible. You don't want to waste any bandwidth with online games.
You might be thinking: woah, it's that simple? Why doesn't everyone use this technique if it offers realtime (online) multiplayer?
(If you weren't thinking that, well, eh, I'm gonna continue this line of thought anyway.)
Of course, there are downsides to this. There are things you simply cannot do and exceptions you need to take into account every step of the way.
The next article will talk about those!