An Introduction to Buttons in Quorum

In this tutorial, we will learn how to use Buttons in the Quorum Game Engine. A Button is a simple interface tool which executes a Behavior when clicked.

For this tutorial, we will create a Button that says "Hello world!" aloud and outputs it as text each time it is pressed. To start, create a new Game Application project.

Standard Buttons

In order to use a Button, we must include the Button library with the following use statement:
use Libraries.Interface.Controls.Button

Since we want the Button to be usable as soon as the game begins, we’ll create it in the CreateGame action. The first thing we need to do is use the Button’s Initialize action. There are several versions of the Initialize action with different parameters, but for this section we’ll use the action with the format "button:Initialize(number width, number height, text name)." We will use 200 for the width, 100 for the height, and "Click me!" for the name, giving the following lines of code:

Button button
button:Initialize(200, 100, "Click me!")

After we Initialize the Button, we can set its position like we would a Drawable, using the SetPosition action. Then we can add it to the game, giving us the following lines of code:

button:SetPosition(300, 300)
Add(button)

So far, the Main class is as follows:

use Libraries.Game.Game
use Libraries.Interface.Controls.Button

class Main is Game
    action Main
        StartGame()
    end

    action CreateGame
        Button button
        button:Initialize(200, 100, "Click me!")
        button:SetPosition(300, 300)
        Add(button)
    end

    action Update(number seconds)
    end
end

When we run the program, the Button appears correctly in the Game window.

This image shows the Button's appearance in the game window.

However, nothing happens when the Button is clicked. To implement this, we must add a Behavior to the Button.

To begin, create a new Quorum Class, which we will name "OutputBehavior.quorum." This class will use the libraries for Behavior, BehaviorEvent, and Speech, giving us the following use statements:

use Libraries.Interface.Behaviors.Behavior
use Libraries.Interface.Events.BehaviorEvent
use Libraries.Sound.Speech

The class itself will inherit the Behavior class, and we will override the Run action to say and output the desired text. This gives the following Run action:

action Run(BehaviorEvent event)
    Speech speech
    speech:Say("Hello world!", false)
    output "Hello world!"
end

The resulting OutputBehavior class is as follows:

use Libraries.Interface.Behaviors.Behavior
use Libraries.Interface.Events.BehaviorEvent
use Libraries.Sound.Speech

class OutputBehavior is Behavior

    action Run(BehaviorEvent event)
        Speech speech
        speech:Say("Hello world!", false)
        output "Hello world!"
    end
end

Now that we have our completed OutputBehavior class, we can add it to the Button in our main class using the Button’s SetBehavior action. To do so, return to the CreateGame action, and add the following lines:

OutputBehavior behavior
button:SetBehavior(behavior)

This complete main class is as follows:

use Libraries.Game.Game
use Libraries.Interface.Controls.Button

class Main is Game

    action Main
        StartGame()
    end

    action CreateGame
        Button button
        button:Initialize(200, 100, "Click me!")
        button:SetPosition(300, 300)
        Add(button)

        OutputBehavior behavior
        button:SetBehavior(behavior)
    end

    action Update(number seconds)
    end
end

Now, when we run the program, clicking the Button will say and output the "Hello world!" message

Drawables as Buttons

In the last section, we created a simple rectangular Button. However, we can also use Drawables as a Button.

To do so, we must include the Drawable library by adding the following use statement to the top of our main class:

use Libraries.Game.Graphics.Drawable

Returning to the CreateGame action, we need to declare a new Button at the bottom of the action, giving the following line:

Button button2

For this tutorial, we’ll simply use a circle for this second Button. First, we need to create a Drawable, and then load the circle. This is done with the following lines:

Drawable circle
circle:LoadFilledCircle(50)

Next, we need to Initialize the Button, but we will be calling a different Initialize action form before. We will instead be using an Initialize action that accepts a Drawable parameter, giving us the following line:

button2:Initialize(circle)

We can reuse the OutputBehavior we created before, and then need to set the second Button’s position and add it to the game, giving us the following lines of code:

use Libraries.Game.Game
use Libraries.Interface.Controls.Button
use Libraries.Game.Graphics.Drawable

class Main is Game

    action Main
        StartGame()
    end

    action CreateGame
        Button button
        button:Initialize(200, 100, "Click me!")
        button:SetPosition(300, 300)
        Add(button)

        OutputBehavior behavior
        button:SetBehavior(behavior)

        Button button2

        Drawable circle
        circle:LoadFilledCircle(50)

        button2:Initialize(circle)
        button2:SetBehavior(behavior)
        button2:SetPosition(350, 150)
        Add(button2)
    end

    action Update(number seconds)
    end
end

Now, when the program is run, the white circle beneath the first Button can also be activated to run the OutputBehavior.

This is an image of the end product window appearance.

Next Tutorial

In the next tutorial, we will discuss Trees, which describes how to use Trees.