Game development on MAUI (Part 6: Pause and body disappearing)

Valentin Taran
Jun 24
6 min read

Hi, everyone! 👋

In this final part of our series on building a .NET MAUI game, we'll focus on two key enhancements: making the spiders' bodies disappear more smoothly after they die and implementing a pause functionality. ⏸️🐞

To give the game a more polished feel, we’ll make the spiders’ bodies gradually fade away instead of vanishing instantly, adding a subtle but satisfying visual effect. Then, we’ll implement a pause feature so players can take breaks without losing progress.

These improvements may seem small, but they greatly enhance the overall user experience and bring our game closer to a professional standard.

Let’s wrap up our MAUI game with these finishing touches! 🚀

🕷️ Adding Color and Transparency Support to Spiders

To implement a fading effect for dead spiders, we need a way to control their transparency. Instead of removing them instantly, we’ll make them visually "disappear" by gradually reducing their alpha channel until fully transparent.

Managing Color and Transparency

To create a smoother visual effect when spiders die, I first update the spider model by introducing an SKColor field. This allows each spider to store its current color along with its alpha (transparency) value, which we’ll later adjust to create a fading effect.

Then, I implement a new method called DeadSpiderCanvasPaintSurface, responsible for rendering dead spiders. This method is triggered by a dedicated Skia canvas and iterates through a list of dead spiders, gradually decreasing their alpha channel on each frame. As the alpha value approaches zero, the spiders become fully transparent and are eventually removed from the list. This creates a subtle, polished dissolve effect rather than making spiders disappear instantly.

🖼️ Separate Canvas for Drawing Dead Spiders

To keep the game logic clean and modular, it’s a good idea to separate the rendering of dead spiders from the main game canvas. In this section, we’ll set up a dedicated canvas and update our animation loop to support fading animations independently from live spider rendering.

Initializing the Canvas

The first step is to create a new canvas that will be responsible solely for drawing dead spiders. This separation ensures that we don't mix live and dead entities in the same rendering logic, which could lead to cluttered or less maintainable code.

By having a separate canvas layer, we can optimize the rendering pipeline and independently manage the effects applied to dead entities — such as fading, glowing, or even dissolving animations in the future.

This dedicated canvas will be part of the same visual hierarchy but rendered on top of or beneath the main spider canvas, depending on the design choice. Since dead spiders don’t move anymore, we don’t need to update their position, just their visual appearance.

Transitioning Spiders to the Dead List

Once a spider finishes its death animation, we need to remove it from the active update loop and start processing it only for fading visuals. To do this, we track when the last animation frame has been played and move the spider to a dedicated _deadSpiders list.

This not only improves performance by reducing unnecessary updates but also avoids possible bugs related to spiders that have already died being processed further.

Here’s the core logic that performs this transition:

if (_spiders[i].AnimationIndex >= 		 
    spiders[i].CurrentTileSets.Body.TilesCount - 1 &&
    _spiders[i].CurrentState == SpiderState.Die)
{
     _deadSpiders.Add(_spiders[i]);
     _spiders.RemoveAt(i);
     break;
}

⏸️ Implementing a Pause Feature for Better Gameplay Control

In many games, especially those involving real-time action or animation, it’s essential to give players the ability to pause the game at any moment. This improves the overall user experience by providing flexibility and control — whether the player needs a break, wants to review the game state, or must deal with an interruption.

Creating the Pause Menu

To handle pausing, we introduce a custom popup using XAML. This popup appears over the game screen and temporarily halts all in-game activity. The background dims to signal that the game is in a paused state, while the popup presents clear action buttons:

Resume – to continue playing exactly where you left off
Main Menu – to exit the current session and return to the start screen

This approach keeps the logic clean: when the popup is open, the game is paused. When it’s closed, the game resumes. We also use a simple boolean flag (_isPaused) in our game loop to freeze animations and input handling while the pause menu is active.

The PausePopup class controls the pause menu interactions and communicates the player’s choice back to the game.

Uses a PauseViewModel for clean separation of UI and logic
Handles button clicks asynchronously to avoid multiple triggers (IsBusy flag)
Shows and hides the popup with animation, returning the user’s decision

This setup keeps UI responsive and lets the game react properly to pause/resume actions.

To control the game’s pause status, I added a boolean property IsPause in the GamePage.xaml.cs file. This property tracks whether the game is currently paused or running.

When IsPause is set to false (meaning the game resumes), it triggers the start of key game loops:

Animation loop
Game logic loop
Spider spawn loop

This ensures the game updates only when not paused, effectively freezing all activity during a pause.

Handling the Pause Action

To manage pausing, we add an async method Pause() that displays the pause popup and reacts to the user’s choice.

It first checks if the game page is active to avoid multiple pauses
Then it shows the PausePopup and waits for the user’s response
If the user chooses Resume (Positive), the game resumes by setting IsPause = false
If the user chooses Main Menu (Negative), the app navigates back to the previous screen

Pausing the Game When the App Is Minimized

To make sure the game pauses automatically when the app goes to the background, override the OnSleep method in the app class. This method triggers the current page’s OnDisappearing logic, where we handle pausing.

Pausing the Game on Back Button Press

To pause the game when the user presses the back button, override the OnBackButtonPressed method in the game page. This method calls the Pause method asynchronously and prevents the default back navigation by returning true.

protected override bool OnBackButtonPressed()
{
    Task.Run(Pause);

    return true;
}

Starting the Game in Paused State

To prevent the game from running immediately on launch, I modified the GamePage constructor to set the initial state as paused.

The view model and canvas paint events are initialized
The page is marked as inactive (PageIsActive = false)
The IsPause property is set to true, stopping game loops until the player starts

Conclusion

In this final part of the series, we implemented important features that enhance the gameplay experience — managing spider death animations with fading effects and adding a robust pause functionality.

Using .NET MAUI combined with SkiaSharp proved to be a powerful and flexible approach for building smooth, visually appealing game elements and UI controls. The separation of live and dead spider canvases helped keep the rendering clean and maintainable, while the pause feature gave players better control and improved usability.

By handling pause both manually (via popup) and automatically (on app minimize or back button press), we ensured the game state is preserved correctly in various scenarios.

Whether you’re an experienced developer or new to MAUI game development, these techniques provide a solid foundation to build on. Experiment with animations, controls, and game logic to create your own unique and engaging games.

Happy coding and game developing!