arcade-gui 0.1.0a5

GUI extension for the Python game library Arcade https://arcade.academy/

GUI Library for Python Arcade

This project targets to offer simple to complex ui elements to use in games and software written with the Python Arcade library.

Some UI components were copied over to adjust and fix them.

This project could also end up in a PR to integrate within Arcade.

The vision - WIP

ArcadeGui enables you to build this UI in 15 minutes:

Basic Components

UIView

Central class to manager the ui components. Converts on_ callback functions into events, so that UIElements just have to contain one method to interact with user input.

UIElement

A general interface of an UI element.

Examples

Examples providing an overview of features, there will be dedicated documentation soon.

• UILabel
• UIButton
• UIInputBox
• Example with ID

Screenshots

Features for first release

• UILabel
  • Align with UITextBox
• UIButton
• Focused element tracked
• ID reference system for UIElements
• CI/CD
• UITextBox
  • Basic setup
  • Emit event on ENTER
  • Scroll text with cursor
  • Set max length
• UIElements emit own UIEvents
  • UIButton
  • UITextInput
• FlatButtons (https://codepen.io/maziarzamani/full/YXgvjv)
• UIImageButton
• UITexturedInputBox (maybe include in UIInputBox)
• Theme support
  • Load style from yaml
  • Parse arcade.color, hex and rgb
  • Introduce style classes
  • Style attributes can be set as global fallback under class globals
  • Use UIElement.id to lookup special style data
  • Use UIStyle in UIElements
    • UI3DButton
    • FlatButton
    • GhostFlatButton
    • UILabel
    • UIInputBox
    • UIImageButton (images)
    • Read font attributes from style
  • Provide different color styles
  • Overwrite properties on UIElement
• Add documentation and doc strings (sphinx)
  • release notes
  • setup sphinx
  • choose a sphinx theme
  • setup readthedocs
  • Document features
    • Quickstart
    • Interactions with ids
    • Styles
    • Style with id and classes
    • Implement own components
• track new features and issues in Github

Features for later

• Add hierarchy for ui_elements
• style classes can have effect on child elements
• live refresh of loaded image
• New UIElements
  • UITextArea
  • UIContainer supporting automatic positioning (row & column)
• Layouting in general

Chores

• improve docs
  • fix reference to examples
  • include screenshots (at least one)
• support Python 3.7
• test examples render the expected screen
• separate button functionality from appearance
• move theme resolve logic into UIElement (now called .parent_style())
• make 3D Button more realistic, or change to flat buttons
• harmonize constructors x, y vs center_x, center_y
• fix hitbox of FlatButtons
• add example for custom styles for all elements (perfect for test coverage)
• figure out, how UIView.find_by_id does not produce typing warnings

Thoughts on themes (now called style)

• UIView should hold a UIStyle that is used by all components, added to this view
• UIElements have a _style attribute to overwrite style properties
• Maybe supporting a hierarchy would be nice

Background information and other frameworks

Decisions

• UIView is central component
• One UIStyle object per UIView
  seems to be easier to implement a live refresh later
• UIStyle information can be loaded from file or set programmatically
• Themes vs Style
  talking to my younger brother gave me the impression, that 'style' or 'design' are more understandable then 'theme'
• Events vs o 'on_'-callbacks
  Implementing new UIElements is way easier (less typing) if there is a central on_event method.
  Furthermore subclassing of UIElements to add custom actions like butten is pressed feels not as easy as it should be, an alternative could have been a signal/slot mechanism like in QT

Reference Pygame GUI projects

Overview

• ThorPy
  • http://www.thorpy.org/index.html
• Phil's pyGame Utilities
  • https://www.pygame.org/project/108
• OcempGUI
  • https://www.pygame.org/project/125
• PyGVisuals
  • https://github.com/Impelon/PyGVisuals
• Pygame GUI
  • Homepage
  • Examples
  • QuickStart Example
  • Concept
    • UIManager manages every interaction, new elements get the UIManager on creation
    • Elements create events and hook into pygames event system
    • Themes can be read from JSON files
• CSS Layout Engine: Colosseum
• Tkinter Geometry Manager: doc