Consultation Yee Siang (28/11/2014)

After last week tutorial, I went back to create and try very hard to connect it with the mobile web-socket, So ask always, is time to debug and fixing error. While i am creating the button and asking on on how to control the ship with different button. Yee Siang ask me to start from basic again. He show me some tutorial online the help me to connect with the socket and didn't come out error. After when the code is ready, Yee Siang ask me that next the will like to see another characters move. If it is happening means miracle. So during this i need to go did more research how to control a character by clicking on button.

I kind of use back the memory and notes that i had take down to finis this project so that we are able to finish on time.

Consultation Yee Siang ( 21/11/2014)

In the consultation with Yee Siang is always about debugging code and solving error. This time still the same issue.

I had created the button as a control to move the canvas object and try to create another shape but fail. While we are debugging we also discuss about the user flow and how people should connect to the server.

The code was able to be solve and will post in the different blog post. As we are discuss, i need to assign the player to different character. Like when scan the code the will a specific character for the user. And it will be a first come first serve method. while user log in to the server different mobile will need to send different data to the dedicated space ship they are control which will be my next step to create my coding for my final installation.

I was pretty glad that i start creating the socket last semester if not i should be do the web-socket now.

I was also ask to try create the code with simple canvas first before going to the main code because this will affect the previous code and also make me confuse.

Consultation 19/11/2014

During the tutorial we were discussing about the interface and character design that i had sketch and lastly the tutorial section for user to understand the game play.

1) base on the commend from Yi Wei, tutorial is basically up to the game play. Maybe this game is new and the structure is complicated then will be good that had tutorial but if it is a game that we normal will play then just keep it simple with the tutorial.

2) for the character design. In the sketch there are a lot different type of character. Different character need different abilities which mean more condition and game need to be plan. Then YiWei ask me whether i am focusing on the game play or the web socket. If it is just socket then just create a simple game but try to enhance with some narrative element.

3) Two player had a lot possibilities like what i discuss during the meeting. Maybe like two plan is overlay then got super power and so on.

Base on the comment i try to summarize and go back to my objective of the project. I rethink what is my object and i decide that i am focus on the socket more. So i decide to create a simple multiplier shooting game to present the technology.

I will just create one type of plane and a type of enemy create a simple shooting score competing game.

Due to i am using html the difficulties in programming had raise up. Wish me all the best.

WIP (sketches and character design)

I had to create some sketches for my characters and also the logo for my landing pages. As you can at the bottom is the images of my sketches the three on the top is the main characters space as i had plan each of them have different abilities. As for the bottom three is the enemy spaceship, base and the look of the spaceship different kind had different abilities. 

I had given them a name , lightning the top right is the speed type of spaceship attack weak but fast shooting and movement to dodge attack. The booster (under lightning) , huge armor , mean strong defence high attack but very slow speed. and for main character is the wing, the most average spaceship.

As for the enemy, top one is the enemy that will be fly in zig zag formation. The round one is just a normal enemy spaceship , and the one at the left is a special spaceship which move fast and when player hit will get higher points.

Base on the game that i will like to create i come out a list of condition and schedules or sequence that i will like to use to create my games. Base on the understand, i create all the steps that guide to create the games. And base on the list i will be able to check the area that i need to put more attention and effort to finish the games design.

Work in production (coding the canvas)

I show the prototype of the html5 games that i follow base on the tutorial to Yee Siang, my supervisor on programming my final project. Although he say is a good source but he advise me to start from draft again, and code it myself. I can reference back the code but don't use fully on the code because the control and sending information progress is different.

As we all know that base on my previous blogspot, i am creating my display and control in two different HTML. For this canvas i am creating in the display html. 

So i start again by creating canvas. So i start with javascript to create a canvas and also code in a round object in the canvas to represent the character.

After creating the canvas in javascript, i go to the html source code to link the javascript with the html files and add in the canvas to display the canvas in the html page when it is being publish.

Due to my game is multiple players so i need to add in another player to so in the javascript i will be adding another shape to represent the another player.

If there are not mistake, when you display on browser you will see something like the images below.

References

W3schools.com,. 'HTML5 Canvas'. [online] Available at: http://stackoverflow.com/questions/702165/how-do-i-implement-press-and-hold-button-javascript [Accessed 23 Dec. 2014].

WebSocket Server & Mobile Client

Although i successfully using socket io to create a chatroom that able to let few computer to communicate but only computer that have node js are able to use the chatroom but that is not the connection i will like to have for my project. So me and tutor yee siang and jam who both are the professional in this industry sit down in the lab and try to figure out the possibility of fixing. Yee siang and jam did mention this is some like computer science level already so even them also need some research only can fix it. At that point i almost gave up and think i will fail my final year project but luckily Yee Siang are able to solve the problem. That night after the 2 hours meeting, Yee Siang tag in a facebook post, which is a tutorial he created to base on the problem i had . He said that when research on this area not body had share the solution. Just part and part, then he straight away combine the code and create a free source tutorial to share his tutorial.

So basically there are are few step need to beware of compare to our last time tutorial.

here is the link that send to me by my lecturer : http://tech.yeesiang.com/websocket-server-mobile-client/. if you are interested to this code can try to subscribe the blog.(yee siang i help you promote your blog. LOL )

You require to download Xampp, Node.js

