Multiplayer gaming experiences in Microsoft Teams using Live Share SDK

This post has been republished via RSS; it originally appeared at: Microsoft Tech Community - Latest Blogs - .

About our Team

We are a team of postgraduate students from University College London focused on exploring new applications of Microsoft’s Live Share Software Development Kit (SDK). For our project, Teams Carnival, we partnered with Microsoft Cloud Advocates Lee Stott and Ayca Bas through UCL’s Industry Exchange Program, supervised by Professor Dean Mohamedally. Our team is passionate about leveraging new technologies for positive social impact, a goal that this project allowed us to explore. In addition to Live Share, we had the opportunity to learn and work with a suite of new software packages such as Microsoft Teams Toolkit, Unity and Fluid Framework.

 

Meet the Team

 

 

Social Gaming

Online social gaming today is a global industry, with an estimated audience of over a billion online players. The COVID-19 pandemic attracted new demographics, broadening the range of people who play, and studies in recent years have strengthened the link between the effects of online social gaming and improved mental health. Popular multiplayer gaming services like Microsoft’s Xbox Network provide an online infrastructure for hundreds of millions of gamers every month, but the mass adoption of online conferencing tools such as Microsoft Teams (servicing around 300 million users monthly) provides a new platform in which to explore applications for social gaming.

 

Our Application

 
ZewenKong_2-1697031317696.jpeg

 

 
We focused on using Live Share SDK to create multiplayer gaming experiences within a Microsoft Teams meeting. Teams Carnival is a unified launcher application that contains all 8 of our games, each of which uses Live Share as a critical component for sharing data between meeting participants. The six games, increasing in complexity in terms of the included Live Share functionality, are:
 
  • 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.

 

ZewenKong_3-1697031620661.png

 

 

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

 

system_architecture.png

 

 

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.

 

Whats Next?

This project took place over a summer, and we are pleased with what we have achieved. With more time for development, there are a couple of key areas we would like to see this project go:

 

  • More complex games – our games provide a clear proof of concept that online social gaming is possible in Teams, but the complexity of these games could be further increased to create even better experiences. Our games do not currently incorporate any kind of data persistence, so players cannot save any kind of progress, but this could be a goal another team of developers focuses on in the future.
  • Further UCL MotionInput integration – we tested our games successfully using UCL’s MotionInput software, meaning they can be played without using a traditional keyboard and mouse, but just a webcam! However, new games could be developed that rely more heavily on the technology, tailoring the experience to specific gestures to increase accessibility for target users. This would involve building MotionInput integration into the games themselves at the Unity level, which is something we hope to see future developers do.

 

Thanks for reading!

This project was an invaluable experience for all of us. We want to thank Professor Dean Mohamedally, as well as Ayca Bas and Lee Stott for providing us with regular support and guidance on the direction of the project.

 

We recommend anyone interested in this project or developing with Live Share to see the following resources:

 

 

We look forward to seeing what developers do next with Live Share!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.