GUI Basic Setup

Screen shot of GUI Basic Setup
0_basic_setup.py
  1"""Demonstrates general setup.
  2
  3If Arcade and Python are properly installed, you can run this example with:
  4python -m arcade.examples.gui.0_basic_setup
  5
  6Content:
  7- create a view manually creating UIManager and adding widgets
  8- create a second view extending UIView and adding widgets
  9
 10"""
 11
 12import arcade
 13from arcade.gui import (
 14    UIManager,
 15    UITextureButton,
 16    UIAnchorLayout,
 17    UIView,
 18)
 19
 20# Preload textures, because they are mostly used multiple times, so they are not
 21# loaded multiple times
 22TEX_RED_BUTTON_NORMAL = arcade.load_texture(":resources:gui_basic_assets/button/red_normal.png")
 23TEX_RED_BUTTON_HOVER = arcade.load_texture(":resources:gui_basic_assets/button/red_hover.png")
 24TEX_RED_BUTTON_PRESS = arcade.load_texture(":resources:gui_basic_assets/button/red_press.png")
 25
 26
 27class GreenView(arcade.View):
 28    """Uses the arcade.View and shows how to integrate UIManager."""
 29
 30    def __init__(self):
 31        super().__init__()
 32
 33        # Create a UIManager
 34        self.ui = UIManager()
 35
 36        # Create an anchor layout, which can be used to position widgets on screen
 37        anchor = self.ui.add(UIAnchorLayout())
 38
 39        # Add a button switch to the other View.
 40        button = anchor.add(
 41            UITextureButton(
 42                text="Switch to blue view",
 43                texture=TEX_RED_BUTTON_NORMAL,
 44                texture_hovered=TEX_RED_BUTTON_HOVER,
 45                texture_pressed=TEX_RED_BUTTON_PRESS,
 46            )
 47        )
 48
 49        # add a button to switch to the blue view
 50        @button.event("on_click")
 51        def on_click(event):
 52            self.window.show_view(BlueView())
 53
 54    def on_show_view(self) -> None:
 55        self.ui.enable()
 56
 57    def on_hide_view(self) -> None:
 58        self.ui.disable()
 59
 60    def on_draw(self):
 61        # Clear the screen
 62        self.clear(color=arcade.uicolor.GREEN_EMERALD)
 63
 64        # Add draw commands that should be below the UI
 65        # ...
 66
 67        self.ui.draw()
 68
 69        # Add draw commands that should be on top of the UI (uncommon)
 70        # ...
 71
 72
 73class BlueView(UIView):
 74    """Uses the arcade.gui.UIView which takes care about the UIManager setup."""
 75
 76    def __init__(self):
 77        super().__init__()
 78        self.background_color = arcade.uicolor.BLUE_PETER_RIVER
 79
 80        # Create an anchor layout, which can be used to position widgets on screen
 81        anchor = self.add_widget(UIAnchorLayout())
 82
 83        # Add a button switch to the other View.
 84        button = anchor.add(
 85            UITextureButton(
 86                text="Switch to green view",
 87                texture=TEX_RED_BUTTON_NORMAL,
 88                texture_hovered=TEX_RED_BUTTON_HOVER,
 89                texture_pressed=TEX_RED_BUTTON_PRESS,
 90            )
 91        )
 92
 93        # add a button to switch to the green view
 94        @button.event("on_click")
 95        def on_click(event):
 96            self.window.show_view(GreenView())
 97
 98    def on_draw_before_ui(self):
 99        # Add draw commands that should be below the UI
100        pass
101
102    def on_draw_after_ui(self):
103        # Add draw commands that should be on top of the UI (uncommon)
104        pass
105
106
107def main():
108    """ Main function """
109    # Create a window class. This is what actually shows up on screen
110    window = arcade.Window(title="GUI Example: Basic Setup")
111
112    # Show the view on screen
113    window.show_view(GreenView())
114
115    # Start the arcade game loop
116    arcade.run()
117
118if __name__ == "__main__":
119    main()