My Gamemaker Widget System

examples.md

Examples:

• https://media.giphy.com/media/loMWIgNeyDk5BWQ6b2/giphy.gif
• https://media.giphy.com/media/dC96IgJ7CTWCrLqCxN/giphy.gif

Info

Widgets Variable Definitions so far: https://i.imgur.com/zG8mO02.png

Object inheritance structure

obj_widget->
     obj_gui_canvas (root GUI widget, its size is controlled from the DISPLAY_EVENT_RESIZE_GUI custom event)
     obj_gui_widget->
              obj_panel
              obj_minimap
              obj_portrait
     obj_sprite_widget
     obj_nameplate

obj_panel_Create.js

// Create Event
// mouse events are handled in our event block

// left press (called when the widget is pressed, accounting for depth)
mouse_register(MouseEvent.left_press, self);

// hovering support (called when the mouse hovers the widget, accounting for depth)
mouse_register(MouseEvent.enter, self);
mouse_register(MouseEvent.leave, self);

// apply scrolling support (essentially changes the scroll_pos up or down)
mouse_register(MouseEvent.wheel_up, self);
mouse_register(MouseEvent.wheel_down, self);

widget_api_example.js

minimap = widget_create(obj_minimap);
minimap.target = this;
minimap.anchor = Anchor.right; // anchors our positioning to the right of our parent

with (obj_gui_canvas) { 
	widget_child_add(other.minimap);
}

// Note: the depth of GUI widgets are managed based on its placement index that can be changed.
// see end

panel = widget_create(obj_panel, 100, 200);
panel.padding = 20; // applies padding_left/top/bottom/right
panel.anchor = Anchor.right; // anchors our positioning to the right of our parent
panel.bg_color = c_red; // background rect color
with (obj_gui_canvas) {
	widget_child_add(other.panel);
}

var panel1 = widget_create(obj_panel, 80, 50);
panel1.bg_color = c_blue; // background rect color
panel1.overflow = true; // allows us to overflow our boundaries
with (bpanel) {
	widget_child_add(panel1);	
}

var panel2 = widget_create(obj_panel, 80, 110);
panel2.bg_color = c_green; // background rect color
panel2.overflow = true; // allows us to overflow our boundaries
with (bpanel) {
	widget_child_add(this.panel1);	
}

with(panel) {
  widget_set_depth_front(); // brings the panel to the front of render list (so the back of the list i.e. rendered last) 
}