Apex Dev Log: June-July UI Future Updates

Apex Development Log: UI Changes and Future Updates

This update marks significant progress in developing our UI development, offering developers powerful tools to create intuitive and user-friendly interfaces in Apex Engine. We will be focusing on upgrading our tech stack by integrating QT for improved custom application UI creation, applying new icon sets for enhanced usability, and planning the conversion from LUA/XML to Python and XML/QML for long-term viability. 

Key accomplishments include completing the core interface style, implementing a robust widget framework, establishing state management and event handling systems, designing initial layouts, and providing comprehensive documentation. These efforts ensure a powerful, intuitive, and user-friendly interface for Apex Engine.

1. Current Q3-Q4 Updates

This foundation sets the stage for further development and refinement as we move towards the alpha phase, ensuring a robust and user-friendly interface for Apex Light and Apex Engine.

Pre-Alpha MU’s Completed

• Core Interface Style, Fonts, and Basic Tools:
  • Established the fundamental design aesthetic for the UI, ensuring consistency and a modern look.
  • Selected and integrated primary fonts for readability and visual appeal.
  • Implemented basic tools essential for initial interface functionality.
• Widget Framework:
  • Developed the initial framework for key widgets such as buttons, checkboxes, and text boxes.
  • Ensured that widgets are customizable and can be styled according to the core interface guidelines.
• State Management System:
  • Implemented a state management system to handle different widget states (e.g., Normal, Disabled, Pressed).
  • Enabled dynamic styling changes based on widget states for a more interactive user experience.
• Initial Layout Design:
  • Created preliminary layouts for essential UI components, such as menus and panels.
  • Organized UI elements into a logical structure to facilitate user navigation and interaction.
• Basic Event Handling:
  • Established basic event handling for user interactions, such as button clicks and checkbox toggles.
  • Integrated scripting capabilities to allow developers to link UI events to specific actions within the application.

Future: Upgrading Tech Stack

• Integration of QT:
  • We plan on upgrading our tech stack to integrate QT at the start of Q4. This change is aimed at enhancing the ease of custom application UI creation for our clients.
  • The integration process involves updating our development environment, ensuring compatibility with existing systems, and training our development team on QT best practices.
  • Benefits include better performance, a more extensive set of widgets, and improved cross-platform compatibility.
  • Clients will be able to use the built-in editor or the off-line community version at no additional cost to them. 

• New Icon Set:
  • We have implemented a new set of icons to improve the visual appeal and usability of our UI.
  • Icons are designed to be more intuitive and consistent with modern UI design standards.
  • The update includes replacing old icons across all interface elements and ensuring they are properly scaled and aligned.

2. Planned Updates and Changes

Implementing a unique user friendly set of UI system tools from traditional game engines was a highly requested feature from our community. Initially, we planned to outsource this to a pre-existing UI library. During our evaluation, we tested popular open-source packages like Kivy, ImGui and Crazy Eddie’s GUI. However, we decided to develop our own UI system, Apex Light, due to long-term viability concerns with the existing options. Moving from a prototype UI to a finalized one using code that works across both the prototype and Apex Engine Cloud is crucial for ensuring a consistent, high-performance user experience. This transition allows us to leverage the strengths of Python and QML, providing a more responsive and versatile UI that meets the evolving needs of our users.

Conversion from LUA/XML to Python and XML/QML

• Initial Assessment:
  • Conduct a thorough assessment of existing LUA/XML code to identify dependencies and critical components that need to be preserved during conversion.
  • Develop a detailed conversion plan that outlines the steps and timeline for the migration process.

Conversion Process

• Preparation:
  • Set up a development environment for Python and XML/QML, including necessary libraries and tools.
  • Train the development team on Python and QML to ensure a smooth transition.
• Code Conversion:
  • Begin converting LUA scripts to Python, ensuring that all functionalities are replicated accurately.
  • Translate XML configurations to QML, leveraging QML's declarative nature for a more responsive UI.
  • Create a mapping of old functionalities to new implementations to track progress and ensure completeness.
• Testing and Validation:
  • Implement rigorous testing protocols to ensure the new Python and QML code functions correctly.
  • Perform unit tests, integration tests, and user acceptance tests to validate the new system.
  • Address any bugs or issues that arise during testing promptly.

Integration and Deployment

• System Integration:
  • Integrate the new Python and QML code with the existing system components.
  • Ensure seamless communication between all parts of the application.
• User Training and Documentation:
  • Update user manuals and documentation to reflect the new Python and QML-based UI.
  • Provide training sessions for clients to familiarize them with the updated UI and new features.
• Deployment:
  • Plan and execute the deployment of the new UI in a staged manner to minimize disruption.
  • Monitor the deployment closely and provide immediate support to address any issues.

Future Enhancements

• Continuous Improvement:
  • Gather feedback from clients and users to identify areas for further improvement.
  • Plan for iterative updates and enhancements based on user feedback and technological advancements.

3. Prototype Development Completed to date:

Implementation of the user interface (UI) system was a highly requested feature from our community. Initially, we planned to outsource this to a pre-existing UI library. During our evaluation, we tested popular open-source packages like Dear ImGui and Crazy Eddie’s GUI. However, we decided to develop our own UI system, Apex Light, due to long-term viability concerns with the existing options.

Development of Apex Light

• Complexity: Building a UI system is straightforward but can become complex with extended functionality and styling options.
• Current State: The first version of Apex Light is unfinished but includes significant functionality.

Structure and Components

• UI Elements: Each section of the game interface (e.g., main menu, player inventory) is divided into different files called UI Elements.
• Widgets: Apex Light includes 14 widgets:
  • Button, Check Box, Combo Box, Label, List Box, Panel, Progress Bar, Scroll Bar (Horizontal and Vertical), Slider (Horizontal and Vertical), Spin Box, Text Box, Window.
• Containers: Panels and Windows act as Containers for other widgets using a Parent-Child System.

Styling and State Management

• Appearance Control: Full control over widget appearance using flat colors or textures. Atlas Maps supported for performance.
• State Machine: Widgets can exist in different states (Normal, Disabled, Pressed, Checked, NormalHover, CheckedHover) with styles applied accordingly.
• Stylesheets: Users can specify default widget appearances with stylesheets, while individual widget styles can still be overridden.

Event Handling and Scripting

• Event System: Each widget has events (e.g., button Click Event) that trigger scripts to execute game logic.
• Visual Editor: Allows users to construct game interfaces without code, except for event scripts.

Tools and Features

• Widget List and UI Hierarchy: Components can be selected and edited using numerous settings.
• Search Box: Quickly find and update parameters.
• UV Coordinate Selector: Mini-tool to select UV coordinates from textures, saving time.