Version en español: https://medium.com/@rretamal.dev/usando-sensores-en-net-maui-b2dbbdb95dec
This was my extracurricular activity for the weekend. I was curious to play around with sensors in a .NET MAUI application, so for this exercise, I set out to:
- Access the accelerometer and gyroscope information
- Do something with that information to validate actions on a device
So once again, the thought of ‘why not?’ came up, and I thought I could use that information to make a small spaceship game.
The first thing I did was create a project in Visual Studio using the .NET MAUI template and give it a name. For this case, I used MauiGyras.
Once the project is created, you will see the default structure:
For the project, I had to install a couple of libraries using NuGet:
- Microsoft.Maui.Graphics
- SkiaSharp.Views.Maui.Controls
Once you have the libraries installed, just remember to modify the Maui.Program.cs. It should look something like this:
I started with the object I wanted to move, so I designed a small spaceship using SkiaSharp. To do this, in the MainPage.xaml, I removed the default content and placed a canvas:
All the painting and what we want to do will happen in the PaintSurface event of the canvas, so we will subscribe to the event in the constructor like this:
canvasView.PaintSurface += CanvasView_PaintSurface;
So, the next question is, how on earth do I draw a spaceship? For that, we will use this method:
What does the method do in broad terms? It generates the image of a spaceship using simple shapes: the cabin is a blue triangle, two wings are blue, the cockpit is a yellow circle, and the thrusters are two red circles. It also receives some parameters, such as the canvas to be able to paint it and the center points of the screen. Now we need to call the method, and we will do this in the PaintSurface event, so you just need to call the DrawSpaceship method:
If you run the project, you should see something like this:
How great is it what a couple of geometric shapes can achieve! In my case, at least, they saved me from searching for or generating an image, hehe. Now, to use the sensors, we need permissions!
As you can see here, we check if we have the sensors we need, namely the Gyroscope and the Accelerometer, and at the same time, we will subscribe to the respective events to capture changes in the values. The data capture would look like this:
Here we will capture a couple of values and store them. With the accelerometer, we will manage the position of the spaceship, and with the gyroscope, we will handle the rotation of the camera. This is how it looks on the device:
We can see how the spaceship moves and how the speed varies, but honestly, it looks lifeless, and a label is just a label. So, next, we will add stars! This will give us a better perception of the actions being performed. To do this, we will add a method that generates random points to give the sensation of many points scattered all around:
Next, we need to paint them, so in the PaintSurface event, we will add this portion of code:
Here, we will iterate over the stars and apply a rotation to give a sense of movement depending on the camera’s rotation. We will also add a zoom-out effect to give depth, and finally, we will paint them using a circle. This is how it would look with the star effect:
Here we use the sensor information to animate an object using SkiaSharp. In the second part, we will expand the demo a bit more!
https://github.com/rretamal/MauiGyras/tree/main
Happy Coding!
