We’d love to hear from you. Whether you have a question that you’d like us to answer as part of our FAQ,  you’ve identified something that just doesn’t quite look right in one of our tutorials, you have a business opportunity or for any other reason, please use this simple form to contact us.

We’ll do our best to provide a prompt response.

Like what you see?...pass it on!

Creating a Simple UI

Alright… back to our Title Scene… time to add a couple of buttons, one to start the game and the other to exit it. This effectively makes our title screen also our main menu.

Start by adding a ToolButton to the scene, parented by the root Control node. I then renamed it QuitGameButton. Once created, you can set the Button text in the Text field in Inspector.

Clipboard-Image_4

Creating A Font

The button will use the default Font, which doesn’t really look all that great, so lets create our own. Scroll down to the Control section of the Inspector, then locate Font, drop it down and select New DynamicFont.

Creating-a-Font

Next, double click the newly created DynamicFont to expand it’s options, then set the following values. Size = 64, Outline Size = 4, Outline Color then choose black. Finally drag the file animeace.ttf from the folder assets/fonts/ and drop it on the Font Data field.

Configuring-the-Font

Now our button will look much more interesting… but we need two. Let’s simply Duplicate our existing button, rename it to NewGameButton and set the Text property to New Game. To duplicate, simply right click the existing button in the Scene tab, and select Duplicate:

Duplicate-Node

Your final Scene should look like:

Our-current-scene-hiearachy

We also need to position each object in the scene. Simply select the button, select Move mode in the 2D view, and position each button.

Positioning-the-buttons

Finally, we want to actually wire the buttons up to do something!

Handling Events/Signals

Select one of the buttons, switch to the Node panel and double click on the pressed() signal.

Connecting-a-Signal

This will bring up a dialog where we configure the code that will be fired when this button is pressed. We are going to reuse the script we already attached to the root Control in the node, so select it.

Pick-Node-to-Attach-Script-To

Since we named our buttons well, the autogenerated function name is a pretty good choice so leave it alone. Simply click the Create button.

Clipboard-Image_5

Now repeat this task for the New Game button, again connecting to the root Control and taking the default name. This will create two new functions in our script. Replace that script with the following code:

extends Control

func _ready():
  globals.kills = 0
  globals.currentStage = 0

func _on_QuitGameButton_pressed():
  get_tree().quit()

func _on_NewGameButton_pressed():
  get_tree().change_scene("/GameScene.tscn")

This code simply exits the game if you hit the Exit Game button (duh?), and switches scenes to GameScene.tscn when we click Play Game. Of course, I suppose we should create the GameScene now, shouldn’t we?

Global Data via Autorun<<PreviousTable of ContentsNext>>Creating Main Game Scene

Like what you see?...pass it on!

script ends --->