A simple solution on implementing bluetooth multiplayer with cocos2d-html5 + JSBinding + cocos2d-x + GameKit

Why do this:
I’m trying to add bluetooth multiplayer features to my recent released game which uses cocos2d-html5 + JSBinding + cocos2d-x and could not find articles about this on the Internet so I decided to find a way out myself.
If you are looking for something similar to this I hope you can get inspired by this demo 🙂



Something to notice:
. This article will not discuss on how to use GameKit’s bluetooth features
. The GameKit code part is mainly based on this awesome tutorial series on raywenderlich’s site
. I’m poor at Objective-C and haven’t used C++ for years so there might be bad grammar usage or memory management issues in this demo
. I did all the researching and coding stuffs in spare time so the demo is nowhere near full featured (say lack of exception handling)
. The main purpose of the demo is to show a working solution of communication among different languages (Javascript <> Objective-C <> C++) and implement bluetooth multiplayer feature under the help of GameKit

What’s in the demo:
. How to call C++ functions from Javascript (spidermonkey)
. How to mix C++ and Objective-C (.mm)
. How to call Javascript function from C++ (spidermonkey)
. Create a game (as server)
. Join a game (as client)
. Communication between server and clients (send/receive packets)

Main workflow
. All the actions such as “create a game as server”, “search servers”, “join a game as client” are inited from Javascript (MyLayer)
. Take “join a game as client” as example
. The Javascript code calls a function named “joinServer” in C++ (AppDelegate.h/mm) with the peerID of the server and an instance of the MyLayer class
eg: joinServer(peerID, this);
. The “joinServer” in C++ is triggered (thanks to spidermonkey) and it calls the Gamekit bluetooth stuffs in Objective-C
eg: [clientObject connectToServerWithPeerID:peerID];
. The Objective-C notifies the C++ when the action is done (using delegate)
eg: self.delegate->clientDidConnect();
. The C++ then calls the “clientDidConnect” in Javascript code after receiving the notification from Objective-C
. The Javascript code can take the next move after functions triggered from C++
. Then the whole workflow ends for one action
To make it easier the whole workflow works like: Javascript -> C++ -> Objective-C -> C++ -> Javascript

Code structure
. MyApp.js — Javascript — starting point for all the actions
. GlobalJsFunc — C++ — Global functions and variables used by spidermonkey (functions will be called by Javascript)
. AppDelegate — C++ — Bridge between Objective-C and Javascript, calls corresponding funcions when triggered by Javascript and returns the result to Javascript
. MatchmakingClient/MatchmakingClient — Objective-C — Handle all the GameKit bluetooth stuffs
. MatchmakingProtocol — C++ — protocol for connection events, AppDelegate implements this protocol
. Packet — Objective-C — pack and unpack the data sent/received in between peers

 Check out the demo on Github 🙂

If you have any question feel free to ask and it would be great if you would like to check out my new game 🙂