Game development on MAUI (Part 1: Animation)

After I encountered Skia on .Net MAUI, I started thinking about game development on this platform. MAUI is a framework for developing different types of cross-platform apps. On the internet, you can find some guides on how to create simple games like tic-tac-toe, memory games, or Sudoku. Occasionally, you might see something resembling Space Invaders or Asteroids. I've even seen someone attempt to create their own game engine based on .Net MAUI. Looking at all of this, I thought, "Why hasn't anyone tried to make something more interesting?" . With this question in mind, I decided to create something myself.

I thought about porting classic games like Mario or Contra. However, after realizing how challenging it would be to implement the physics of movement or recreate complex bosses like the one from the waterfall level in Contra, I decided to look at older JRPGs like Final Fantasy, Dragon Quest, or Pokémon.

For my first project, I aimed to create something straightforward to gain a better understanding of how everything works and to showcase the main aspects of game development on MAUI. My debut game will feature a hydra that eats spiders to survive longer and achieve a high score. To make the game more interesting, I will add a temporary multiplier that will increase the score and the value of each spider.

First, I needed to figure out how to work with tile sets in .Net MAUI. I started searching free assets on itch.io and found an isometric three-headed dragon (sprites for the hydra) and an isometric spider, which will be part of my game.

To begin, let's play one of the animations for the hydra. To do this, we need to divide the tile set into separate tiles and draw them in a loop, clearing the canvas before the next frame.

First, let's read our image and divide it into sprites. I created a Tile structure that contains a SKRect, which represents the coordinates of the tile on the bitmap and its size.

To create tiles more easily in the future, I created a tile factory.

Then, I created a TileSet class that contains a list of tiles, the size of the image in pixels, the size of the tile, and a bitmap of the tile set image.

To create tile sets more easily in the future, I created a tile set factory.

To play an animation, we start a timer on the dispatcher with a timespan equal to 33.3 milliseconds, which is equivalent to 30 frames per second.

Dispatcher.StartTimer(TimeSpan.FromMilliseconds(AnimationCycleTime), () =>
{
    HydraCanvas.InvalidateSurface();

    AnimationIndex++;

    return _pageIsActive;
});

To make the animation loop, we need to reset the animation index every time it becomes equal to the number of tiles in the tile set.

private int _animationIndex;

private int AnimationIndex
{
    get => _animationIndex;
    set => _animationIndex = _animationIndex < _tileSet.TilesCount - 1 ? value : 0;
}

To draw these tiles, we need to place a SKCanvasView on the page and register the PaintSurface method on the PaintSurface event of this canvas.

Summary

In conclusion, working on creating a game using .NET MAUI and Skia is an exciting process that requires not only learning the tools, but also a creative approach. In this article, I covered the first steps: from choosing a concept to working with tile sets and animations.

This project is just the beginning. In the next parts, I will continue sharing my progress, diving into game mechanics development, object interactions, and adding new features. Eventually, we will create a fully functional game.

The knowledge and skills gained throughout this article will not only provide a deeper understanding of game development, but also broaden general technical expertise in other fields of software engineering. Stay tuned for more!

The full code from this article will be here.