Building a Real-Time Game

In this chapter, we will build a multi-player, head-to-head game app with real-time communication. In the app, you will be able to connect to a game server and view a list of other players that are also connected. You can then select a player to request a game with them and, provided they accept, play a game of Sticks & Stones. We will look at how we can use SignalR to implement a real-time connection with the server.

The following topics will be covered in this chapter:

• How to use SignalR in a .NET MAUI app
• How to use control templates
• How to use XAML triggers to update the interface
• How to use XAML styling in a .NET MAUI app

Let’s get started.

Technical requirements

Before you start building the app for this project, you need to build the backend that we detailed in Chapter 9, Setting Up a Backend for a Game Using Azure Services. You will also need to have Visual Studio for Mac or PC installed, as well as the .NET MAUI components. See Chapter 1, Introduction to .NET MAUI, for more details on how to set up your environment. The source code for this chapter is available in this book’s GitHub repository: https://github.com/PacktPublishing/MAUI-Projects-3rd-Edition/tree/chapters/ten/main.

Project overview

When building a head-to-head game app, it is really important to have real-time communication because the user expects the other players’ moves to arrive more or less immediately. To achieve this, we will use SignalR, which is a library for real-time communication. SignalR will use WebSockets if they are available and, if not, it will have several fallback options it can use instead. In the app, we will use SignalR to send updates on player and game status through the Azure Functions that we built in Chapter 9.

The build time for this project is about 180 minutes.

Getting started

We can use either Visual Studio on a PC or Mac to complete this project. To build an iOS app using Visual Studio for PC, you have to have a Mac connected. If you don’t have access to a Mac at all, you can choose to just build the Android part of the app.

Let’s review from Chapter 9 what the game is all about.

An overview of the game

Sticks & Stones is a turn-based social game based on the concepts of two childhood games mashed into one, Dots and Boxes (https://en.wikipedia.org/wiki/Dots_and_boxes) and Tic-Tac-Toe (https://en.wikipedia.org/wiki/Tic-tac-toe). The game board is laid out in a three-by-three grid. Each player will take a turn placing a stick along the side of a box, between two dots, to earn one point. If a stick completes a box, then the player takes ownership of the box, earning five points. The game is won when a player owns three boxes in a row, horizontally, vertically, or diagonally. If no player can own three boxes in a...

Building the game app

It’s time to start building the app. Open the SticksAndStones solution from the previous chapter and follow these steps to create the project:

1. Open the Create a new project wizard by selecting File, Add, then New Project… from the Visual Studio menu:

Figure 10.1 – File | Add | New Project…

2. In the search field, type maui and select the .NET MAUI App item from the list, or select it from Recent project templates if it is listed:

Figure 10.2 – Create a new project

3. Click Next.
4. Enter SticksAndStones.App as the name of the app and, under Solution, select Add to solution, as shown in the following screenshot:

Figure 10.3 – Configure your new project

5. Click Next.
6. The last step will prompt you for the version of .NET Core to support. At the time of writing, .NET 6 is available as Long-Term Support...

Summary

That’s that! Excellent work! There is so much in the chapter that it is hard to keep this summary short. In this chapter, we created a game app that connects to our backend. We created a service that managed the calls to the backend service and handled errors, all asynchronously. We have learned how to respond to messages from SignalR, and how to send and receive messages within the app using the IMessenger interface. We created custom controls and used them across multiple pages. We learned how to style an app with XAML styling, how to use control templates, and how to select them using styles. We explored routes and how they work in a multi-page .NET MAUI app. We examined triggers and how we can use them to update the interface without using C# code and converters.

Now, reward yourself and challenge a friend to a match in your new game.

In the next chapter, we will dive into Blazor and .NET MAUI together.