This tutorial shows how to use most of Arcade's gui's widgets.
First, let's start a blank window with a view.
.. literalinclude:: menu_01.py
:caption: Opening a Window
:linenos:
For this section we will switch the current view of the window to the menu view.
First we will import the Arcade gui:
.. literalinclude:: menu_02.py
:caption: Importing arcade.gui
:lines: 6-8
:emphasize-lines: 3
We are going to add a button to change the view. For drawing a button we would need an :py:class:`~arcade.gui.UIManager`.
.. literalinclude:: menu_02.py
:caption: Initialising the Manager
:lines: 19-22
:emphasize-lines: 3
After initializing the manager we need to enable it when the view is shown and disable it when the view is hidden.
.. literalinclude:: menu_02.py
:caption: Enabling the Manager
:pyobject: MainView.on_show_view
:emphasize-lines: 6
.. literalinclude:: menu_02.py
:caption: Disabling the Manager
:pyobject: MainView.on_hide_view
:emphasize-lines: 3
We also need to draw the children of the menu in on_draw.
.. literalinclude:: menu_02.py :caption: Drawing UI on screen :pyobject: MainView.on_draw :emphasize-lines: 7
Now we have successfully setup the manager, we can now add a button to the view. We are using :py:class:`~arcade.gui.UIAnchorLayout` to position the button. We also setup a function which is called when the button is clicked.
.. literalinclude:: menu_02.py :pyobject: MainView.__init__ :caption: Initializing the Button :emphasize-lines: 8-12
We make a boiler plate view just like we did in Step-1 for switiching the view when the pause button is clicked.
.. literalinclude:: menu_02.py
:caption: Initialise the Menu View
:pyobject: MenuView
- :ref:`menu_02` |larr| Where we are right now
- :ref:`menu_02_diff` |larr| What we changed to get here
In this step we will setup the display buttons of the actual menu. The code
written in this section is written for MenuView
First we setup buttons for resume, starting a new game, volume, options and exit.
.. literalinclude:: menu_03.py
:caption: Initialising the Buttons
:pyobject: MenuView.__init__
:emphasize-lines: 6-11
:lines: 1-12
After setting up the buttons we add them to :py:class:`~arcade.gui.UIGridLayout`, so that they can displayed in a grid like manner.
.. literalinclude:: menu_03.py
:caption: Setting up the Grid
:pyobject: MenuView.__init__
:emphasize-lines: 14-23
:lines: 1-24
Final code for the __init__ method after these.
.. literalinclude:: menu_03.py
:caption: __init__
:pyobject: MenuView.__init__
- :ref:`menu_03` |larr| Where we are right now
- :ref:`menu_03_diff` |larr| What we changed to get here
We basically add event listener for on_click for buttons.
First we will add the event listener to resume, start_new_game and exit button as they don't have much to explain.
.. literalinclude:: menu_04.py
:caption: Adding callback for button events 1
:lines: 98-113
Now we need to implement an actual menu for volume and options, for that we have to make a class that acts like a window. Using :py:class:`~arcade.gui.UIMouseFilterMixin` we catch all the events happening for the parent and respond nothing to them. Thus making it act like a window/view.
.. literalinclude:: menu_04.py
:caption: Making a Fake Window.
:pyobject: SubMenu
We have got ourselves a fake window currently. We now, pair it up with the volume and options button to trigger it when they are clicked.
.. literalinclude:: menu_04.py
:caption: Adding callback for button events 2
:lines: 113-123
- :ref:`menu_04` |larr| Where we are right now
- :ref:`menu_04_diff` |larr| What we changed to get here
We finalise the menu or you can call it the last step!
We will edit the parameters for the sub menu to suit our needs. Will explain later why are those parameters needed.
.. literalinclude:: menu_05.py
:caption: Editing parameters
:lines: 161-168
We also need to change accordingly the places where we have used this class i.e
options and volume on_click event listener. The layer parameter being set
1, means that this layer is always drawn on top i.e.its the first layer.
.. literalinclude:: menu_05.py
:caption: Editing arguments
:lines: 115-136
- Now you might be getting a little idea why we have edited the parameters but
- follow on to actually know the reason.
We will be adding a :py:class:`~arcade.gui.UILabel` that explains the menu. :py:class:`~arcade.gui.UISpace` is a widget that can be used to add space around some widget, you can set its color to the background color so it appears invisible.
.. literalinclude:: menu_05.py
:caption: Adding title label
:lines: 193-195
Adding it to the widget layout.
.. literalinclude:: menu_05.py
:caption: Adding title label to the layout
:lines: 238-239
We will use :py:class:`~arcade.gui.UIInputText` to add an input field. The :py:meth:`~arcade.gui.UIWidget.with_border` function creates a border around the widget with color(default argument is black) black and thickness(default argument is 2px) 2px. Add this just below the title label.
.. literalinclude:: menu_05.py
:caption: Adding input field
:lines: 197
Adding it to the widget layout.
.. literalinclude:: menu_05.py
:caption: Adding input field to the layout
:lines: 240
If you paid attention when we defined the input_text variable we passed the
text parameter with our input_text_default argument. We basically added
those parameters in our sub menu so that it can be used by both volume and
options button, with texts respecting their names. We will repeat this again
in the last also for those of you who are skipping through this section :P.
Don't go on the section title much, in Arcade the :py:class:`~arcade.gui.UITextureToggle` is not really a button it switches between two textures when clicked. Yes, it functions like a button but by "is not really a button" we meant that it doesn't inherits the button class. We also pair it up horizontally with the toggle label.
.. literalinclude:: menu_05.py
:caption: Adding toggle button
:lines: 199-216
Adding it to the widget layout. Add this line after you have added the input field.
.. literalinclude:: menu_05.py
:caption: Adding toggle button to the layout
:lines: 241
We add a dropdown by using :py:class:`~arcade.gui.UIDropdown`.
.. literalinclude:: menu_05.py
:caption: Adding dropdown
:lines: 219-221
Adding it to the widget layout.
.. literalinclude:: menu_05.py
:caption: Adding dropdown to the layout
:lines: 242
If a dropdown has many options, it will automatically scroll when the list
exceeds the max_height (default 200px). You can also enable a visible
scroll bar with show_scroll_bar=True, control the scroll direction with
invert_scroll, and adjust the scroll speed with scroll_speed.
The final widget. In Arcade you can use :py:class:`~arcade.gui.UISlider` to implement a slider. Theres a functionality to style the slider, this is also present for :py:class:`~arcade.gui.UIFlatButton` and :py:class:`~arcade.gui.UITextureButton`.
.. literalinclude:: menu_05.py
:caption: Adding slider
:lines: 223-235
Adding it to the widget layout.
.. literalinclude:: menu_05.py
:caption: Adding slider to the layout
:lines: 243-244
As we mentioned earlier, to explain the use of those parameters to the class. We basically used them so it can be used by both options and volume as we wanted to have different text for both. For those who have read the full tutorial line-by-line; 'They will never know'. :D. We also recommend to see the full code for this section.
- :ref:`menu_05` |larr| Where we are right now
- :ref:`menu_05_diff` |larr| What we changed to get here