{"id":229,"date":"2020-09-18T18:21:58","date_gmt":"2020-09-18T18:21:58","guid":{"rendered":"http:\/\/mycours.es\/gamedesign2020\/?page_id=229"},"modified":"2020-12-11T14:00:21","modified_gmt":"2020-12-11T14:00:21","slug":"node-js-socket-io","status":"publish","type":"page","link":"http:\/\/mycours.es\/gamedesign2020\/node-js-socket-io\/","title":{"rendered":"Templates & examples (node.js + socket.io)"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Download and install node.js<\/a><\/p>\n

We’ll look into these 3 skeleton project and introduce node, express, and socket.io:<\/p>\n

https:\/\/github.com\/molleindustria\/hello-node<\/a><\/p>\n

https:\/\/github.com\/molleindustria\/hello-express<\/a><\/p>\n

https:\/\/github.com\/molleindustria\/hello-socket<\/a><\/p>\n

p5 + socket.io (creating circles)<\/strong><\/p>\n

First socket.io communication between clients. Draw a circle, the circle appears in all clients:<\/p>\n

https:\/\/github.com\/molleindustria\/p5-socket<\/a><\/p>\n

Exercises:
\n*Make the circles from different clients appear different
\n*Make a square appear on the right mouse click (or keyboard press)
\n*Network the mouse position<\/p>\n

 <\/p>\n

Real time updates (mouse pointers)<\/strong><\/p>\n

Example of player management<\/p>\n

https:\/\/github.com\/molleindustria\/mouses<\/a><\/p>\n

Exercises:<\/em><\/p>\n

*When a player clicks, the mouse pointer changes appearance (in all clients)<\/em>
\n*When a player clicks on another mouse pointer the clicked pointer “dies” (it should be resolved on the server side)<\/em>
\n*Every 5 seconds all the mouse pointers go back to life (also determined by the server)<\/em><\/p>\n

Smoothed real time (mouses eased version)
\n<\/strong>Making movements independent from updates
\n<\/strong><\/p>\n

https:\/\/github.com\/molleindustria\/mouses-smooth<\/a><\/p>\n

Exercise:<\/em><\/p>\n

*see if you can incorporate the easing in your modded mouses<\/p>\n

Client-side prediction (spaceship example)
\n<\/strong>Movement logic on the server side, the client smooths movements by extrapolating the positions until the next server update<\/p>\n

https:\/\/github.com\/molleindustria\/server-prediction<\/a><\/p>\n

\n
\n
\n
Exercise:
\nExtend this logic and create a multiplayer shooting game like SpaceWar!<\/em>*add a state object similar to “players” that keeps track of the bullets
\n<\/em>*add a way to visually differentiate players or tell your ship apart
\n<\/em>*add a simple collision detection based on distance (circle collider)
\n<\/em>*add a game over \/ respawn condition<\/em><\/article>\n<\/div>\n<\/div>\n<\/div>\n

Chat Example Series<\/h3>\n

These incremental examples illustrate some capabilities of node.js and various lobby architectures<\/p>\n

Part 1<\/strong>
\nRudimentary avatars and speech bubbles. Client side movements. Frame independent movements. p5.js DOM add-on<\/a> for form and button.<\/p>\n

https:\/\/glitch.com\/~molleindustria-chat1<\/a><\/p>\n

https:\/\/github.com\/molleindustria\/chat1<\/a><\/p>\n

 <\/p>\n

Part 2
\n<\/strong>Basic avatar creation, html UI integration
\n<\/strong><\/p>\n

https:\/\/glitch.com\/~molleindustria-chat2<\/a><\/p>\n

https:\/\/github.com\/molleindustria\/chat2<\/a><\/p>\n

 <\/p>\n

Part 3
\n<\/strong>socket.io rooms, bad word filtering
\n<\/strong>
\n<\/strong>https:\/\/glitch.com\/~molleindustria-chat3<\/a><\/p>\n

https:\/\/github.com\/molleindustria\/chat3<\/a><\/p>\n

 <\/p>\n

Part 4 (3b)
\n<\/strong>Basic lobby with players automatically assigned to rooms to cap the limit or have a games with a specific number of players.<\/p>\n

https:\/\/glitch.com\/~molleindustria-chat4<\/a><\/p>\n

https:\/\/github.com\/molleindustria\/chat4<\/a><\/p>\n

 <\/p>\n

Advanced Server Template<\/h2>\n

This example is barebone on the client side – it’s a simple chat that doesn’t use p5 or any other libraries – but it includes a few technically complex features on the server side:<\/p>\n