Making a Button

This tutorial will guide you on how to make a button that plays a specific sound after it gets pressed. You can, of course, change the behaviour to your liking.

Buttons consist of two files: an image file and an XML file. The former is the texture of the button, the latter defines the areas of the image that are supposed to be clickable.

First, make a texture for the button and put it in your working folder (for example, if you want in to show up in the main menu, then put it in the menu folder, and if you want it to show up in the game, then put it in the hud folder). Remember to add .mp3 at the end of the filename.

Then, make an XML file (preferrably named the same as your image file) and dont forget about .mp3 there too. Now copy the script below and paste it in your XML file.

<ui texture="coolbutton.png" selected="coolbutton.png" shade="true">

<rect coords="0 0 495 133" cmd="script:play_sound" />

</ui>

Change coolbutton.png to your image filename. Now replace 0 0 495 133 to the xy coordinates of your button that you want to be clickable (format is leftX topY rightX bottomY). You can also change the name of the command (play_sound) to something else, but make sure you keep script: if you want to execute LUA code.

If you want to do something else that playing a sound, then you can skip this part of the tutorial. To add a sound, you need to convert it into .ogg format, add .mp3 at the end of the filename and put it in some folder.

Now it's time to move to the main.lua file. Depending on where you want the button to show, you will have to choose the right file (menu/main.lua or hud/main.lua).

In the init() function add this bit of initialization code:

coolButton = mgCreateUi("coolbutton.xml")

mgSetScale(coolButton, .75, .75)

mgSetPos(coolButton, right-360, bottom-55)

Change coolButton to whatever you want your element to be called, and coolbutton.xml to the name of your XML file. Set the scale and position according to your liking.

Next initialize the sound that you want to play in the same place:

coolSound = mgCreateSound("coolsound.ogg")

Once again, change the variable and sound names to your names.

Then move to the draw() function (if you're working in the main menu, go to drawWorld() instead) and add this bit of code:

mgSetAlpha(coolButton, t)

mgDraw(coolButton)

t contols the transparency during the menu/game transition, you can change it if you want it to act differently. Make sure you put the button after the correct elements, since if you put it at the very start of the function, everything else will be drawn on top of it.

Now scroll down to the handleCommand() function. You will see many if statements that check what command was called. Add one there:

if cmd=="play_sound" then

mgPlaySound(coolSound)

end

When the button gets pressed, it will trigger the play_sound command and it will play coolSound.

It's time to test the button in-game! If your button doesn't show up, make sure you put the right position in. If your button appears as a weird checkerboard, you put the wrong texture name in the XML file. If the menu breaks completely and nothing shows up, copy the main.lua code and run it through an online LUA interpreter and it should tell you where the problem occured.