Welcome to the user manual for Raven, a GUI library for GameMaker!
Raven is a UI library for GameMaker, with the goal of making it easier to create responsive UI's for your projects.
Raven allows you to create panels and UI elements with a minimal amount of effort and in an easy to understand way.
This library is a work in progress geared towards making simple, responsive UI's. Keep in mind that you might encounter slight issues every now and then, especially for new/experimental components/ui elements.
Raven's goal is to be the go-to UI system in GameMaker. Raven is envisioned to be:
Responsive
Minimal
Flexible
Maintainable
Customizable
If you are looking for a framework that has a recursive set up and allows further nesting of components, Emu might suit your needs. Emu is an incredible UI framework created by a member of the GameMaker community; "DragoniteSpam".
A full width container with a small subcontainer.A full width container that has been scaled down and dynamically fits content.The same container as the first image but with a light theme selected.
Getting Raven
To get started with Raven, you'll need to download it from the Raven GitHub Repository. Once downloaded, you can import the repository into GameMaker as a project or package. This will make the Raven assets and scripts available for use in your project.
Initializing the UI
After setting up Raven in your project, navigate to the obj_raven_init object. In the Create Event of this object, you'll find a "//GET STARTED HERE" section. This is where you'll initialize the UI components and start building your interface.
Creating the Core Struct
The cornerstone of Raven is the core struct instance, which manages the UI elements and interactions. You can create the main/core struct using the following code:
raven = new RavenMain();
The above code instantiates a new RavenMain struct, which will be our main/core object, serving as the controller for any Raven-driven UI.
Adding a menu
menu = new RavenMenu(0, 0, 64, 32, 32);
//We create a new menu initializing at x: 0, y: 0 with a width per item of 64 pixels, a height of 32 pixels and a margin of 32 pixels per item.
overview_button = new RavenItem("Overview", noone);
//we are not currently passing a function, so if you don't know what your button should do yet you can pass noone or configure it later.
//When we want specific behavior to trigger, we can define a function and use that instead:
global.open_new_page = function open_new_page(){
url_open("https://url_to_a_new_item");
}
new_button = new RavenItem("New", global.open_new_page);
//We have now defined a function and passed it into the function, when the button is clicked, the _on_click argument will be triggered, which contains the open new page function in our case, which in turn would open a browser page to a given URL!
menu.AddItem(overview_button);
menu.AddItem(new_button);
The above code results in a menu with several items in it. While we are working on this menu, we can also customize it by adding an outline:
menu.SetOutline(true);
Now that we have our menu, we just need to add it to our main struct:
raven.SetMenu(menu);
We've now established this menu to be updated and rendered during runtime.
Now that we have established a menu and main struct for our project, we might want to add a panel/tab somewhere. To do this, we can make a container:
Using containers
container = new RavenContainer(0, 0, global.resolution_x, global.resolution_y, true, false);
container.SetLock(true);
We've created a container and locked it. This means the container cannot be resized, dragged, etc. We have not yet added our container to the main struct, so let's do that:
raven.AddContainer(container);
We can also create a smaller panel, for example, to display tooltips or serve as a sidebar or overlay:
var tooltip_container = new RavenContainer(200, 200, 600, 600, false, true, gui_render_mode.VLIST, 3);
var container_menu = new RavenMenu(0, 0, 64, 32, 32);
tooltip_container.SetMenu(container_menu);
As you can see in the above code, each container can also have its own menu. All that we are missing now is some text to display in our tooltip container:
tooltip_container.AddItem(new RavenTextItem("This is a TextField", 0, 16, fnt_dsansmono16));
tooltip_container.AddItem(new RavenTextItem("Let's write a paragraph! The quick brown fox jumps over the lazy dog.", 0, 16, fnt_dsansmono16));
And we finalize by adding our tooltip container to our main struct:
raven.AddContainer(tooltip_container);
That's it for getting started!
Raven provides a set of components for creating dynamic and responsive GUIs in GameMaker.
Components include checkboxes, text input fields, containers, menus, and more. Components are automatically styled to a certain theme.
Note that Raven is experimental, you may encounter bugs and issues during usage, as well as incomplete, partially implemented or obsolete functionalities.
Despite this, I hope that this library can help you to create UI's quickly and efficiently in GameMaker, if not for games, perhaps for tooling or applications!
The core of Raven revolves around the Render() and Update() functions:
Render(): Renders the graphical elements of the components.
Update(): Handles user interactions and updates component states.
Rendering is delegated from the main struct to containers and individual items (ui elements). This delegation happens through various structs. The different structs/ui elements are documented in this manual. Here is a brief overview of the different structs.
RavenMain : Main component which controls and updates all components in the framework.
RavenMenu : A component that you can insert into containers, to give them a menu bar and make them controllable.
RavenContainer : A central building block of the framework. Use this to create the layout for your application. You can use several variants of this RavenContainer to automatically render in lists or grids, or position everything yourself.
RavenTextItem : A single line of text, any text outside of the container is hidden. This element is responsive to altering container dimensions.
RavenMultilineTextItem : A multiline text, any text outside of the container is shifted to the next line, again and again. This element is responsive to altering container dimensions.
RavenItem : The main button used for menu items. This also is a parent to many other items. This element should shift and move to the next line if it does not fit in your container anymore.
RavenLineBreakItem : An empty space to seperate content, defined by a margin when rendered by a container, or a height in the item itself.
RavenCheckboxItem: A simple checkbox item. Shows a string with a checkbox (true or false) value behind it.
RavenTextInputItem : An experimental element that allows you to type text into a field. Please note that this item is a work in progress, and may have some unexpected behavior.
RavenDropdownItem : An experimental element that allows you to show options in a dropdown, and select an item. Please note that this element may have some unexpected behavior.
It is highly recommended that you do not alter these structs. If you want to create new functionalities, alter the styling or modify the behavior, please consider using your own implementations of RavenItem. Any struct that has a Render() and Update() function that is added to a container will be called automatically, hence implementing these methods is key to making your own elements/components.
obj_raven_init Object
The obj_raven_init object plays a critical role in initializing the Raven when the game starts. It is responsible for setting up global preferences, theme settings, and various initialization routines that lay the foundation for any UI elements.
Upon creation, this object establishes global variables such as theme and gui properties, which define the desired theme and ensure consistent GUI rendering based on selected preferences.
obj_raven_init takes charge of managing the theme for the GUI. It defines macros and switches that enable you to seamlessly switch between different themes like "RAVEN," "DARK," "LIGHT," and more. These theme settings affect visual elements such as background color, menu appearance, text color and button styles.
Additionally, the object hosts various global preferences, such as raven_debug for toggling debugging messages, experimental_features for enabling experimental functionalities, and interface_scale for controlling the size of GUI components. These preferences grant developers the flexibility to fine-tune the GUI's behavior and presentation according to their project's specific requirements.
obj_raven_main Object
The obj_raven_main object serves as the epicenter of Raven's functionality. It acts as the entry point for rendering and managing the GUI, orchestrating update and drawing routines to add functionality to elements and render components.
Upon creation, obj_raven_main initializes the main GUI components. It constructs instances of RavenMain, buttons, menus, and containers, forming the fundamental structure of the GUI.
The Step Event of this object is where interactions are managed. It calls the RavenMainUpdate() function, capturing mouse input and coordinates to enable responsive interactions like button clicks and menu selections.
In the Draw Event, obj_raven_main invokes the RavenMainRender() function to render the GUI. This process involves calling the appropriate rendering functions for each GUI element, resulting in an interface that aligns with the chosen theme and layout.
The RavenMain struct serves as the central orchestrator of Raven. It encapsulates various components and functionalities that enable developers to create sophisticated user interfaces with ease. The primary objective of RavenMain is to manage the overall rendering and user interaction within the GUI framework.
Constructor:
The RavenMain constructor initializes a new instance of the struct, setting the foundation for GUI development and management.
RavenMain()
Properties:
menu: The associated menu object that provides navigation and interaction options.
active_page: The currently active page within the RavenMain struct.
pages: A dynamic list that holds references to different pages within RavenMain.
items: A collection of items retrieved from the associated menu.
global.raven_containers: A global list containing references to all Raven containers.
Methods:
SetMenu(_raven_menu): Binds a specified menu to the RavenMain instance.
GetItems(): Retrieves items from the associated menu and stores them in the items property.
PushReferences(): Iterates through the list of Raven containers and updates their item references.
AddContainer(_raven_container): Registers a new Raven container.
Update(): Updates the menu, items, and all Raven containers' states.
Render(): Renders the Raven containers, items, and the associated menu.
AddContainer(container)
The AddContainer method enables developers to incorporate container instances into the RavenMain. This facilitates structured content organization, enhances layout management, and streamlines the rendering process.
AddContainer(container)
container (RavenContainer): The container instance to be added.
PushReferences()
The PushReferences method plays a pivotal role in establishing connections between various GUI elements. It ensures that menu items, containers, and other components are aware of their relationships, enabling proper event handling and interactions.
Render Method:
The RavenMainRender function orchestrates the rendering process for all components managed by the RavenMain struct. This comprehensive rendering approach ensures that containers, menus, and their contents are presented cohesively and efficiently on the screen.
Update Method:
The RavenMainUpdate function drives the core interactivity of the RavenMain. It monitors user input and delegates relevant updates to containers and menu items, enabling a responsive and intuitive user experience.
Summary:
The RavenMain struct serves as the backbone of Raven, providing a centralized management system for GUI components. By offering a unified approach to rendering, interaction, and event handling, RavenMain empowers developers to create sophisticated user interfaces with seamless interactivity. The RavenMainRender and RavenMainUpdate functions work in tandem to ensure a consistent and engaging user experience, making it easier for developers to craft rich and dynamic applications.
The RavenContainer struct is a core component, responsible for managing and rendering graphical containers to hold various GUI elements. It offers dynamic resizing, positioning, and customization options to ensure an optimal user interface.
Constructor
The constructor of RavenContainer initializes a container object with the following arguments:
_x0, _y0: The top-left corner coordinates of the container.
_x1, _y1: The bottom-right corner coordinates of the container.
_scaling: A boolean indicating whether the container should scale with the interface.
_outline: A boolean determining whether to draw an outline around the container.
_render_mode: The rendering mode for the container (HLIST, VLIST, GRID).
_outline_size: The size of the container's outline (optional, default: 1).
_color_override: An optional color override for the container's background.
Properties
container_id = CreateRavenGUID();
active = false;
menu = noone;
x0 = _x0 * global.interface_scale;
y0 = _y0 * global.interface_scale;
x1 = _x1 * global.interface_scale;
y1 = _y1 * global.interface_scale;
x0_previous = x0;
y0_previous = y0;
x1_previous = x1;
y1_previous = y1;
outline = _outline;
outline_size = _outline_size;
color_override = _color_override;
scaling = _scaling;
items = ds_list_create();
show_debug_message(ds_list_size(items));
menu_items = ds_list_create();
container_margin_top = 50;
content = ds_list_create();
resizing = false;
resizing_left = false;
resizing_right = false;
gui_depth_index = 1;
minimum_container_size = 400;
lock = false;
moving = false;
render_mode = _render_mode;
if (_color_override != undefined) { color_override = _color_override; }
x0_scaling = x0;
y0_scaling = y0;
x1_scaling = x1;
y1_scaling = y1;
scroll_offset = 0;
scrollbar_height = 10;
scrollbar_x0 = x0;
scrollbar_x1 = x1;
scrollbar_dragging = false;
Methods and Functions
UpdateItemContainers()
This function updates the container ID of the associated menu and all items within the container, ensuring their consistent rendering and behavior.
SetGUIDepthIndex(_gui_depth_index)
Sets the depth index for rendering the container, allowing it to be displayed in front of or behind other graphical elements.
AddItem(_raven_item)
Adds a new Raven item to the container, expanding the list of items present within the container.
AddContent(_raven_item)
Appends a Raven item to the container's content section, enabling a separate collection of items distinct from the main list.
DeleteItem(_raven_item)
Removes a specified Raven item from the container, effectively deleting it from the list of items.
SetActive(_active)
Sets the active state of the container, determining whether it is currently interactable.
SetLock(_lock)
Sets the lock state of the container, controlling whether the container's position and size can be modified.
GetMenuItems()
Retrieves items from the associated menu, providing access to the list of menu items for further processing.
UpdatePosition(_x0, _y0, _x1, _y1)
Updates the container's position by modifying its top-left and bottom-right corner coordinates, allowing repositioning.
Move(_x_amount, _y_amount)
Moves the container by a specified amount along the X and Y axes, effectively changing its position.
Destroy()
Clears the lists of items and menu items, effectively destroying the container and its contents.
GetActive()
Retrieves the active state of the container, indicating whether it is currently interactable.
UpdateContainerLock()
Updates the container's lock state based on the associated menu's lock property, ensuring consistency.
containerResize()
This function resizes the container based on mouse position and outline size while considering user interaction.
SetMenu(_raven_menu)
Associates a menu with the container, linking the two for coordinated behavior and rendering.
SetMenuBoundByContainer(_is_bound_by_container)
Sets whether the associated menu is bound by the container's boundaries, affecting its behavior when the container is resized or moved.
SetOutline(_outline)
Sets whether the container has an outline, influencing its visual appearance.
GetIsMenuBoundByContainer()
Checks whether the associated menu is bound by the container's boundaries, indicating whether their behavior is linked.
Render()
Renders the container, its background, outline, menu, and items based on the selected rendering mode.
Update()
Updates the container's properties, position, and items' state. Handles resizing, repositioning, and interaction with the associated menu and items.
Render and Update
The RavenContainer has two core functions for rendering and updating:
Render() Function:
The Render() function is responsible for visually rendering the components of the RavenContainer. It ensures that the container's background, outline, associated menu, and items are displayed accurately on the screen.
Rendering Container Background:
The function sets the color for the container's background. If a color override is defined, it uses that color. It then draws a rectangle based on the container's scaled coordinates (x0_scaling, y0_scaling, x1_scaling, y1_scaling), representing the container's background.
Rendering Container Outline:
If the outline property is set to true, the function draws an outline around the container. It iterates over a loop based on the outline_size value and draws rectangles around the container to create the outline effect.
Rendering Menu:
If an associated menu exists (menu != noone), the menu.Render() function is called. This ensures that the menu's graphical components are displayed correctly within the container's area.
Rendering Items:
Based on the selected rendering mode (render_mode), the function handles the rendering of items within the container. Rendering modes can be HLIST, VLIST, or GRID. In the case of VLIST, each item's position is updated, and its Render() function is called to display its content.
Adjusting Vertical Separation:
In the VLIST rendering mode, a vertical separation (_sep) is maintained between items to prevent overlap. The current position _y_current is updated after rendering each item to accommodate this separation.
Handling Unsupported Rendering Modes:
If the selected rendering mode is unsupported (e.g., HLIST or GRID), an error message is displayed to indicate that the corresponding rendering method is not yet implemented.
Update() Function:
The Update() function is a crucial part of the RavenContainer struct that manages updates related to the container's properties, position, and the state of its items and associated menu.
Updating Container Lock State:
The UpdateContainerLock() function is called within Update(). It checks if the associated menu is locked and updates the container's lock state to match the menu's lock property.
Checking for Movement and Resizing:
Before other updates, the function checks if the container has been moved since the previous frame. If not, it sets the moving flag to false. This flag distinguishes between moving and resizing interactions.
Container Resizing:
The containerResize() function is called within Update() to handle resizing the container based on the mouse's position and user interaction. Resizing is allowed from different edges, considering lock status and menu dragging.
Updating Scaling Coordinates:
If scaling is enabled for the container, the coordinates (x0_scaling, x1_scaling, y0_scaling, y1_scaling) are updated based on the container's coordinates and global scaling. This maintains appearance during UI scaling.
Updating Menu and Item States:
If an associated menu exists, its menu.Update() function is called. Similarly, the update function of each item in the container is called to handle individual behaviors and states.
Updating Previous Coordinates:
At the end of the function, the current container coordinates are stored in previous coordinate variables. These variables determine whether the container has been moved in the next frame.
Functionality
The RavenContainer struct enables you to create dynamic and customizable GUI containers. It allows you to:
Create containers with specified coordinates and size.
Customize the appearance of containers using scaling, background color, and outline options.
Add Raven items and content to the container.
Resize and reposition containers through mouse interactions.
Set containers as active or locked.
Retrieve and update associated menu items.
Render containers and their contents with different rendering modes.
Drag containers around when unlocked.
You do not have to add a menu to a container, not adding one will make it more like a dedicated section, this way you can create multiple panels/seperate areas in your app.
Overall, the RavenContainer struct forms the building block for creating structured and interactive GUI layouts within Raven.
The RavenMenu struct is a core component by offering a dynamic and interactive contextual menu. If you want to customize containers and allow these to be dragged or moved you need to add a menu to them.
Constructor:
The RavenMenu constructor initializes a new instance of the struct, setting its position and dimensions for proper placement on the screen.
RavenMenu(x, y, width, height)
x (Number): The horizontal position of the menu.
y (Number): The vertical position of the menu.
width (Number): The width of the menu.
height (Number): The height of the menu.
Properties:
container_id: The unique identifier of the associated container.
x: The x-coordinate of the menu's top-left corner.
y: The y-coordinate of the menu's top-left corner.
item_width: The width of each item within the menu.
height: The height of the menu.
margin: The margin between items and the menu boundaries.
outline: A boolean indicating whether the menu has an outline.
item_outline: A boolean indicating whether items have outlines.
x0: The left boundary of the menu.
y0: The top boundary of the menu.
x1: The right boundary of the menu.
y1: The bottom boundary of the menu.
container_width: The width of the associated container.
container_height: The height of the associated container.
is_bound_by_container: A boolean indicating if the menu is bound to a container.
is_dragging: A boolean indicating if the menu is being dragged.
select_margin: The margin around items for selecting.
font: The font used for rendering menu items.
lock_icon_x0, lock_icon_x1, lock_icon_y0, lock_icon_y1: Coordinates of the lock icon for locking the menu.
container_x0, container_y0, container_x1, container_y1: Container's position and boundaries within the menu.
container_lock: A boolean indicating whether the container is locked.
items: A dynamic list holding references to the items within the menu.
Methods:
GetContainerId()
Returns the associated container's unique identifier.
SetContainerId(_container_id)
Sets the container's unique identifier and returns it.
Updates the menu's state, including drag functionality.
Destroy()
Destroys the menu and its associated items.
Render()
Renders the menu and its items, including item outlines and the lock icon.
AddItem(item)
The AddItem method enables developers to append menu items to the RavenMenu. This dynamic addition of items makes it possible to populate the menu with various choices and functionalities.
AddItem(item)
item (RavenItem): The menu item to be added.
SetOutline(outline)
The SetOutline method offers developers control over the menu's visual appearance by enabling or disabling the outline.
SetOutline(outline)
outline (Boolean): A boolean value indicating whether to display an outline.
Render Method:
The RavenMenuRender function handles the rendering of the RavenMenu and its contents on the screen. This process involves drawing each menu item in a visually organized manner, utilizing the defined theme to ensure a cohesive and appealing look.
Update Method:
The RavenMenuUpdate function drives the dynamic behavior of the RavenMenu. It monitors user interactions such as clicks and movements, facilitating item selection and activation. This method's role is pivotal in creating a seamless and responsive menu navigation experience.
Summary:
The RavenMenu struct represents the heart of user interaction in Raven. By combining its constructor, properties, and methods, developers gain the ability to design rich and engaging contextual menus. The RavenMenuRender and RavenMenuUpdate functions work collaboratively to deliver a visually appealing, interactive, and user-centric menu that enhances the overall user experience.
RavenTextItem
The RavenTextItem is a component used to display text-based content within containers and menus. It offers customizable text properties and rendering options.
Constructor
The constructor of RavenTextItem initializes a text item object with the following arguments:
_text: The text content to be displayed.
_x0, _y0: The top-left corner coordinates of the text item.
_font: The font used for rendering the text (optional).
_color: The color of the text (optional).
_align: The alignment of the text (optional).
Properties
container_id: The ID of the associated container.
is_enabled: A boolean indicating whether the text item is enabled and can respond to interactions.
text: The content of the text item to be displayed.
on_click: The function to be executed when the text item is clicked.
lock_trigger: A boolean used to control locking behavior.
clicking: A boolean indicating whether the text item is currently being clicked.
gui_clicking: A boolean indicating whether the text item is being clicked within the GUI area.
outline: A boolean determining whether to draw an outline around the text item.
margin: The general margin applied to the text item.
specific_margin: An additional margin specific to this text item instance.
x0, y0: The top-left corner coordinates of the text item.
x1, y1: The bottom-right corner coordinates of the text item.
text_x1: The x-coordinate where the text would end when fully drawn.
hover: A boolean indicating whether the mouse is hovering over the text item.
font: The font used for rendering the text.
color: The color of the text.
Methods and Functions
Update()
This function updates the state of the text item, handling interactions, and visual changes.
Render()
Renders the text item on the screen based on its properties and position.
SetPosition(_x, _y)
Sets the position of the text item using the specified coordinates.
GetWidth()
Returns the width of the text item's content.
GetHeight()
Returns the height of the text item's content.
GetText()
Returns the text content of the text item.
SetText(_text)
Sets the text content of the text item.
SetColor(_color)
Sets the color of the text item's content.
SetAlignment(_align)
Sets the alignment of the text item's content.
Destroy()
Destroys the text item, cleaning up its resources.
Functionality
The RavenTextItem component allows you to:
Create text items with specified content, position, and appearance.
Customize text properties like font, color, and alignment.
Update and render text items within containers and menus.
Retrieve text item dimensions and content.
Change text content, color, and alignment on-the-fly.
Overall, the RavenTextItem should offer a flexible way to integrate single-line text-based content within your projects.
RavenMultilineTextItem
The RavenMultilineTextItem is a component used to display multi-line text-based content within containers and menus. It offers customizable text properties and rendering options.
Constructor
The constructor of RavenMultilineTextItem initializes a multi-line text item object with the following arguments:
_text: The multi-line text content to be displayed.
_on_click: The function to be executed when the multi-line text item is clicked.
_margin: The margin applied to the multi-line text item (default: 16).
_font: The font used for rendering the multi-line text (default: fnt_dsansmono16).
_color: The color of the multi-line text (optional).
Properties
container_id: The ID of the associated container.
is_enabled: A boolean indicating whether the multi-line text item is enabled and can respond to interactions.
text: The content of the multi-line text item to be displayed.
on_click: The function to be executed when the multi-line text item is clicked.
lock_trigger: A boolean used to control locking behavior.
clicking: A boolean indicating whether the multi-line text item is currently being clicked.
gui_clicking: A boolean indicating whether the multi-line text item is being clicked within the GUI area.
outline: A boolean determining whether to draw an outline around the multi-line text item.
margin: The general margin applied to the multi-line text item.
specific_margin: An additional margin specific to this multi-line text item instance.
x0, y0: The top-left corner coordinates of the multi-line text item.
x1, y1: The bottom-right corner coordinates of the multi-line text item.
hover: A boolean indicating whether the mouse is hovering over the multi-line text item.
font: The font used for rendering the multi-line text.
color: The color of the multi-line text.
Methods and Functions
GetContainerId()
Returns the associated container's unique identifier.
SetContainerId(_container_id)
Sets the container's unique identifier and returns it.
SetEnabled(_set)
Sets the enabled state of the multi-line text item.
SetOnClick(_function)
Sets the click event function of the multi-line text item.
OnClick()
Executes the click event function of the multi-line text item.
GetText()
Returns the text content of the multi-line text item.
SetCoords(_x0, _y0, _x1, _y1)
Sets the position coordinates of the multi-line text item.
GetHeight()
Returns the height of the multi-line text item's content.
Update()
Updates the state of the multi-line text item, handling interactions.
Render()
Renders the multi-line text item based on its properties and position.
Functionality
The RavenMultilineTextItem component allows you to:
Create multi-line text items with specified content, position, and appearance.
Customize text properties like font, color, and alignment.
Update and render multi-line text items within containers and menus.
Retrieve multi-line text item dimensions and content.
Change multi-line text content, color, and alignment on-the-fly.
Overall, the RavenMultilineTextItem should offer a flexible way to integrate multi-line text-based content within your projects.
RavenLineBreakItem
The RavenLineBreakItem is a component that provides an empty space used to separate content. It is primarily used to control layout and spacing between items in containers.
Constructor
The constructor of RavenLineBreakItem initializes a line break item with the following arguments:
_margin: The margin applied to the line break item.
_height: The height of the line break item.
_color: The color of the line break item (optional).
Properties
container_id: The ID of the associated container.
is_enabled: A boolean indicating whether the line break item is enabled and can respond to interactions.
margin: The general margin applied to the line break item.
height: The height of the line break item.
x0, y0: The top-left corner coordinates of the line break item.
x1, y1: The bottom-right corner coordinates of the line break item.
hover: A boolean indicating whether the mouse is hovering over the line break item.
color: The color of the line break item.
Methods and Functions
GetContainerId()
Returns the ID of the associated container.
SetContainerId(_container_id)
Sets the ID of the associated container.
IsOutsideContainerBounds(container_x1)
Checks if the line break item is outside the bounds of the container based on the container's x1 coordinate.
SetCoords(x0,y0,x1,y1)
Update the coordinates or position of the ui element.
GetHeight()
Returns the height of the ui element, because this is a "virtual" break element the height is provided as a constructor argument.
SetHeight(_height)
Sets the height of the ui element.
Update()
Not implemented for this struct. No logic required.
Render()
Draws a rectangle around the provided x0, y0, x1 and y1 if a color was provided, otherwise draws nothing.
Functionality
The RavenLineBreakItem component allows you to:
Create empty space to separate content within containers and menus.
Customize the height and appearance of the line break item.
Control layout and spacing between items.
The RavenLineBreakItem is a useful tool for controlling the visual arrangement and organization of elements in your GUI layout.
RavenCheckboxItem
The RavenCheckboxItem is a component used to display a checkbox with associated text. It allows users to toggle a boolean value and offers customization options for its appearance and behavior.
Constructor
The constructor of RavenCheckboxItem initializes a checkbox item with the following arguments:
_text: The text content associated with the checkbox.
_on_click: The function to be executed when the checkbox is clicked (optional).
_margin: The margin applied to the checkbox item (optional).
_font: The font used for rendering the text (optional).
_color: The color of the text (optional).
_checkmark_color: The color of the checkbox checkmark (optional).
_value: The initial value of the checkbox (true or false, optional).
Properties
container_id: The ID of the associated container.
is_enabled: A boolean indicating whether the checkbox item is enabled and can respond to interactions.
text: The content of the text associated with the checkbox.
lock_trigger: A boolean used to control locking behavior.
clicking: A boolean indicating whether the checkbox item is currently being clicked.
gui_clicking: A boolean indicating whether the checkbox item is being clicked within the GUI area.
outline: A boolean determining whether to draw an outline around the checkbox item.
margin: The general margin applied to the checkbox item.
x0, y0: The top-left corner coordinates of the checkbox item.
x1, y1: The bottom-right corner coordinates of the checkbox item.
hover: A boolean indicating whether the mouse is hovering over the checkbox item.
font: The font used for rendering the text.
color: The color of the text.
value: The current value of the checkbox (true or false).
checkmark_color: The color of the checkbox checkmark.
checkbox_scale: The scaling factor applied to the checkbox size.
rectangle_x0, rectangle_y0: The top-left corner coordinates of the checkbox rectangle.
rectangle_x1, rectangle_y1: The bottom-right corner coordinates of the checkbox rectangle.
specific_margin: An additional margin specific to this checkbox item instance.
Methods and Functions
SetCheckboxScale(_checkbox_scale)
Sets the scaling factor for the checkbox size.
GetContainerId()
Returns the ID of the associated container.
SetContainerId(_container_id)
Sets the ID of the associated container.
SetEnabled(_set)
Sets the enabled state of the checkbox item.
ToggleValue()
Toggles the value of the checkbox (true to false or false to true).
GetValue()
Returns the current value of the checkbox (true or false).
SetCoords(_x0, _y0, _x1, _y1)
Sets the position coordinates of the checkbox item.
Update()
Updates the state of the checkbox item, handling interactions and visual changes.
Render()
Renders the checkbox item on the screen based on its properties and position.
GetCheckboxWidth()
Returns the width of the checkbox.
GetCheckboxHeight()
Returns the height of the checkbox.
GetTextHeight()
Returns the height of the associated text.
Functionality
The RavenCheckboxItem component allows you to:
Create checkbox items with associated text and customizable appearance.
Toggle a boolean value (true or false) when the checkbox is clicked.
Customize the checkbox's appearance, color, and size.
Retrieve the current value of the checkbox.
Respond to click interactions and hover events.
The RavenCheckboxItem is a component used to seperate ui elements and acts as a seperator.
RavenDropdownItem
The RavenDropdownItem is a component within Raven that provides a dropdown menu with selectable options. It is used to allow users to choose from a list of predefined values.
Constructor
The constructor of RavenDropdownItem initializes a dropdown item with the following arguments:
_text: The label text for the dropdown item.
_options: An optional list of options to populate the dropdown with (default is undefined).
_margin: The margin applied to the dropdown item (optional, default is 16).
_font: The font used for the text item (default is fnt_dsansmono16).
_color: The color of the text item (optional).
_text_color: The color of the dropdown text (optional).
_dropdown_color: The color of the dropdown area (default is global.gui_menu).
_hover_color: The color of the dropdown area when hovered (optional).
_background_color: The background color of the dropdown area (default is global.gui_background).
Properties
container_id: The ID of the associated container.
is_enabled: A boolean indicating whether the dropdown item is enabled and can respond to interactions.
margin: The general margin applied to the dropdown item.
text: The label text of the dropdown item.
options: A list of options for the dropdown.
lock_trigger: A boolean indicating whether the dropdown trigger is locked (disabled).
clicking: A boolean indicating whether the dropdown item is being clicked.
gui_clicking: A boolean indicating whether the dropdown item is being clicked using GUI coordinates.
outline: A boolean indicating whether an outline is drawn around the dropdown area.
x0, y0: The top-left corner coordinates of the dropdown item.
x1, y1: The bottom-right corner coordinates of the dropdown item.
hover: A boolean indicating whether the mouse is hovering over the dropdown item.
font: The font used for the text item.
color: The color of the text.
input_text: The input text for the dropdown.
cursor_position: The cursor position within the input text.
text_color: The color of the dropdown text.
open: A boolean indicating whether the dropdown is open (expanded).
selected_item_index: The index of the currently selected item in the dropdown options.
bg_color: The background color of the dropdown area.
dropdown_color: The color of the dropdown area.
hover_color: The color of the dropdown area when hovered.
value: The currently selected value of the dropdown.
specific_margin: An additional margin applied to rendering the item.
Methods and Functions
Toggle()
Toggles the dropdown open and closed.
SetValue(_value)
Sets the value of the dropdown to the specified value.
SetValueByOptionIndex(_i)
Sets the value of the dropdown based on the index of the selected option.
GetValue()
Returns the currently selected value of the dropdown.
GetSelectedItemIndex()
Returns the index of the currently selected option in the dropdown.
Update()
Updates the dropdown's behavior and interaction based on user input.
Render()
Renders the dropdown item and its options on the screen.
GetDropdownWidth()
Returns the width of the dropdown area based on the longest option text.
GetDropdownHeight()
Returns the total height of the dropdown area including all options.
GetDropdownItemHeight()
Returns the height of a single dropdown option.
GetSpecificDropdownItemHeight(_i)
Returns the height of a specific dropdown option by index.
Functionality
The RavenDropdownItem component allows you to:
Create a dropdown menu with selectable options.
Customize the appearance of the dropdown item and its options.
Respond to user interactions and selection.
The RavenDropdownItem is a component/ui element that allows you to let a user choose from a given list of options.
RavenTextInputItem
The RavenTextInputItem is a component within Raven that provides a text input field. It allows users to enter text input in a designated area.
Constructor
The constructor of RavenTextInputItem initializes a text input item with the following arguments:
_text: The label text for the input item.
_on_click: An optional function to be executed when the input item is clicked (default is undefined).
_margin: The margin applied to the input item (optional, default is 16).
_font: The font used for the text input (default is fnt_dsansmono16).
_color: The color of the input border (optional).
_text_color: The color of the input text (optional).
Properties
container_id: The ID of the associated container.
is_enabled: A boolean indicating whether the input item is enabled and can respond to interactions.
margin: The general margin applied to the input item.
text: The label text of the input item.
on_click: The function to be executed when the input item is clicked.
lock_trigger: A boolean indicating whether the item's activation is locked.
clicking: A boolean indicating whether the item is being clicked.
gui_clicking: A boolean indicating whether the GUI is being clicked.
outline: A boolean indicating whether to display an outline.
specific_margin: An additional margin applied to the item's rendering area.
x0, y0, x1, y1: Coordinates for the item's rendering area.
hover: A boolean indicating whether the mouse pointer is hovering over the item.
font: The font used for the text item.
color: The color of the input border.
input_text: The current text input in the field.
cursor_position: The current position of the cursor within the input text.
text_color: The color of the input text.
active: A flag indicating if the item is actively receiving input.
placeholder_text: The text displayed in the input field when no input is entered.
cursor_blink_interval: The interval for cursor blinking.
cursor_blink_timer: The timer for cursor blinking.
cursor_visible: A boolean indicating cursor visibility.
Methods and Functions
StartInput()
Activates the input field, allowing the user to type text.
StopInput()
Deactivates the input field, preventing further text input.
GetContainerId()
Returns the ID of the associated container.
SetContainerId(_container_id)
Sets the ID of the associated container.
SetEnabled(_set)
Sets whether the input item is enabled and can respond to interactions.
SetOnClick(_function)
Sets the onclick event trigger for the item.
OnClick()
Executes the onclick trigger/event.
GetText()
Returns the label text of the item.
SetText(_text)
Sets the label text of the item.
GetWidth()
Returns the width of the text in pixels.
SetCoords(_x0, _y0, _x1, _y1)
Sets the coordinates for the item's rendering area.
GetHeight()
Returns the height of the text in pixels.
Update()
Handles input and cursor blinking for the input field.
Render()
Renders the input field and its text, including cursor blinking.
Functionality
The RavenTextInputItem component allows you to:
Create a text input field for users to enter text.
Customize the appearance of the input field and its text.
Activate and deactivate the input field based on user interactions.
Respond to click events on the input field.
RavenButtonItem
The RavenButtonItem is a component within Raven that represents a clickable button with customizable text. It is used to trigger actions or events when clicked.
Constructor
The constructor of RavenButtonItem initializes a button item with the following arguments:
_text: The label text for the button.
_on_click: The function to execute when the button is clicked.
_margin: The margin applied to the button (optional, default is 0).
_padding: The padding around the button text (optional, default is 2).
_border_radius: The border radius of the button (optional, default is 0).
_draw_outline: A boolean indicating whether to draw an outline around the button (optional, default is false).
Properties
container_id: The ID of the associated container.
is_enabled: A boolean indicating whether the button is enabled and can respond to interactions.
text: The label text of the button.
on_click: The function to execute when the button is clicked.
lock_trigger: A boolean indicating whether the button trigger is locked (disabled).
clicking: A boolean indicating whether the button is being clicked.
gui_clicking: A boolean indicating whether the button is being clicked using GUI coordinates.
subitems: A list of subitems associated with the button (if any).
outline: A boolean indicating whether an outline is drawn around the button.
margin: The general margin applied to the button.
x0, y0: The top-left corner coordinates of the button.
x1, y1: The bottom-right corner coordinates of the button.
hover: A boolean indicating whether the mouse is hovering over the button.
height: The height of the button text.
draw_outline: A boolean indicating whether an outline is drawn around the button.
padding: The padding around the button text.
border_radius: The border radius of the button.
Methods and Functions
GetContainerId(): Returns the ID of the associated container.
SetContainerId(_container_id): Sets the container ID for the button.
SetEnabled(_set): Sets whether the button is enabled or disabled.
SetOnClick(_function): Sets the function to execute when the button is clicked.
OnClick(): Executes the onclick function when the button is clicked.
GetText(): Returns the text of the button.
SetText(_text): Sets the text of the button.
GetWidth(): Returns the width of the button.
SetCoords(_x0, _y0, _x1, _y1): Sets the coordinates of the button.
GetHeight(): Returns the height of the button text.
Update(): Updates the button's behavior and interaction based on user input.
Render(): Renders the button on the screen.
Functionality
The RavenButtonItem component allows you to:
Create clickable buttons with customizable text.
Define actions or events triggered by button clicks.
Customize button appearance, including text, padding, and border radius.
RavenImageButtonItem
The ImageButtonItem is an element used to create interactive image buttons.
Constructor
The constructor of RavenImageButtonItem initializes an image button with the following arguments:
_on_click: The function to execute when the button is clicked.
_sprite: The sprite or image to be displayed on the button.
_margin: The margin applied to the button (optional, default is 0).
_sprite_xscale: The x scaling of the image (optional, default is 1).
_sprite_yscale: The y scaling of the image (optional, default is 1).
Properties
container_id: The ID of the associated container.
is_enabled: A boolean indicating whether the image button is enabled and can respond to interactions.
on_click: The function to execute when the button is clicked.
lock_trigger: A boolean indicating whether the click trigger is locked (disabled).
clicking: A boolean indicating whether the button is being clicked.
gui_clicking: A boolean indicating whether the button is being clicked using GUI coordinates.
subitems: A list of subitems associated with the button.
outline: A boolean indicating whether an outline is drawn around the button.
margin: The general margin applied to the button.
x0: The x-coordinate of the top-left corner of the button.
y0: The y-coordinate of the top-left corner of the button.
x1: The x-coordinate of the bottom-right corner of the button.
y1: The y-coordinate of the bottom-right corner of the button.
hover: A boolean indicating whether the mouse is hovering over the button.
height: The height of the button.
sprite: The sprite or image displayed on the button.
sprite_xscale: The x scaling of the image.
sprite_yscale: The y scaling of the image.
Methods and Functions
GetContainerId(): Returns the ID of the associated container.
SetContainerId(_container_id): Sets the container ID for the button.
SetEnabled(_set): Sets whether the button is enabled or disabled.
SetOnClick(_function): Sets the function to execute when the button is clicked.
OnClick(): Executes the onclick function when the button is clicked.
GetWidth(): Returns the width of the button.
SetCoords(_x0, _y0, _x1, _y1): Sets the coordinates of the button.
GetHeight(): Returns the height of the button.
Update(): Updates the button's behavior and interaction based on user input.
Render(): Renders the button on the screen.
Functionality
The RavenImageButtonItem component allows you to:
Create interactive image buttons for your user interface.
Customize the appearance and behavior of image buttons.
Respond to user interactions, including clicks and hover events.
RavenImageItem
The ImageItem is an element used to create non-interactive image elements.
Constructor
The constructor of RavenImageItem initializes an image item with the following arguments:
_sprite: The sprite or image to be displayed on the image.
_margin: The margin applied to the image (optional, default is 0).
_sprite_xscale: The x scaling of the image (optional, default is 1).
_sprite_yscale: The y scaling of the image (optional, default is 1).
Properties
container_id: The ID of the associated container.
subitems: A list of subitems associated with the image.
outline: A boolean indicating whether an outline is drawn around the image.
margin: The general margin applied to the image.
x0: The x-coordinate of the top-left corner of the image.
y0: The y-coordinate of the top-left corner of the image.
x1: The x-coordinate of the bottom-right corner of the image.
y1: The y-coordinate of the bottom-right corner of the image.
hover: A boolean indicating whether the mouse is hovering over the image.
height: The height of the image.
sprite: The sprite or image displayed on the image.
sprite_xscale: The x scaling of the image.
sprite_yscale: The y scaling of the image.
Methods and Functions
GetContainerId(): Returns the ID of the associated container.
SetContainerId(_container_id): Sets the container ID for the item.
GetWidth(): Returns the width of the item.
SetCoords(_x0, _y0, _x1, _y1): Sets the coordinates of the item.
Raven 0.6.0 is now released and available to download! This version introduces a new manual render mode, an ImageItem component, and copy paste functionality for input text.
