What's the simplest way to make a clickable button?

Hi all,

I’m currently studying a university game design course - we’ve been using Monogame for two months now, and it hasn’t been easy to learn - our only coding experience before this was Unreal Engine 4.

Our current project is to make a platformer in Monogame with animations, collision, jumping and win / lose screens.

It’s been quite difficult to find up-to-date tutorials covering any of these topics, but clickable buttons in particular have been a nightmare. I’m hoping for a system where players can use their mouse to click a button, and that button would then take them to a different gamestate (in this case, a button to go from main menu to level 1 and a separate button to quit the game.)

My current system of pressing numpad keys to swap gamestates is working well, but the assignment specifically mentions clickable buttons. Any help would be much appreciated.

Hi @Westy10, Welcome to the Community!

A few tips for future posts:

Detail which version of MonoGame you are using, Currently the latest release is NuGet 3.8 Release
Detail which project you are using, DesktopDX / UWP / OpenGL / Custom Fork / Dev Builds …
Your OS, Windows 10 / MacOS / Linux Distro
EDIT Devices testing or publishing to

If the situation is hardware related or you mention refresh rates or something similar, detail your hardware, Input Devices, Screen, GPU, CPU, RAM and anything else you feel may help others solve your problem without them needing to ask and take more time to provide a response.

Happy Coding!

Thanks for the welcome! Sorry for not including details, probably would’ve helped :laughing:

I’m on the most recent release, NuGet 3.8 on Visual Studio 2019.

The project I set up is “for the Windows desktop using DirectX” and I’m on Windows 10 x64.

I’m testing all this on my laptop, and it’s a computer-only project so any mobile features aren’t (and won’t be) used.

Hopefully all that helps, mainly just looking for some kind of push in the right direction code-wise. More than happy to give out extra details if needed.

c# - Making a button Xna / MonoGame - Stack Overflow

Try that

How to create an XNA Button and Labels with Mouse Events - CodeProject

Or that…

Create buttons menu in xna, quickly and easily « Alec’s Web Log (alecjacobson.com)

Or that…

Basically, search for anything XNA related and if you get stuck, post links and where you are stuck in a new post.

1 Like

Managed to find a helpful YouTube video covering exactly what I needed from the ‘Oyyou’ channel. Github and video links below if anyone else needed a hand.

He goes quite quickly but the method was sound, and I just needed to change the code that changed the background colour into one that changed the gamestate.

YouTube link

Nice

3 Likes

I do this using sprites or spritefonts to represent the button on-screen, then whenever the MouseState indicates a click you can check if it was inside the sprite/font’s Rectangle.

Basically a button is a rectangle bounds check that is wrapped around a texture.

Ha!, It’s the tutorial guy!

Monogame - Game Dev Tutorials - YouTube

That should cover most of what you need.