To create the server you need to follow this few steps.

First, you need to have nodejs installed.
Save the code below into websock-server\index.js
Then, in your terminal/cmd, type npm install websocket@1.0.3 to install the nodejs websocket library.




Make sure your port 8080 is not occupied by other program as I am using port 8080 in this example.

Next, in your terminal/cmd, cd into the folder and type node index.js

var http = require('http');

var server = http.createServer(function(request, response) {

    console.log((new Date()) + ' Received request for ' + request.url);

    response.writeHead(404);

    response.end();

});

server.listen(8080, function() {

    console.log((new Date()) + ' Server is listening on port 8080');

});

wsServer = new WebSocketServer({

    httpServer: server,

    // You should not use autoAcceptConnections for production

    // applications, as it defeats all standard cross-origin protection

    // facilities built into the protocol and the browser.  You should

    // *always* verify the connection's origin and decide whether or not

    // to accept it.

    autoAcceptConnections: false

});

function originIsAllowed(origin) {

  // put logic here to detect whether the specified origin is allowed.

  return true;

}

var connections = {};

var connectionIDCounter = 0;

    

wsServer.on('request', function(request) {

    if (!originIsAllowed(request.origin)) {

      // Make sure we only accept requests from an allowed origin

      request.reject();

      console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');

      return;

    }

    //var connection = request.accept('kraken-protocol', request.origin);

    var connection = request.accept(null, request.origin);

    connection.id = connectionIDCounter ++;

    connections[connection.id] = connection;

    

   console.log((new Date()) + ' Connection ID ' + connection.id + ' accepted.');

    

    connection.on('message', function(message) {

        if (message.type === 'utf8') {

            console.log('Received Message: ' + message.utf8Data);

            //connection.sendUTF(message.utf8Data);

            broadcast(message.utf8Data)

        }

        else if (message.type === 'binary') {

            console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');

            connection.sendBytes(message.binaryData);

        }

        

    });

    

    connection.on('close', function(reasonCode, description) {

        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected. '+"Connection ID: " + connection.id);

        // Make sure to remove closed connections from the global pool

        delete connections[connection.id];

    });

});

// Broadcast to all open connections

function broadcast(data) {

    Object.keys(connections).forEach(function(key) {

        var connection = connections[key];

        if (connection.connected) {

            connection.send(data);

        }

    });

}

// Send a message to a connection by its connectionID

function sendToConnectionId(connectionID, data) {

    var connection = connections[connectionID];

    if (connection && connection.connected) {

        connection.send(data);

    }

}

Save then you will see this in your folder

This is able to use as server. Is user a output screen . Every time when people log in or out will have update. Then everything when people key in message it automatically update on the page.

After create the server we need to create the client files.

For the client part, the tutorial ask to going to create 2 interface, one for sending and receiving chat msg (index.htm), another for receiving chat msg only (logger.htm) which is the display.

You will need to change the Server IP in it into yours (ws://192.168.0.200:8080)

So now i can open the index.htm and type a msg, and it will appear on the space below the input box, as well as in logger.htm

I can even put index.htm into phonegap (need to provide option for user to enter the Server IP) and it can serve as a ‘controll’ while logger.htm can be modified to be a ‘receiver’ which also know as a "output".

Put the two files in the websock-client folder

index.htm source code

<head>

    <title>Node Based Echo</title>

    <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script src="js/jquery.websocket-0.0.1.js" type="text/javascript"></script>

    <script src="js/jquery.json.min.js" type="text/javascript"></script>

</head>

<body>

    <script type="text/javascript">

        // sends a message to the websocket server

        function sendToServer() {

            ws.send('say', '{ messageTextA: ' + $('#echoText').val() + ' }');

            //ws.send('krakenmsgB', '{ messageTextB: ' + $('#echoText').val() + ' }');

        }

        // set-up web socket

        var ws = $.websocket("ws://192.168.0.200:8080/", {

            open: function () { },

            close: function () { alert('websocket has been closed'); },

            events: {

                say: function (e) { $('#returnText').append(e.data + "<br/>"); },

            }

        });

    </script>

    <div>

        <div style="float: left; clear: left; padding-top: 2px;">

            Your text:

        </div>

        <div style="float: left; padding-left: 20px;">

            <input type="text" id="echoText" style="width: 150px;" required />

        </div>

        <div style="clear: left;">

            <input type="button" onclick="javascript:sendToServer();" value="Send" />

        </div>

        <div id="returnText" style="clear: left; height: 200px; padding-top: 30px;">

        </div>

    </div>

</body>

</html>

Then logger.htm source code

<html lang="en"> <head> <title>Logger</title> <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="js/jquery.websocket-0.0.1.js" type="text/javascript"></script> <script src="js/jquery.json.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> // set-up web socket var ws = $.websocket("ws://localhost:8080/", { open: function () { }, close: function () { alert('websocket has been closed'); }, events: { say: function (e) { $('#returnText').append(e.data + "<br/>"); }, } }); </script> <div> <div id="returnText" style="clear: left; height: 200px; padding-top: 30px;"> </div> </div> </body> </html>

To try it  copy the websock-client files into xampp htdocs first so that phone are able to connect to the folder to internet database.

Start xampp first before launch in browser. and also terminal as well .

So this will be how it will look like