KinGUIru (KindGUI)

Dmi7ry

Member

KinGUIru (aka KindGUI) is a GUI system for GMS (GMS1.x, GMS2; all platforms).

First release is planned before the end of the current year (as paid asset).

A few words about its features.
  • Nice-looking (I hope) default design. Themes are supported (you can customize the default theme, like changing sizes/colors/etc, but you can use sprites as well)
  • It supports relative size/position
  • Just one object for the whole GUI
  • Visual designer
Elements that are finished already:
  • Window (nested windows are supported)
  • Button (simple button, trigger, image button)
  • CheckBox
  • RadioButton
  • ListView
  • Table (grid)
  • TreeView
  • Properties (It supports several types: Caption, Text, Bool, Number, Font, Script, Sprite, Enum, Collection)
  • DropdownList
  • Image (+animated; normal/premultiplied)
  • ProgressBar
  • Menu
  • PopupMenu
  • Slider
  • Text
  • EditLine
  • Groups
  • Tabs (horizontal and vertical)
  • ToolBar
Planned elements:
  • Switcher
  • RTF-like texts + editor (different alignment, fonts, colors, images, subscript/superscript, underline, links/anchors, etc)
  • HLayout, VLayout
  • ComboBox
  • and other.
It is also planned to add: easing, HUD (optimized), direct elements (without windows), loading from external files (in runtime), and other.

Few examples (WIP):

Popup Menu (default skin)


Properties (default skin)

Code:
var p = kg_properties_create(-1, 10, 50, 70, 300, 550, 110, 25, -1, c_dkgray, c_white, true, user_properties_changed);
kg_properties_add(p, property_type_caption, "ProgressBar");
kg_properties_add(p, property_type_number, "X", 60, tag_progressbar_x);
kg_properties_add(p, property_type_number, "Y", 86, tag_progressbar_y);
kg_properties_add(p, property_type_number, "Width", 200, tag_progressbar_width);
kg_properties_add(p, property_type_number, "Height", 20, tag_progressbar_height);
kg_properties_add(p, property_type_script, "Action", -1, tag_progressbar_action);
kg_properties_add(p, property_type_caption, "Data");
kg_properties_add(p, property_type_number, "Value", 50, tag_progressbar_value);
kg_properties_add(p, property_type_number, "Total value", 100, tag_progressbar_total);
kg_properties_add(p, property_type_caption, "Background");
kg_properties_add(p, property_type_color, "Color", rgb($4e464a), tag_progressbar_bg_col);
kg_properties_add(p, property_type_sprite, "Sprite", -1, tag_progressbar_sprite);
kg_properties_add(p, property_type_enum, "Scale mode", pack(en_scale_mode, SCALE_MODE_STRETCH), tag_progressbar_bg_scale_mode);
kg_properties_add(p, property_type_caption, "Foreground");
kg_properties_add(p, property_type_color, "Color", rgb($966a76), tag_progressbar_fg_col);
kg_properties_add(p, property_type_enum, "Scale mode", pack(en_scale_mode, SCALE_MODE_STRETCH), tag_progressbar_fg_scale_mode);
kg_properties_add(p, property_type_caption, "Text");
kg_properties_add(p, property_type_font, "Font", -1, tag_progressbar_font);
kg_properties_add(p, property_type_color, "Color", rgb($ffffff), tag_progressbar_text_color);
kg_properties_add(p, property_type_enum, "Mode", pack(en_progressbar_mode, PROGRESSBAR_MODE_ALL), tag_progressbar_text_mode);
kg_properties_add(p, property_type_bool, "Bool example", true);
kg_properties_add(p, property_type_text, "Text example", "Hello world");

Dropdown

opened


Horizontal Tabs


Vertical Tabs




Visual designer
View attachment 13984
here you can also see Listview (with icons and without icons) and Treeview elements.

Very old examples (that were made when I just started the work on the GUI):
Table (grid)

Windows (1st - default, 2nd - sprites)

Test of multiple nested windows (there are 5 windows used - you can see two of them on shot and 3 more are below the visible area)
View attachment 13985



Feel free to write your questions/suggestions/etc.

P.S. KindGUI already tried and tested in battle conditions.
P.P.S. I know that I write bad in English, so if you want you can PM me about my mistakes.
 
Last edited:
G

goo

Guest
I suggest adding a valcoder.
It's a circular slider, so to speak.

tikata from wikipedia.

Валкодер — вращающийся элемент управления наподобие ручки настройки во многих радиоприёмниках. Может быть как одно- так и многооборотным.

The rotary encoder is a rotating control like a tuning knob in many radios. It can be either one-way or multi-turn.

*******************************************************************

you can also add a list of variables,
I hope this widget is so called

here is a picture


This is only a request / offer.

For example, with the help of a valcoder it will be convenient to select the required number of degrees, in some editor, that the slider does not turn out to be very obvious.

Purely offtopic. Why kangaroo in the crown?
 

Dmi7ry

Member
and text boxes
Yep, I really understand you :D

BTW, KindGUI supports different filters for textboxes: integers, floats, signed/unsigned, limited decimal accuracy, only letters, limited length, etc. And hotkeys (Ctrl+Arrows, Ctrl+Delete, Ctrl+Backspace, Home/End, Ctrl+C, Ctrl+V). Selection isn't supported yet, but will be added.
 
G

goo

Guest
Somewhere my first post has disappeared, the second one remained, strange.

Okay, I'll write it.

It would be advisable to add the following elements to the future.

1) a rotary encoder (circular slider), it will be convenient to use when creating an element of the interface, which sets the angle of something.

2) dataGridView.

3) ImagerViewer to display the game level selection menu, or save slot.

Good luck in working out! Thank you for your work!
 
Top