PLATFORM: Web Browsers(Mobile + Desktop)
TECH STACK: HTML/CSS/JavaScript(FrontEnd) Phaser(Engine) WebSocket(Networking) Node.js(Backend)
DURATION: Jan - May 2022
TEAM SIZE: 6
MY ROLE: Lead Programmer
RELEASE: ProjectWebsite SourceCode
Tech Challenge
1. How to make a game that is accessible to everyone's mobile devices and mobile browsers? We cannot use Unity because its WebGL performance on mobile devices is poor.
2. How to connect 300-400 devices in the same virtual room and send messages about other players' state updates continuously. All 3rd party game networking tools on the market have a maximum room size of about 12 .
3. How to improve the performance of the server given that the server has limited calculation power but will need to process 300-400 players' packets.
4. How to test the robustness and stability of the server, since we cannot find 400 playtesters to do the stress test for us?
Solution
1. I did some research and compare some engines horizontally and decided to use the HTML game engine Phaser because it is open-sourced, has rich learning resources, and has a welcoming community.
2. I integrated Socket.io into the project as the main tool to do communication between the client and server because of the room/broadcast/identification features it provides. UDP is out of the game simply because it is out of scope.
3. We have made lots of optimization both on the client side and the server side. For example, instead of broadcasting every position update immediately after receiving it from the client, the server will queue them up and broadcast them all with a fixed frequency (the same frequency as the framerate). This may not be the best solution for games that require extremely low latency, but it is good enough for our game.
4. We use Python and Node.js to create hundreds of robots to emulate the behavior of the player and monitor if the server can handle the traffic as well as its robustness when unexpected behavior happens.
Embrace is a semester-long project at the ETC, CMU, with the client, Associate Dean for Diversity, Equity and Inclusion at the Dietrich College of Humanities and Social Sciences, CMU. The client's need is an interactive experience to be used in the orientation to introduce the 300+ new students to cultural humility, help them become self-reflexive about their identities, and prepare them for the upcoming diverse college life. As the lead game designer, I proposed using cultural wheels as avatars and designed its gameplay, interactions, and puzzles. I'm also leading the other 2 designers to develop and iterate by game design documents, paper-prototyping, and playtesting.
Below is a video of Embrace.
