Asset - Scripts WOKET UI v4.0 - Free, Easy, Tree-based UI System

[WindCat]

​

( WOKET UI v4.0 )
Marketplace Link : https://marketplace.yoyogames.com/assets/6026/woket-ui

[ Important functions of W.UI ]
- Tree design ui
- Check which UI the mouse is on. (Top UI)
- Automatic drawing order
- Coordinate correction according to parent node
- Easily designed using layers in room editor - You can easily call up the UI.

I'm always ready for feedback! Just tell me!
Try it and write a review.

Spoiler: Reference

///Reference

• wui_create(width, height) : Creates the ui system. All necessary variables are defined. Return list id of node.
• wui_add_node(obj,[absolute],[precise]) : Creates a node based on 'obj'. The required variables within that instance are defined. and Return the instance id. In addition, you can set values of the '_absolute' variable and '_precise' variable.
• wui_add_layer(layer_name,[_absolute],[_precise]) : Adds instances of that layer whose names begin with "WuI_" as nodes.
• wui_add_layer_in_node(layer_name,toNode,[absolute],[precise]) : + Moves the parents of those nodes to 'toNode'. (Tip : Use Surface!)
• wui_del_layer(layer_name) : Removes nodes with that layer name. (Destroy X, Detach)
• wui_update() : You must run before the ui_draw function. This is related to mouse check, coordinate correction, and depth.
• wui_draw() : Must call up the Draw event on the ui system. It runs the child nodes sequentially.
• wui_draw_inherited() : (draw event in node) Performs a draw event for the child nodes.
• wui_set_depth(depth) : Sets the depth for that node (and allows negative numbers up to - 100).
• wui_set_position(x,y) : Sets the coordinates of that node.
• wui_set_size(width,height) : Sets the size of that node.
• wui_set_rect(x,y,width,height) : Sets the coordinates and size of that node.
• wui_set_collision(absolute,precise) : Sets whether to use absolute coordinates and precise collision(mouse).
• wui_set_visible(visible) : Sets whether it draw itself. (+child nodes. It also applies to mouse collisions.)
• wui_set_visible_layer(layer_name, visible) : Sets whether nodes with that layer name are drawn.
• wui_destroy_hierarchy() : Removes its child nodes.
• wui_destroy_node(id) : Removes the child node.
• wui_destroy_self() : Removes itself from the parent node.
• wui_get_node(layer_name,object_index,[index]) :Gets the instance id of the node with the object name and layer name. Please use the third argument for multiple. (index : 0~ / default 0)
• wui_get_all(layer_name) : Returns an array of all the nodes in the layer name.
• wui_callback() : Calls back to system instance. (Refer to the description of the callback variable.)
• wui_callback_func(function,[arg0]) : Runs the function with callback.
• wui_if_mousechk() : Returns whether the mouse is on its node.
• wui_set_origin(x,y) : Sets the origin for that node.
• wui_set_scale(xscale,yscale) : Sets the scale value of the node.

///Variables

• system : id of ui system
• parent : id of the parent node
• list : list id to store child nodes, or not -1
• width, height : Calculated horizontal, vertical size
• scalex, scaley : Calculated scale value
• _x, _y, _width, _height : use wui_set_rect() function! - Coordinate, Size
• _absolute : if the coordinates are absolute, 0 if specified relative to the parent node
• _precise : 1 if checked according to sprite mask, 0 if checked in rectangle(x, y, _width, _height)
• depth : Set depth, never modify it directly, use the wuiset_depth function.
• _surfp : Used to create the Surface UI, where the surface node stores its id in '_surfp' to its child nodes. This ensures normal mouse coordinate calibration within the script.
• _visible : Whether to draw itself
• _originx, _originy : Origin

(Variables in UI System only)

• depthlist
• depthptr
• mousechk : the instance id of the node mousing. (Top node)
• callback : The id of the node that was callback., Can be received when user event 0 is executed.

 

[WindCat]

( WOKET UI v3.2 )
- '_visible' variable add
- wui_set_visible(), wui_set_visible_layer() function add.

Introduce about my UI System more!

( Important functions of W.UI )
- UI design of tree structure : parent coordinates (1, 1) + child coordinates (2, 2) = calculated child coordinates (3, 3)
- Check the mouse : Give the instance id drawn on top of the mouse. (It's a pain in the neck to implement.)
- Automatic drawing order : literally, like a game maker, it automatically sorts the draw order to the WuI's depth system. (Including Children)
- Design using layers : Easily design from the room editor, without directly touching the coordinates with code! (v3 New)

( WUI Working structure )
1. wui_create() [Create Event] + wui_add_*
2. wui_update() [End Step Event] & callback [User Event 0]
3. wui_draw() [Draw (GUI) Event]


Part 1 can be written in this way simply.

 wui_create(room_width,room_height);
 with(wui_add_node(o_rect)){
     color=c_black;
     wui_set_rect(32,32,64,64);
     with(wui_add_node(o_rect)){
         wui_set_rect(16,16,32,16);
         color=$0fa5f5;
     }
 }
 with(wui_add_node(o_rect)){
     wui_set_rect(16,16,128,24);
     wui_set_depth(1);
 }

(So how do we make WUI components?)
Nothing much, if you create a button object.
- Draw buttons in a draw event
- In the left mouse button event, if (system.mousechk==id) wui_callback (); //just callback.
- Most importantly, visible=0.You only need to set this.

 

[WindCat]

( Useful Tips [1/2] for WUI : Import nodes from Layer)

Let's create a single UI layer. (This doesn't matter with name)
In many cases, insert the UI system instance into this layer.

I don't mind not using [Sub *], but let's create a sub-instance layer based on one layer for ease of management.
The UI layer name must start with " Wui_".

Let's set the layer name to start with "Wui_" and add a node instance.
The value _width, _height, contains the sprite_width, sprite_height, and can also be resized. (Without Rotation)

I created an o_rectangle to draw a rectangle and o_ button object for callback checking.

If you have to receive a callback like this, and you have multiple objects with the same name, the index value from the top left list will be like this, 0, 1.


///UI System Creation Event

wui_create(room_width,room_height);
wui_add_layer("Wui_A");

wui_button0=wui_get_node("Wui_A",o_button,0);
wui_button1=wui_get_node("Wui_A",o_button,1);


wui_update(), wui_draw(), insert these two functions into the UI system.
- wui_add_layer(layer_name) : This function adds nodes by calling up instances from that layer name.
- wui_get_node(layer_name,object_index,[index]) : This function finds instance IDs by layer name, object name, among the added nodes.

Do not write wui_get_node () at user event 0, save and use the value in advance in this generation event.
- If multiple call-back events are run by separating index values by semi-class, there may be performance degradation.

Let's callback from the button to the left mouse button event. There is also a call-back method to wui_callback_func (function, [arg 0]).

if (system.mousechk==id) wui_callback();


Let's now receive callback by adding the following code to user event 0.

//Callback

if (callback==wui_button0) show_message("Button 0");
else if (callback==wui_button1) show_message("Button 1");


The callback variable stores the instance ID that called the event. See the results for yourself!

 

[WindCat]

WOKET UI v4.0

- fix error in wui_set_visible_layer(~) - when unexisting layer instance.
- support multi-touch for mobile -> wui_create(width,height,touch_limit), wui_if_mousechk()
- new functions: wui_set_origin(x,y), wui_set_scale(x,y).