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

MrValentine · November 22, 2019, 10:30am

Hello Ladies and Gentlemen, Boys, and Girls and you there in the corner! [Look up The Spiffing Brit on YT for the intended accent there]

So, it is that time, I have reached a situation where I am feeling content to pursue game development and find that I have the restful time to do so. Sadly I have more health implications affecting my progress, which means it will be a slow pace, but I feel having an outlet to showcase and thus have reason to continue, may help push me onwards despite my difficulties.

For those new or unaware, I was born blind - or the new expression ‘partially sighted’ - and now it seems I may have a severe affliction of Tinnitus - still need to go see my doctor about it before it gets worse - and as such, my concentration - already blighted by my blindness - is further hampered, any way, enough doom and gloom.

As many of you know, I LOVE MonoGame, not just because it uses C# or that it keeps the hope up that Microsoft will pull its plug out and realise XNA was a good thing, but it is a wholly coding based approach to game development and I find that refreshing! so, thank you MonoGame team for keeping the flame alight!

Taking a right turn to steer onto the topic lane for once, I aim to document my progress through @AdamDawes575 's book here, as well as my continued developments as I have a couple of games in mind, namely a platformer and a casual strategy game; both of which are inspired by singular other games, meaning my own interpretation on those games and/or aspects which I fell in love with, go on, don’t be afraid to use the L word, passion is love and vice versa!

So, some might have already recently seen I joined Vimeo, I find it a much more pleasant experience than YouTube, though I will also publish there via Vimeo [Yep, you can publish to YouTube and other platforms through Vimeo, not a plug, just saying]. I aim to use it to demonstrate my progress visually. On top of this you will see the occasional screenshot and my book progress in subsequent posts, like so:

UPDATED
Original Page 72, on day of posting.
Which is where I am presently at.

And this is what I have toyed together thus far:

A video like so:

The video is a bit older than the screenshot though.

For now I am using Vimeo Basic, but if I find that the 500MB/week limit is hampering my progress, I will go Pro at that point, which means longer and more advanced videos and tutorials! I purchased a new microphone yesterday for just this purpose!

I have also found by shear chance a local musician who will hopefully allow me to licence his music and effects, so, that’s that bag filled, phew.

So, for now, I shall see what the next 39 pages bring, and since buying that book almost 7 years ago… … … what!? any way… … … umm, yeah after this chapter, I will have progressed further than ever before… time flies…

I hope you enjoy whatever comes of my progress, I will throw a few coding tips here and there, and I have the intention to create a series of coding for beginners with MonoGame in mind. As you can see, I have a lot of hope for MonoGames’ future.

First throw out is, Learn to use Partial Class! While dangerous to use for the risk of having this facial expression daily:

It can make things wonderful to code, Ask me for an implementation example! [Do note that I am nowhere near an advanced coder, yet]. Look two posts below.

