My Path 🛣 Through MonoGame and Beyond + Beginners Guides + XBOX/UWP

15

Just getting out of the tail end of recovery and figured, best do a tutorial to get back into shape, today has been a wonderful day to me, so I thought I best share something nice back.

I present:
Mana Meter Tutorial

Save this image - Original name ‘Mana Meter.png’ -, I created it myself so you are welcome to utilise it however you wish to, I did however realise I kind of forgot to make an empty circle lol, anyway, for the purpose of this tutorial, this will do.

Step 1
Follow my guide on the Pipeline tool in my Road to MonoGame thread linked in the first post here to output an xnb file to follow along with this tutorial, or if you prefer simply load the PNG into your project but remember to alter your code as needed, and then add the file to your project.

Step 2
Let’s add some fields in our code:

Look here in Game1:

public class Game1 : Game
{
    GraphicsDeviceManager graphics;
    SpriteBatch spriteBatch;
    ...
    ...

Just below that, make your code look like so:

public class Game1 : Game
{
    GraphicsDeviceManager graphics;
    SpriteBatch spriteBatch;

    private Texture2D PartialTexture;
    public int animationframe = 0;
    public int timercount;
    ...
    ...

And in your Load():

        // TODO: use this.Content to load your game content here
        PartialTexture = Content.Load<Texture2D>("Mana Meter");

And then in Update():

        // TODO: Add your update logic here

        if (timercount < 150)
        {
            timercount++;
        }
        else
        {
            animationframe++;
            timercount = 1;
        }

        if (animationframe > 7)
            animationframe = 1;

And finally in Draw():

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);

        // TODO: Add your drawing code here
        spriteBatch.Begin();
        spriteBatch.Draw(PartialTexture, new Vector2(200, 200), new Rectangle(animationframe * 64, 0, 64, 64), Color.White);
        spriteBatch.End();

        base.Draw(gameTime);
    }

And then set your system to x64 and build/run…

And you should see that result.

Now I could explain what the code is doing but then again, your actual implementation would differ anyway, so have a play about and see what you come up with.

A neat trick however, using a photo manipulation application, say Photoshop, strip the colour away from the image, make it grey scale, keeping the visual effects, you can then repurpose the same graphic to represent multiple meters, simply by changing that colour flag from white, to a choice colour of yours.

Next, possibly not today or possibly today, my XMAL navigation demo.

Valentine out.

✔ ☕ General Conversation Thread