-
Notifications
You must be signed in to change notification settings - Fork 350
Tutorial for Menu #1608
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
eruvanos
merged 24 commits into
pythonarcade:development
from
Ibrahim2750mi:tutorial/menu
Apr 2, 2023
Merged
Tutorial for Menu #1608
Changes from all commits
Commits
Show all changes
24 commits
Select commit
Hold shift + click to select a range
b8befd7
Step 1: Open a Window
Ibrahim2750mi 6c0500b
Step 2: Switching to Menu View
Ibrahim2750mi e631691
Step 3: Setting Up the Menu View
Ibrahim2750mi 742e0d7
Include the tutorial in toctree
Ibrahim2750mi 0d47ddf
Step 4: Configuring the Menu Buttons
Ibrahim2750mi de66a47
Small fixes for `index.rst`
Ibrahim2750mi 88fae56
WIP: Step 5
Ibrahim2750mi 9700a3e
Merge remote-tracking branch 'upstream/development' into tutorial/menu
Ibrahim2750mi 9d55da4
Step 5: Finalising the Sub Menu
Ibrahim2750mi 67f3ede
Revert change to slider.py
Ibrahim2750mi c95a37b
Revert changes to conf.py
Ibrahim2750mi 729920c
Fix underline too short
Ibrahim2750mi 5bfe103
Eryvanos's suggestion for UISlider wrong usage
Ibrahim2750mi a730dfc
Fixed some punctuation and comments
Ibrahim2750mi 0121abb
Fix inline codeblocks
Ibrahim2750mi e599ee1
Revert changes to dropdown.py
Ibrahim2750mi 1bd3bc6
Fix underline too short warning
Ibrahim2750mi c6c1677
Fix missing end backtick
Ibrahim2750mi 7b43fac
Add Eruvanos's fixes
Ibrahim2750mi 09faef2
Merge remote-tracking branch 'upstream/development' into tutorial/menu
Ibrahim2750mi 9f97364
Updated screenshots and final gif according to the fix
Ibrahim2750mi 862f6d1
Renamed variable to avoid confusion
Ibrahim2750mi a93bb6e
Make max character limit in a line be 80
Ibrahim2750mi 4385013
Enchance comments/docstrings
Ibrahim2750mi File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,324 @@ | ||
.. include:: <isonum.txt> | ||
|
||
.. _menu_tutorial: | ||
|
||
|
||
Making a Menu with Arcade's GUI | ||
=============================== | ||
|
||
.. image:: menu.gif | ||
:width: 80% | ||
|
||
This tutorial shows how to use most of arcade's gui's widgets. | ||
|
||
Step 1: Open a Window | ||
--------------------- | ||
|
||
.. image:: menu_01.png | ||
:width: 50% | ||
|
||
First, let's start a blank window with a view. | ||
|
||
.. literalinclude:: menu_01.py | ||
:caption: Opening a Window | ||
:linenos: | ||
|
||
Step 2: Switching to Menu View | ||
------------------------------- | ||
|
||
.. image:: menu_02.png | ||
:width: 50% | ||
|
||
For this section we will switch the current view of the window to the menu view. | ||
|
||
|
||
Imports | ||
~~~~~~~ | ||
|
||
First we will import the arcade gui: | ||
|
||
.. literalinclude:: menu_02.py | ||
:caption: Importing arcade.gui | ||
:lines: 4-5 | ||
:emphasize-lines: 2 | ||
|
||
Modify the MainView | ||
~~~~~~~~~~~~~~~~~~~~ | ||
|
||
We are going to add a button to change the view. For drawing a button we would | ||
need a ``UIManager``. | ||
|
||
.. literalinclude:: menu_02.py | ||
:caption: Intialising the Manager | ||
:lines: 16-19 | ||
:emphasize-lines: 4 | ||
|
||
After initialising the manager we need to enable it when the view is shown and | ||
disable it when the view is hiddien. | ||
|
||
.. literalinclude:: menu_02.py | ||
:caption: Enabling the Manager | ||
:pyobject: MainView.on_show_view | ||
:emphasize-lines: 5-6 | ||
|
||
.. literalinclude:: menu_02.py | ||
:caption: Disabling the Manager | ||
:pyobject: MainView.on_hide_view | ||
|
||
We also need to draw the childrens of the menu in ``on_draw``. | ||
|
||
.. literalinclude:: menu_02.py | ||
:caption: Drawing Children's of the Manager | ||
:pyobject: MainView.on_draw | ||
:emphasize-lines: 6-7 | ||
|
||
Now we have successfully setup the manager, only thing left it to add the button. | ||
We are using ``UIAnchorLayout`` to position the button. We also setup a function | ||
which is called when the button is clicked. | ||
|
||
.. literalinclude:: menu_02.py | ||
:caption: Initialising the Button | ||
:lines: 21-37 | ||
|
||
Initialise the Menu View | ||
~~~~~~~~~~~~~~~~~~~~~~~~ | ||
|
||
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 | ||
|
||
Program Listings | ||
~~~~~~~~~~~~~~~~ | ||
|
||
* :ref:`menu_02` |larr| Where we are right now | ||
* :ref:`menu_02_diff` |larr| What we changed to get here | ||
|
||
|
||
Step 3: Setting Up the Menu View | ||
-------------------------------- | ||
|
||
.. image:: menu_03.png | ||
:width: 50% | ||
|
||
In this step we will setup the display buttons of the actual menu. The code | ||
written in this section is written for ``MenuView`` | ||
|
||
Initialising the Buttons | ||
~~~~~~~~~~~~~~~~~~~~~~~~ | ||
|
||
First we setup buttons for resume, starting a new game, volume, options and exit. | ||
|
||
.. literalinclude:: menu_03.py | ||
:caption: Initialising the Buttons | ||
:lines: 67-72 | ||
|
||
Displaying the Buttons in a Grid | ||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | ||
|
||
After setting up the buttons we add them to ``UIGridLayout``, so that they can | ||
displayed in a grid like manner. | ||
|
||
.. literalinclude:: menu_03.py | ||
:caption: Setting up the Grid | ||
:lines: 74-90 | ||
|
||
Final code for the ``__init__`` method after these. | ||
|
||
.. literalinclude:: menu_03.py | ||
:caption: __init__ | ||
:pyobject: MenuView.__init__ | ||
|
||
Program Listings | ||
~~~~~~~~~~~~~~~~ | ||
|
||
* :ref:`menu_03` |larr| Where we are right now | ||
* :ref:`menu_03_diff` |larr| What we changed to get here | ||
|
||
|
||
Step 4: Configuring the Menu Buttons | ||
------------------------------------ | ||
|
||
.. image:: menu_04.png | ||
:width: 50% | ||
|
||
We basically add event listener for ``on_click`` for buttons. | ||
|
||
Adding ``on_click`` Callback for Resume, Start New Game and Exit | ||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | ||
|
||
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: 94-107 | ||
|
||
Adding ``on_click`` Callback for Volume and Options | ||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | ||
|
||
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 ``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: 109-123 | ||
|
||
Program Listings | ||
~~~~~~~~~~~~~~~~ | ||
|
||
* :ref:`menu_04` |larr| Where we are right now | ||
* :ref:`menu_04_diff` |larr| What we changed to get here | ||
|
||
Step 5: Finalising the Fake Window aka the Sub Menu | ||
--------------------------------------------------- | ||
|
||
.. image:: menu_05.png | ||
:width: 50% | ||
|
||
We finalise the menu or you can call it the last step! | ||
|
||
Editing the Parameters for the Sub Menu | ||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ | ||
|
||
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: 153-156 | ||
|
||
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: 109-131 | ||
|
||
Now you might be getting a little idea why we have edited the parameters but | ||
follow on to actually know the reason. | ||
|
||
|
||
Adding a Title label | ||
-------------------- | ||
|
||
We will be adding a ``UILabel`` that explains the menu. ``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: 179-181 | ||
|
||
Adding it to the widget layout. | ||
|
||
.. literalinclude:: menu_05.py | ||
:caption: Adding title label to the layout | ||
:lines: 213-215 | ||
|
||
|
||
Adding a Input Field | ||
~~~~~~~~~~~~~~~~~~~~~ | ||
|
||
We will use ``UIInputText`` to add an input field. The ``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: 183 | ||
|
||
Adding it to the widget layout. | ||
|
||
.. literalinclude:: menu_05.py | ||
:caption: Adding input field to the layout | ||
:lines: 213-216 | ||
:emphasize-lines: 4 | ||
|
||
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. | ||
|
||
Adding a Toggle Button | ||
~~~~~~~~~~~~~~~~~~~~~~ | ||
|
||
Don't go on the section title much, in arcade the ``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: 189-201 | ||
|
||
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: 217 | ||
|
||
Adding a Dropdowm | ||
~~~~~~~~~~~~~~~~~ | ||
|
||
We add a dropdowm by using ``UIDropdown``. | ||
|
||
.. literalinclude:: menu_05.py | ||
:caption: Adding dropdown | ||
:lines: 203-204 | ||
|
||
Adding it to the widget layout. | ||
|
||
.. literalinclude:: menu_05.py | ||
:caption: Adding dropdown to the layout | ||
:lines: 218 | ||
|
||
Adding a Slider | ||
~~~~~~~~~~~~~~~ | ||
|
||
The final widget. In arcade you can use ``UISlider`` to implement a slider. | ||
Theres a functionality to style the slider, this is also present for | ||
``UIFlatButton`` and ``UITextureButton``. | ||
|
||
.. literalinclude:: menu_05.py | ||
:caption: Adding slider | ||
:lines: 206-207 | ||
|
||
Adding it to the widget layout. | ||
|
||
.. literalinclude:: menu_05.py | ||
:caption: Adding slider to the layout | ||
:lines: 219-220 | ||
|
||
Finishing touches | ||
~~~~~~~~~~~~~~~~~ | ||
|
||
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. | ||
|
||
|
||
Program Listings | ||
~~~~~~~~~~~~~~~~ | ||
|
||
* :ref:`menu_05` |larr| Where we are right now | ||
* :ref:`menu_05_diff` |larr| What we changed to get here |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
""" | ||
Menu. | ||
|
||
Shows the usage of almost every gui widget, switching views and making a modal. | ||
""" | ||
import arcade | ||
|
||
# Screen title and size | ||
SCREEN_WIDTH = 800 | ||
SCREEN_HEIGHT = 600 | ||
SCREEN_TITLE = "Making a Menu" | ||
|
||
|
||
class MainView(arcade.View): | ||
""" Main application class.""" | ||
|
||
def __init__(self): | ||
super().__init__() | ||
|
||
def on_show_view(self): | ||
""" This is run once when we switch to this view """ | ||
arcade.set_background_color(arcade.color.DARK_BLUE_GRAY) | ||
|
||
def on_draw(self): | ||
""" Render the screen. """ | ||
# Clear the screen | ||
self.clear() | ||
|
||
|
||
def main(): | ||
window = arcade.Window(SCREEN_WIDTH, SCREEN_HEIGHT, SCREEN_TITLE, resizable=True) | ||
main_view = MainView() | ||
window.show_view(main_view) | ||
arcade.run() | ||
|
||
|
||
if __name__ == "__main__": | ||
main() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
:orphan: | ||
|
||
.. _menu_01: | ||
|
||
menu_01.py Full Listing | ||
------------------------------------- | ||
|
||
.. literalinclude:: menu_01.py | ||
:caption: menu_01.py | ||
:linenos: |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.