Skip to main content

Buttons

User interfaces are full of buttons. An OK button closes a dialog. Perhaps you want to ask your player to click Yes or No in response to a question. You may have buttons for actions like Attack or Defend in a battle menu.

Basic Clickable Button​

A clickable button consists of three parts:

  • Use a Button element to create a button in your user interface.
  • Give it a PressIntent to make it trigger a signal when pressed.
  • Listen for Pressed signals to respond to the button being pressed.

Most commonly, you use a RaisedButton with backgroundColor=Color:Primary to create a button that stands out and looks clickable, like this:

pub game fn World.Main() {
    SpawnEachPlayer owner {
        Content {
            RaisedButton(PressIntent<attack>, backgroundColor=Color:Primary) { "Attack" }
        }
        
        on Pressed<attack> that {
            Print { "And now we attack!" }
        }
    }
}

Sending Keycodes​

Let's say you have a spellcasting game, where players press buttons to cast spells. To cast a fireball, they can either press the spacebar on their keyboard, or click the user interface button that says "Fireball".

A good way to do this is make the UI button send Keycode when clicked, so you can handle them both the same way:

pub game fn World.Main() {
    SpawnEachPlayer owner {
        Content {
            RaisedButton(KeySpacebar, backgroundColor=Color:Primary) { "Fireball" }
        }
        
        on ButtonDown(KeySpacebar) {
            Print { "Taste my fireball! Rawrrrr!" }
        }
    }
}

A button can take you to a different page when clicked by giving it the page fn as its intent. Give a button a game fn as its intent to enter that game when the button is clicked.

pub page fn owner.HomePage {
    Content {
        RaisedButton(Main, backgroundColor=Color:Primary) { "Play" }
        RaisedButton(AboutPage, backgroundColor=Color:Secondary) { "About" }
    }
}

pub page fn owner.AboutPage {
    Content {
        P { "This is a game about ducks and bread" }
    }
}

pub game fn World.Main() {
    Content {
        P { "Welcome to the game!" }
    }
}

See Entrypoints to learn more about pages and games.

You may want to create links to other pages, for example a link to your game's Discord server. You can do this by:

  • Use a Link style of Button to create a link that looks like a hyperlink.
  • Simply use the String URL as the intent to make it open the URL when clicked. Make sure your URL starts with http:// or https://.
pub game fn World.Main() {
    Print {
        Link("https://easel.games") { "Link to My Favorite Website" }
    }
}