Cross Platform Game Development Tutorials : Multiplayer Card Game using WebSockets,Java Netty Server ,Cocos2d-x-HTML5

Tutorial Source code :

https://github.com/meiry/multiplayer_cocos2dx-js_using_netty_websockets

The purpose of this tutorial series is to learn the very basics real time Game server and client
And one of many principles behind multiplayer game.
Especially for beginners with no server side networking experience .
Although the tutorial is very basic and simple what you going to learn can be used as foundation to more complex games.
Using those open source and free tools and technologies:

We are going to learn about those subjects to understand their principles.
To keep things very simple the game will be 2 player War Card game in real time .
As this is learning tutorial the server will be running from Eclipse IDE , and the Client (aka the game) will be running from Web or Desktop app or iOS Device.
One player can start the game on the web and the other on the desktop or iOS device or vise versa .
You can also watch some development videos i done when building this tutorial .
They can be watched here :
https://www.youtube.com/playlist?list=PLguC363FekVf3niPruOJ_QCh2HZy17F0r

Few words about MMO games although this game is very basic . the principles that presented here
are quite the same also in big scale MMO games , one of them is
That the game logic that we see on the client is actually played also on the server .
This is for prevent cheating on the client and abuse the game .

Here is simulation of 2 players playing the game in this case 2 browser windows are opened

Lts start with the Eclipse IDE and the Netty Server setup .

Java Netty Server Eclipse Setup

Create new JS project with cocos2d-x with the name WarCardJS
you can refer to my tutorial on how to create new project here :
Snake Game Using Cocos2d-x HTML5 - PART 1

Get the source code from the GitHub project :
https://github.com/meiry/multiplayer_cocos2dx-js_using_netty_websockets
clone it to local directory
to your local project directory it should look like this :

d:\dev\cpp\2d\GameDevCraft\fromgit>git clone https://github.com/meiry/multiplayer_cocos2dx-js_using_netty_websockets.git
Cloning into 'multiplayer_cocos2dx-js_using_netty_websockets'...
remote: Counting objects: 108, done.
remote: Compressing objects: 100% (96/96), done.
remote: Total 108 (delta 9), reused 93 (delta 5), pack-reuRsed 0eceiving objects:  79% (86/108), 3.55 MiB | 43 KiB/s
Receiving objects: 100% (108/108), 3.56 MiB | 45 KiB/s, done.
Resolving deltas: 100% (9/9), done.

 
d:\dev\cpp\2d\GameDevCraft\fromgit>cd multiplayer_cocos2dx-js_using_netty_websockets

 

d:\dev\cpp\2d\GameDevCraft\fromgit\multiplayer_cocos2dx-js_using_netty_websockets>ls -l
total 1
drwxr-xr-x 3 meirmaya Administrators   0 Jan 20 22:18 Client
-rw-r--r-- 1 meirmaya Administrators 214 Jan 20 22:18 README.md
drwxr-xr-x 3 meirmaya Administrators   0 Jan 20 22:18 Server

Download the latest Eclipse IDE at the time of writing this tutorial the Eclipse version called
Mars. and install it you will need java 1.7+ for this .
https://eclipse.org/downloads/
Start Eclipse and create new workspace , this is the directory which Eclipse manage its projects.
After eclipse opened , To Import our Java project into eclipse go to :
go to File -> Import
The Import window will open , select General -> existing projects into workspace
In the Import Project window, browse to the where you clone the project from GitHub and then select:
Server -> CardWarNettyServer
Select it and click Ok , the project is ready to be imported into Eclipse .
when it is done loading press the : Finish button .
Now that we have the project loaded into Eclipse we are going to configure it.
This means in java and eclipse world ,
A. Configure our Game server class path. and the Netty library
B. Configure our JRE (java run time ).
C. Configure the configuration of the server

Right click on the project name on the left ( the project source tree )
on the window that opened click on properties .
After clicking it, new window will open , click on the left on : "Java Build Path"
And on the right click and select the : "Libraries" tab.
in this window are listed all the:
A. Game server Libraries which are needed for the server to work.
B. Game server directories in our case the configuration directories.
The default project has my path settings of the Netty library we need to change it.
Click on :"Add Jars" button , window will be open , browse to the "lib" directory.
And select :
netty-all-4.0.33.Final.jar
And if you like to see the netty source select also :
netty-all-4.0.33.Final-sources.jar
Click Ok .
Now do the same thing with the configuration directory , but this time click on the
"Add Folder Directory" button on the left , pop up window will open .
Select the "conf" directory with a check box . and click Ok . to close the popup
And click Ok on the Properties Window.
The first part is configured , the second part is the Debug Configuration .
On the Left Source tree select the file "GameServerMain.java"
Right click -> Debug As -> Debug Configuration -> left click .
The "Create , manage . and run configuration" window will open.
On the left look for "Java Application" double click it and a new node will created
This new sub node represents the configuration for this project
Give it some meaningful name in my case it is : GameServerMain.
On the right go to the :"Classpath" tab.
On the select the "User Entries" ,
then select on the left the "Advanced..." button
In the small window that is opens select the "Add Folder" radio button .
From the popup window select the project "conf" directory.
We are ready to start the server in Debug Mode .
Press Ok on all and in the final window click Debug .
It will compile the source code and then excute the server .
If every thing went right you should see in the Eclipse Console in red:

Jan 22, 2016 1:53:27 PM com.server.GameServerMain main
INFO: server started
If you don't see it mybe you need to enable the Console window
In Eclipse go to : Window -> Show view -> Console
Or maybe port is busy , to change port go to :
on the left source tree to :
in the conf directory : double click on configuration.properties
there you will see: port=8888
try to change it to something else .

We are ready now to review the Game Server source code And How it works
In the next post:

Multiplayer Card Game using WebSockets,Java Netty Server ,Cocos2d-x-HTML5 - Part 2