• Tasks (No mandatory submission, however, please try if you have finished previous classwork)

    • Demo1: "Beat them all" with jump using Arcade physics

      • Note: This is NOT the only way of doing it, nor is the best way
      • By now you should be familiar with Arcade physics
      • The idea is to control a moving platform to hold the character

    • Demo2: Matter js

      • Arcade JS seems not to handle rotation physics very realistically ( it's for different game play )
      • Navigate to the folder Physics→ MatterJS→ DragThroughBalls
        • In Config session modify the physics section:

          • Add "matter:{debug:true}" and see what's happening

                physics: {
        default: 'matter',
        matter:{
			debug:true
        }
    }
        • Same can be done for other examples

    • Demo3: Multiplayer ( This one is using WebSocket )

      • The original Reference is here:  https://phaser.io/news/2017/03/socketio-multiplayer-tutorial

        • This one is still using Phaser2, so the view part of the game needs to be modified to using Phaser3

        • Have to use Express as web-server, if you are not using it, please back-track to  Optional: nodejs with Express server

        • The tutorial using Socket.io, if you'd like to use it, please visit the website for its API

      • Browser native Websocket's API scheme is very similar to Socket.io ( on, emit ), but using this package:  https://www.npmjs.com/package/websocket

        • Pros switching to Websocket:

          • Cross-platform browser support

          • No extra js library needed for most modern browsers

          • Have more libraries on IOT (both server and client, while socket.io for the time being only have client library, but may change)

        • Cons switching to Websocket:
          • Have to implement auto-reconnect
          • Have no fall-back connection if browser/reverse-proxy server doesn't support Websocket
          • Does not allow P2P, which may introduce more lag to the gameplay

      • Steps:

        • Note for windows, visual C++ you can have a FREE community license by registering a Microsoft account. Try the steps first, only fall back to this if you run into problems.
        • After generating the desired game app, for instance we'll name it "wsmulti"

        • Do the steps in the red rectangle first. But before you start the app, we need to install an extra package and put int some extra code (Same for windows/mac/linux)

          npm install --save websocket
        • Navigate to <yourapp>'s directory, inside subdirectory "bin" there's a file "www"
          • It doesn't have extension ".js" but it's in javascript, open and navigate to the end

          • Add following code: (Since we are using insecure mode in this case, we use 'connect' instead of 'request' event)

            var WebSocketServer = require('websocket').server;
wsServer = new WebSocketServer({
    httpServer: server,
    autoAcceptConnections: true	// insecure option, however prevent from most errors
});

wsServer.on('connect', function(connection) {   
    console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' Connected');
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            console.log(' Peer ' + connection.remoteAddress + ' Received Message: ' + message.utf8Data);
            connection.sendUTF(message.utf8Data);
        }
        else if (message.type === 'binary') {
            console.log(' Peer ' + connection.remoteAddress + ' 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.');
    });
});

          • Add an "index.html" to the "public" subdirectory containing

            <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Connection test</title>
  <meta name="description" content="Connection Test">
  <meta name="author" content="SD3985">
</head>

<body>
  <script type="text/javascript">
	var port = 80;
	if( location.protocal == 'https:' ){
		port = 433;
	}
	if( location.port != "" ){
		port = location.port;
	}
	var client = new WebSocket('ws://' + location.hostname+":"+port, ["protocolOne", "protocolTwo"]);
	client.onerror = function() {
		console.log('Connection Error');
	};
	client.onopen = function() {
		console.log('WebSocket Client Connected');

		function sendNumber() {
			if (client.readyState === client.OPEN) {
				var number = Math.round(Math.random() * 0xFFFFFF);
				client.send(number.toString());
				setTimeout(sendNumber, 1000);
			}
		}
		sendNumber();
	};

	client.onclose = function() {
		console.log('Client Closed');
	};

	client.onmessage = function(e) {
		if (typeof e.data === 'string') {
			console.log("Received: '" + e.data + "'");
		}
	};
  </script>
</body>
</html>
        • Given the current interaction, what can we build on it
        • Also Look at Components→ Data→ Change Data Event
          • Can we synchronize object data on multiple client using the data change.
          • Emit event is: client.send(...) on browser side, referring to the HTML code.
        • I'm working on a version that supports auto reconnect using websocket and with simple PING here: https://www.designandmake.org/stash/users/victorzzt/repos/wsmulti2/browse , bug report and suggestions are welcomed.
          • The main edit will be in the "bin/www" (server side), "public/javascripts/network.js" (client side)
          • It's simple, but not bug free. (hope will be bug free later)
          • Have simple ping detection function.
          • Please suggest some features that you are using in your game if you want me to test it.
          • To be implemented
            • Data change emit
            • Simple data correction between clients (because of time delay)
  • No labels