Multiplayer gaming experiences in Microsoft Teams using Live Share SDK

 

• Snakes and Ladders (Alicja Modzelewska)
• Trivia Race (Alicja Modzelewska)
• Balloon Bomb (Erte Wang)
• Pac-Man (Najma Haji)
• Jenga (Najma Haji)
• Might & Malice (Uzair Ahmed)
• T-Rex (Zewen Kong)
• Space Shooter (Zewen Kong)

These games are all contained within the main launcher application, Teams Carnival (Zarah Mosin), which also handles the logic for managing Live Share containers so that different games, using different distributed data structures, can run within it.

The Project

Our group began by learning and experimenting with Live Share SDK and Teams Toolkit, exploring functionalities such as the available distributed data structures (DDSs) that Live Share provides by building on Fluid Framework. Initially, we exclusively used public, open source repositories for existing, well-known games to assess how we could integrate data sharing to provide a multiplayer experience within a Teams meeting. As the project progressed, our group became more comfortable with Live Share’s core functionality, and we branched off to focus on our individual sections of the application.

Using Visual Studio code for development, we used Teams Toolkit to build a React web app (written in JavaScript) that runs within a Teams meeting. Each individual game was built using the Unity game engine (with game scripts written in C#), including some games that were developed totally from scratch for the project. The open-source React-Unity-WebGL library was used to facilitate communication between our Unity games and the web app, allowing us to trigger Unity functions from React and vice-versa.

The application’s Live Share SDK functionality was written inside the React web app, allowing the various games to synchronise the game experience for all meeting participants. The level and type of synchronisation varies with each game: for example, Space Shooter and Trivia Race have participants play their own instances of the game, achieve a high score, and share a synchronised scoreboard so all meeting participants can compete. On the other hand, Might & Malice, Jenga and Balloon Bomb are all turn-based, but all meeting participants see the same thing at the same time.

System Architecture

We deployed Teams Carnival using Teams Toolkit, which streamlines the deployment process to Microsoft’s Azure storage service. Participants can join a meeting and add our application, then launch it from the toolbar. The side panel allows players to choose a game, presenting information on how many players each game is suitable for as well as a description.

Depending on the Live Share implementation, different types of meeting attendee can have various degrees of interaction with a game (for example, Balloon Bomb requires the meeting organizer to start the game). The deployed application itself is hosted on Azure; Teams Carnival contains WebGL builds of each of the included Unity games, and communication between the WebGL builds and the web application is handled via React-Unity-WebGL.

Challenges & Reflection

Building the application provided a series of key challenges that we had to overcome. Most of these challenges involved understanding exactly what functionality we could provide to users using Live Share: for example, group members spent time testing and integrating fully synchronous games before we concluded that issues such as latency would not provide an acceptable user experience for players. Instead, we focused on building enjoyable games that we feel people will want to play, still using Live Share as the keystone element for sharing data. Live Share is still a relatively new technology for developers to use, so resources such as Microsoft’s developer walkthroughs on YouTube and public GitHub repositories were an invaluable tool to help us overcome the challenges we faced while building the application.

This project was an incredible opportunity for our group to put our development skills to the test, as well as express our creativity by choosing particular genres of game and developing Live Share functionalities within them. Each member of our group refined their knowledge of web development using React, and got first-hand experience with the Unity editor and writing C# for game scripting. As a team, we met with each other regularly and worked collaboratively to overcome issues and challenges around Live Share, as well as helping each other with anything else that came up!

Overall, we feel this project has been very successful in achieving our key goal: the public GitHub repository for Teams Carnival demonstrates that online social gaming using Live Share is viable on Microsoft Teams. Gamers can play these games within a Teams meeting, and developers now have a wide array of different implementation examples for how Live Share SDK can be used to create a multiplayer gaming experience. We hope that games developers will use the examples we have provided to create their own games for Teams.