Take a gander here:
Partial Classes and Methods (C# Programming Guide)

It will help you split your code across multiple .cs files, but again, keep that spaghetti under wraps, or a fork?

Thank you for reading and Code On!

See you in the next post! [Possibly later today]

Oh and I aim to resume my beginners guides too, still need to work out how I will do that one.

[
And no, not the Hong Kong boy band, though they were fantastic back in the day
Have a listen to one of their greatest tracks!
https://www.youtube.com/watch?v=PwSQQoWqeBs&list=RDqu_FSptjRic&index=2
Don't go reading into their lore though.
Oh here is another:
https://www.youtube.com/watch?v=reKevWIw7mI&list=RDqu_FSptjRic&index=5
I used to sing these songs almost 20 years ago, drunk with my HK friends, in Denmark.
You may not understand the words, but listen to the music!
One more:
https://www.youtube.com/watch?v=K0EYv8QvS78&list=RDqu_FSptjRic&index=7
To understand the power of this bands influence, here is a more modern cover for one of their songs, look at the crowd:
https://www.youtube.com/watch?v=wk9TMnbx7fQ&list=RDqu_FSptjRic&index=8

Boy, that was one heck of a tangent.... :relaxed: Sorry about that one.
]

Codified my tangent to clean up the post.

Links:

My Back Story: + My in-depth guide to setting up the pipeline tool and loading your first asset.

Setting up VS2019:

Adding Visual Basic code to your projects, also a secret guide to adding class libraries to your projects:

Explanation of what to do to get VS2017 for the setup guide:

Useful links for MonoGame users:

A good place to air general topics, not always about game development, but it is always welcome:

reiti.net · November 22, 2019, 3:46pm

I love partial class and use it frequently In my Voxel Thing I use it to separate different parts over multiple files, like geometry creation, render, automata and logic - it makes things easier without working with a file containing thousands of lines of code

MrValentine · November 22, 2019, 4:16pm

Precisely so!

For example, you can have a class file which manages all input calls, simply that, it calls the methods for each input type, allowing you to simply drop into this class and comment out the method you want to remove for a platform for example, let’s say you want to disable mouse input for a mobile game.

So as a structure for example:

Inputs.cs

public partial class Game1
{
    private void Inputs()
    {
        JoyStick()
        JoyPad()
        Mouse()
        Touch()
        Keyboard()
        VRHeadset()
        BunjieCord() //Just kidding
    }
}

And then you would have individual files for each like so:

Keyboard.cs

public partial class Game1
{
    private void Keyboard()
    {}
}

and in your main Game1, it would simply be:

public partial class Game1 : Game

And like magic, you can use everything as if they shared everything in Game1, fields, properties etc.

Note that for cleanliness and readability or navigation, whatever you want to call it, you can place inputs.cs in a higher folder structure, then below that have the individual files in a single folder or specified sub folders, say, mobile input and desktop input and console input, depends entirely on your project direction.

If someone can share some further insights to this, please do.

Must remember to complete that graphic and post it here soon.

reiti.net · November 22, 2019, 4:21pm

I normally call those files like “World.Input.cs”, “World.Render.cs” etc - I think WinForms does it the same … I still wonder how WinForms is actually displaying it in Solution Explorer as an expandable tree item in VS …

MrValentine · November 22, 2019, 4:29pm

Careful there, as you may end up with a lot of namespace dots.

Reitinet.engine.voxelverse.voxelengine.world.input <-- would this cause an issue?

I think you come across that when you create a .dll if my memory serves me correct.

Though, naturally you can simply state a using to a furthest extent I suppose.

I need to brush up on my file naming conventions, cannot remember if using a hyphen - was a bad idea or an underscore _, but having said that, if your design structure follows this pattern, then it becomes a habit eventually.

EDIT

Think I need to revisit this bit in my books.

Jjagg · November 22, 2019, 7:53pm

MonoGame actually uses partial classes for its platform abstractions. For classes with platform specific logic we have a partial class with the parts of the implementation that are shared and we conditionally include the class for the target platform with the platform-specific implementation.

For example we have GraphicsDevice.cs, GraphicsDevice.DirectX.cs and GraphicsDevice.OpenGL.cs, all partial GraphicsDevice classes. Depending on the target platform either the DirectX or the OpenGL version is included.

MrValentine · November 22, 2019, 8:20pm

I think it is about time I took a peek under the hood…

Couple of links I could use at the moment, the Discord link for the current server and umm I was going to say the Dev Branch but it’s on the downloads page/thread I suppose.

Still early days for me to venture into the source code, however, would not hurt to take a peek in general and understand the entirety of what is available.

And then compare it to what I find in all those XNA books I have… These and more:

You can safely ignore the progress counts, I have not done much other than peeking around. Fun fact, I also have the physical copies and that bottom right one had to come over from the states.

MrValentine · November 23, 2019, 8:29pm

1,500 words according to Word and roughly 12 minutes to read according to my TTS app. [stats not including this line]

A bit late, sorry, but here is something I think may help complete beginners understand how MonoGame works, I plan to create a Game Engine Framework overview next.

If you think some of the content may have better explanations there, please do comment for the sake of newcomers.

Basically, if you notice the top of the graphic, you see the overall class inside Game1.cs.

public class Game1 : Game

I will post - as mentioned above - a graphic and post explaining what is going on there soon, for now, let’s focus on the structure in this class.

First up, you have two field properties.

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

The first sets up something for us to utilise graphical representations of visual elements in our games/projects.

The second sets up a starter sprite batch which we can use to draw some sprites as a group. You may be asking now, ‘What do you mean by starter sprite batch?’. Well, imagine if you will, we are developing a 2D platformer game. You have the player character and the immediate platform the player interacts with. Let’s call this batch, the platform batch, behind this we have the background batch and naturally the foreground batch and so on.

Can you guess which is drawn first?

We would have:

  LOOP START
  BackgroundBatch()
  BackgroundSkyBatch()
  PlatformBatch()
  ForegroundBatch()
  ForegroundSkyBatch()
  MenuBatch()
  TextBatch()
  UIBatch()
  LOOP END

…and so on, of course everything depends entirely on your game’s requirements and specifications.

But why this order? Let’s investigate further.

If you have any experience with Photoshop/Illustrator or similar graphics design applications, you may be familiar with the Layers options, or if you remember tracing paper in school during art class or maths classes etc.

Layers allow you to blend effects or elements to achieve a final result, while reducing complications or separating visuals in order to achieve an intended effect.

Going back to coding, basically the first batch group is drawn first, so this is your bottom-most illustrator layer, next you have the second batch which is drawn on top of this and so on. So essentially, your most top placement visual is drawn last in order to sit on top of the various layers. In the above example, our UI is the utmost visible layer. That is, in this example, our touch controls on a mobile device to interact with the game’s/project’s menu or player character/vehicle.

Remember, UI and Menus are two separate things, UI is User interface. you may also hear UX User Experience from time to time but that is more of a web development expression, you do have a website going right? I may write a guide on creating a bare bones website and possibly just hand out the code for it on GitHub, I resent WordPress.

So, next call.

Game1(), here we have our first method, I am going to be honest, I am yet to do more with this at the time of writing this, so, I will just point out the two presented elements within this.

    graphics = new GraphicsDeviceManager(this);
    Content.RootDirectory = "Content";

First, we create a new instance of our graphics management system, this enables us to send visual draw calls to the graphics device and thus our game window.

Following this we declare where our game’s/project’s assets are placed so we can simplify where everything is being loaded from. This means we can simplify the addresses of assets by simply naming any file within the contents folder, or forward slashing for organised assets in sub folders such as Content/Music, more on this later.

Moving along.

Initialize(), another method I lack explanation for at this time, but you can create and prepare things here that the game/project requires prior to beginning, so that they are ready ahead of time.

Next…

LoadContent(), here we can load objects from our assets folder. remember from above, we declared an assets folder, Contents. We can now use simplified code to load objects from this folder like so:

Imagine you created an asset such as a sprite font through the Content Pipeline Tool [I will post my guide further down here soon] named Segoe UI Mono.xnb; and you placed it inside the Contents folder.

We would load it using the following code:

FontSegoeUIMonoBold16 = Content.Load<SpriteFont>("Segoe UI Mono");``

Where did the extension go? Now I should mention here, let’s say you wanted to load a sprite graphic for a main menu logo, you called it GameLogoMainMenu.png - because naturally you would have a smaller one for other areas in the game - and it’s a PNG file - naturally because we don’t want a huge solid square or rectangle everywhere, more on that in a future guide post - now, you can load this graphic directly using the code above like so:

logoTexture = Content.Load<Texture2D>("GameLogoMainMenu.png");

[Note that you would declare a texture2D just below where you see SpriteBatch spriteBatch at the top, like so: private Texture2D logoTexture; similarly you would declare fields for sprites and sprite fonts etc. Oh, and Textures are called Sprites because, well it stems back from the old days of spritely images on dot matrix displays, look it up, it’s a fascinating back story.]

Assuming it was directly inside the Contents folder, but this carries some issues in future, perhaps someone can explain this reason further should they feel like it, but let’s assume we took this graphic through the Content Pipeline Tool and ended up with an XNB file, we would use the code like so:

logoTexture = Content.Load<Texture2D>("GameLogoMainMenu");

So, instead of GameLogoMainMenu.xnb we simply omit the ‘.xnb’ because in XNA this is not required as we are already declaring it as a Texture2D; which accepts images of various formats within the .xnb file format. The Content Pipeline Tool has already translated the images to an optimised format for the framework to play with, therefore we no longer need to know what type it is, be it .jpg or .png, it no longer matters. [I suspect I just explained it better here, though there is a larger discussion on how images are stored on/in a graphics processors memory].

Before I forget where I was, let’s say you placed this graphic in a sub folder called MainMenuItems, we would therefore use the following code to load it:

logoTexture = Content.Load<Texture2D>("MainMenuItems/GameLogoMainMenu");

Now, I want to point out, this is what I use for Windows programming, I am unsure what the situation is for iOS/Mac or Android/Linux and whatever Nintendo Switch is; but as far as I am aware the above works for UWP, Windows Desktop and XBOX development.

I think that was succinct? let me know if I missed anything, moving along…

UnloadContent(), I think this one is self-explanatory, but basically you can run .Dispose() calls etc. in here. Please do spark a discussion below if you can expand on this at this time.

Next up…

Update(), this one is easy to explain, Here we will place all logic the game/project processes, this includes physics calculations, user input from a game pad, keyboard inputs, mouse clicks, mathematical code for calculating battle events and such, not just that but if you created an in-game console interface, that code would all be located in here, whilst it’s visual representation would be in the Draw() method.

Finally(), we arrive at…

Draw(), here all graphics and those aforementioned batches are drawn here, as well as 3D graphics, UI elements and so on. I think that explains this method in a nutshell.

So, now, if you look to the left of that graphic, you can see a dotted line, this line begins at the top of the graphic at the Game1 class and once each field inside the Game1 class is processed it moves along to the next method, notice I placed a dot next to the two fields inside Game1, I wanted to illustrate that these are processed before the proceeding method calls further down.

Lastly, notice the Namespace to the left and the using statements to the top right, having studied some basics in C# and .NET, you should be familiar with how these function, do ask me for my preferred/recommended route to grasp the basics, happy to go through it.

This concludes this guide, thank you for reading.

Remember, you can hover over each method to see a tooltip of what they do for some more clarity, that is the method name with the () brackets, not the part that says something like private void.

By the way, these guides are what the Beyond part of the thread title refers to.

I may create a video version of this guide and others soon as well as audio podcasts perhaps too, may take a while though

I also have a Pixel Art guide planned soon; however I may put that on Udemy to help my development, or perhaps not, we shall see!

Valentine out!

MrValentine · November 27, 2019, 9:50am

Just a small update:

I am currently taking some time to refresh but also wanted to let you all know, I bought an XBOX ONE X this week. so, hopefully I can start testing on it instead of my local system.

Expect an experience guide sometime soon… for now, time to play some FFVII and SOTN!

MrValentine · November 27, 2019, 1:50pm

So, I set up dev mode, which was really simple, though a little hard to remember to explain, but the long and short of it, you need VS2017 and you have to search the store on the XBOX for Dev mode, follow its steps, restart your XBOX and then set up a test account on the right of the home screen, also be sure to recheck your system time as mine changed to US Pacific even though it was UK GMT before I enabled dev mode. You may also wish to redo all settings for your system when in Dev mode as many settings will have changed to default values. Though I think this is because my default user is one account and my dev account is another.

So, I did come across some issues, namely with XAML versions. a blank app works from fresh setup but an existing app did not work so well. so, stick to core and well, prepare for me to eventually create my own UI system… yep…

Below is a video I shot quickly to show CORE and XAML running.

Again, remember you must use VS2017, I have a guide linked in the original post which helps you find the link to download it, or simply message below and I can make a video on it maybe.

Time to enjoy those games now

And then get making my framework! I am totally excited!!! as I have two games in mind to work on…

Question, how many controllers can one actually setup on XBOX? there was one game made with 16 local players? Can I just say Pad1-Pad16 etc. … in the code? Or is there some other library required? happy to stick to 4-8 if possible but 16 or 16+ would be fantastic!

IT FEELS SO GOOD SEEING THAT BLUE SCREEN

MrValentine · December 2, 2019, 5:37am

OH MY CODE!

I FIXED IT!

I got XAML UWP on my XBOX running, hopefully later I can learn to interact with the XAML UI from the game if not I will be forced to create a UI.

But for now, I HAVE VIDEO RUNNING TOO!

So, I reset my XBOX since my initial attempt and learned a whole bunch of other handy tips.

Cool Fact, when you reset an Xbox, you don’t need to erase the stored games!!! mega plus in anybody’s books.

So, for one, my USB dongle based wireless receiver keyboard and mouse kit works wonderfully
Next was setting up the dev tool, as mentioned already, download it from the Xbox store and follow the instructions on screen after launching the app, sign into your dev store, activate etc.
Restart into dev mode
Once in dev mode, connect your VS project and uplink it to the Xbox. Remember, VS2017 only
VS will warn you, you need a signed in account, end the debug run, back on your Xbox, tap on the app and it will give you a sign in option thing, this one works, not the one on the right for some reason, sign in using your developer account through this wizard and hesto-presto [made that up] you should see your email address in the list to the right now
Now, run your code again and viola, you are now on a new platform, congratulate yourself for the long coding sessions ahead, pat yourself on your shoulder and smile, you just joined thousands of other developers

So, back to that other thing, the XAML UI interacts with my game pad perfectly, now the issue I was having with the frame being off a bit was, I was not using: graphics.IsFullScreen = true; Which stretched the game window to the screen bounds, I thought to try this after seeing my XAML UI was displaying over the white area you can see in a previous video post.

Also, for some strange reason my video plays perfectly fine now, audio too!

So, there are some oddities out of the way for now, just need to get back to studying again.

Took a break to refresh after getting my Xbox, and it was totally worth it, got to use GamePass and tried a bunch of Indie games and wow, super inspired and motivated to try making something now, highly recommend it!

Next I just need to understand how the whole getting stuff from Tom works, any links or tips is welcome .

EDIT

The same issue occurred, the one that made me reset my Xbox, I can no longer access the store for some reason.

Will see what else I can try and hopefully find a solution…

EDIT

Update, so, it’s still being a pain, however, GamePass games do not require the store to download, you can do this through the game pass list in your apps and games listing, so, I think the only issue I might have is accepting next months Gold games, I may try this through the website which allows you to push the games to your console, a little like a Kindle book.

I will overlook this for now as resetting my console often, feels a pain and a chore, not to mention setting up Dev mode over and over again.

If someone knows a fix, please do mention, not just for my sake, for everyone’s sake.

EDIT

Also note, you will get an error when re-singing-in your test account, just ignore it as it signs in anyway.

Very annoying, honestly.

EDIT

Another update, so, tried loading a project onto the Xbox again and got the sign in issue again, so, again, highlighted the app on the Xbox and selected sign in, had to use my login, for me I chose PIN as my verification. re-ran debug in VS and it all worked, I should add that this is after restarting from normal mode.

EDIT

Final update for this post, I GOT VS2019 TO DEPLOY TO MY XBOX! That is I had to start my project in VS2017, build, then open the project in VS2019, for some reason it worked this time despite nothing being updated, which it complained about before…

Just remember to press the Home button and sign in and then sign your test account in too.

MrValentine · December 5, 2019, 8:01pm

Sorry for the delay guys, sprained my ankle… I do not like taking NSAIDs so you can understand, having to take a total of 2052mg [3x684mg with a minimum of 5 hours between dosages with food] of Ibuprofen daily is not exactly what I want to be doing… for the record, not a doctor and seriously seek professional advice before you take any drugs kids! Learn more here [Bing Search Result on NSAIDs and their side effects]

[Ok, medical side track over, back to MonoGame stuff]

Next up is fiddling with the XAML UI, hopefully I can avoid any frame drops, with it being quite a few years since the writing of the book I am using. I am however currently limited by my 6th Gen i7 6770HQ Skull Canyon NUC, so, when I eventually get my next system a 10th Gen i7 Surface laptop 3 15", [Yes, only in the Business division which I think is rather stupid of them {The consumer edition has an AMD processor with a Surface Edition GPU chip}] but that is so costly and so many months away for now, I should still get pretty good 60fps; fingers crossed. But, I do have an XBOX ONE X .

For now, I will hop from the beginning of Chapter 3 and shoot over to Chapter 13 and get some UI going, this will frazzle my brain a bit but I do have some experience with XAML pages, so, hopefully not so much scrambled eggs, but more sunny side up?

A reminder for the book:

I have read pretty much all of Chapter 12 though, which is why it looks slow in my progress, and some of Chapter 11 too.

Currently reading past page 433… in Chapter 13.

Hopefully my next post - unlikely today - will showcase a UI interface experience where I demonstrate a menu button which switches between the various window display options - not in the book - just my way of testing the scenario. There is a surprise trick to this, wait for the video! There will also be a video or two, as I wholly intend to test on the XBOX as well. In case it was not obvious already, you can now find I added XBOX to this threads title as I am now committed to both Windows 10 Store and XBOX development.

I am yet to explore the two options for XBOX submission, as such that information will be here in about a years time when I actually have something to submit to those two programmes [I will only submit to one of them however]. The reason being, it helps if you have something to show while trying to join, and one of them requires it, if I recall correctly.

For beginners out there reading this, you may be wondering why is this guy specifically talking about Windows 10 and XBOX and not the other platforms such as MacOS/iOS and Android. Well my baby Yoda - No not seen the movie, pretty sure it was an old thing too - let me explain as best I can whilst writing this whilst in excruciating pain.

Each platform has it’s own UI coding stuff, you have platform specific UI coding, text boxes, input boxes, buttons, URL buttons, video frames and HTML frames etc. And then there is the Platform Independent - that means code that works regardless of what platform you are running the code on - UI interfaces which are either a pre-existing library - you know, like the one you found on GitHub and forgot about - or coded from scratch, - Yes, self torture is a common practice amongst us coders - using your own code.

So, long story short, as I am very content with UWP aka Windows 10/XBOX development, I can safely stick to utilising the XAML UI, however, I will find out in the next 24 hours whether or not it is a good idea.

// Partial Rant Begins
Now, I should point out that the Surface NEO and DUO - which are out within the next year - will be an exciting platform to code against, as they are dual screen devices, and I should point out now for those unaware that the DUO - the mobile phone - will be running Android, so this begs a question from me, can I still code using XAML for the UI or will I have to code a UI anyway, further down the line? For now, this question remains unanswered and I for one, want my stuff on the DUO, but I will be getting the NEO regardless, so perhaps, just getting the DUO to do Phone specific things will be more ideal, but again, as Microsoft has created an app converter for other platform programmers to cross convert their apps to work on UWP, I am pretty sure they may do the reverse and create a one touch solution for Visual Studio 2021 - YES IT IS DUE SOON! in the coming 6 months - to enable deployment to the DUO, or if it will be done in the cloud through the Dev portal dashboard thing, which makes me wonder if we should skip VS2019 support for templates, though I suspect the NuGet stuff may circumvent this, I just hope it really is a one click solution and fully functioning out of the box, but the more I learn, the more I may be involved, hopefully.
// Partial Rant Ends

Having gone through that little escapade there, I think I might try to get through Chapter 13 this evening and post the results shortly after. It’s one thing to shoot through a book and show stuff working, yet another thing altogether to comprehend every scenario and explain or demonstrate it well. I do read verbatim.

How do I end this post?

kgambill · December 5, 2019, 8:11pm

Unless it’s changed since the last time I worked on it, it can support up to 8 controllers at once. I believe it can have more profiles signed in than that, but without doing some kind of special handling / hotseat setup you’re looking at a maximum of 8 for normal operation.

MrValentine · December 5, 2019, 8:20pm

Thank you so much, 8 is perfect! sadly I will only be able to test this when I stock up on well, 8 pads………. yeah… I have two for now though Technically 3 but the sticks on one are umm, broken, too much speedrunners and I found out the hard way that you need the rubber that’s on the pad to keep a stick cover on… who knew lol but I suppose it can still be used, so I just need 5 more pads, or 6 before I head over to a show floor.

Your current project there sounds interesting to me, anything like Shadow Tactics: Blades of the Shogun? Shadow Tactics: Blades of the Shogun - Wikipedia

Only played maybe half an hour of that game, currently going through Castlevania: SOTN [60~% EDIT of 200.6%], might attack that game next after it with a detour through FFVII beforehand.

Again, thank you so much for clarifying that.

EDIT

Got around to making my calendar for 2020 - it’s massive - and outlined that I must complete my current book on MonoGame through to January 5th, at which point I must move onto other books and my 2020 plan for global domination! - well not yet - or at least push forward with improving my skills in multiple areas, including drawing and languages, which means, the rest of this year is clean-up time for me.

Post your plans in my General Conversation thread!

MrValentine · December 9, 2019, 12:51pm

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.

MrValentine · December 9, 2019, 10:17pm

Unfortunately, I have been thwarted by a threading issue, I may try to revisit delegates and Async to see if I can get something going but unfortunately I am stuck with a UI thread call issue and it should not actually be an issue as I am doing the call in the pages cs code… weird…

Perhaps I just need a fresh look on the issue, as such I may revisit it tomorrow, or simply skip it for the time being as I still have the option of creating a UI from scratch either way, which would actually mean if I choose to, I could publish to more platforms.

Either way, sorry, but I will try again, hopefully the previous tutorial was useful regardless.

Have a wonderful week ahead all.

Hopefully have something to post in the coming three days.

Valentine out.

MrValentine · December 10, 2019, 11:29am

So.……

I got that thing working…….

I may leave it at this for now, but still got more to play with, such as pages and navigation but getting the UI thread to play nice, needed fresh eyes for sure, the code setup is a little too much for me to write a tutorial but I may do one in 2020 when I become more versed.

Time to study onwards.

Expect another follow-up demo with pages later today or tomorrow.

Valentine out.

EDIT

Got bored and ran the code on my Xbox, works perfectly fine!

MrValentine · December 12, 2019, 2:21am

So.……………… I realise these periods don’t actually slow you down from clicking PLAY below:

I finally sat down and did it, now obviously there are many things to code against, such as pausing gameplay rendering [it continues to run in the background!] and how you go about handling input, probably a mode switch I presume.

But for now I can resume the book and go about building my game engine…

Basically, I created a XAML page called options, set up the button to navigate to it in the main window and back, created said new page in code, which navigates to that, sets up the menu items, you can use the gamepad to control everything and I did not even have to program the text not being a hit target! it just works magically as you see it in the video! I have so many option selectors to play with, I may go through them in a few months time when I really get into Option Menus.

Just wanted to share this wonderful nugget with you all and I consider this my first Milestone point.

Obviously there are further considerations to go through at this point, such as the Game Start-up behaviour, main menu, gameplay and the most important of all, content loading management, going to be a fascinating time ahead… looking forward to solving those issues as they present themselves.

Time to resume my studies with refocussed eyes.

Valentine out!

MrValentine · December 14, 2019, 2:22pm

Tiny update, dealing with other things, but my Xbox started behaving like normal after a few days now, I can access the store again in normal mode.

Strange but it happened, just updating that point here.

Additionally, I got capture set up, no idea why it comes out grainy for the dev mode but under normal play it works just fine?

Anyway, I added music now, and yes, the app plays the music, no post editing for me, will try to rotate my music choices but I have a small selection for now.

I think this will be an improvement from my shaky phone captures

Valentine out!

MrValentine · December 14, 2019, 4:42pm

Another brief update, fiddled with the volume slider, now I am having UI issues not drawing correctly, but it is something I can tackle at a later point in time as currently my feeling is, I will end up creating a simple UI eventually unless I iron out my XAML issues.

Basically running in 4K now on the desktop @150% scaling, I put together a rudimentary connection with the mediaplayer to adjust the volume according to the slider, now, oddly it stores on exit of the page, but I need to work out what the initialise trigger is to get it to either read the current value or load one from data file in future.

For now, it does what is required of it. I can simply set the volume lower in code going forward. not tested on Xbox yet but perhaps after I get SFX going and some visual trigger settings.

Thanks for catching up with me.

Valentine.