The Road To Wordy Blob 2 of 3
Having written the plate tectonics views and published it on Android I felt I'd established a pipeline. So next I wanted to create an actual game. I also wanted to start down the road towards education physics software. So I decided on a particle simulation. This episode describes the development of that simulation/game and its support software.
MAUI DEV STORIES
Stephen Moreton-Howell
6/11/20264 min read
A Proper Game
OK, so I'd established that .NET MAUI is pretty fast at drawing. What's the quickest way to get a game up and running? Use that same built-in drawing functionality in ICanvas, add some simple touch handling and do the animation on a timer. But what does every game need? A scoreboard. I wanted to do something other than simply writing numbers at the top of the screen.
But first - the scoreboard
I decided, just for fun, to make the scoreboard system look like those mechanical flip-chart style scoreboards you sometimes see at railway stations. And this will be a scoreboard that I will re-use in future games.
Score Flipping Graphics
First let's look at the graphical images needed to achieve this flip-board effect and then look at how I used them in the .xaml and .cs files.
I designed the 10 digits from 0 to 9 with a horizontal fold across the middle and the top half shaded slightly darker than the bottom, to give the impression of a digit printed on a piece of folded card.Here's the example of the digits '3' and '4'.
Flipping between digits (for example from '3' to '4') is a 5 stage animation. This will mean drawing images onto the screen using a timer in the C# code. The images are designed by splitting the digits in half along the fold line. Then, for each digit, there is a fully flattened top and bottom half image and a partially flipped top and bottom half image. Drawing the flip from '3' to '4' therefore looks like this:
At stage 2 the partially flipped bottom half of the '3' is drawn on top of the fully flattened bottom half of the '4'. At stage 4 the partially flipped top half of the '4' is drawn on top of the fully flattened top half of the '3'. When the flipping process is halfway (stage 3) the part of the card being flipped is pointing straight out of the screen so is only visible edge-on.
Stage 1
Stage 2
Stage 3
Stage 4
Stage 5
OK. I need to think of a first app that will show some of the graphical functionality of .NET MAUI, and how fast it can draw.
Creating the Game
Having established some of what .NET MAUI is capable of, I decided the next app would be a word game, with animation and a scoreboard and all that. But that's the subject of part 3 in this blog series.