Alpha UTIKI - UI Editor for Game Maker Studio 2 (Contains DEMO) [Alpha, v0.1.0.0 - 29/04/2021]

FoxyOfJungle

Kazan Games
Presentation:

Hello, welcome to the Utiki - UI Editor working in progress devlog topic.
"Utiki - UI Editor" is a software that aims to streamline the process of creating interfaces for games, using a Drag and Drop interface. This is a WYSIWYG (What You See Is What You Get).


Current development status:
  • In progress. (Slowly because of other occupations).
  • Version: Alpha. Not released.
  • Demo: v0.1.0.0 (29/04/2021) Download.
  • Latest Post: Devlog #5.
Note: Everything presented here is in a very early stage of development, so many things can change or not, be added or removed, everything will depend. This topic is not yet complete, I will modify it in the course of development.
I'm go to college, classes are back, I'm 18 years old, the project will take longer consequently.


Objective:

Save time by creating a very detailed and laborious interface for a game.
In general, you will insert items on the screen and the UTIKI will export the code ready to be used in Game Maker Studio.




Program Canvas/Interface:


In the current state of development, this is the interface and basically how it will be:
This is the interface when opening the program:


(Most recent screenshot)


In the left part (now referred to as the area), there will be layers and objects, which can be selected according to the tabs above. The layer system is a powerful system that is being created for better organization of objects depth, it is possible to add, remove, move, identify, delete, hide and show all objects or layers.
The object tab shows all the objects in the workplace, regardless of which layer they are in, there is a button to delete them all.

In the center area there is the workplace, it is the place where the interface will be designed and where it will be created, it is where the objects will be placed.

On the right area is the Inspector, this is where you can edit the properties of all objects, each object will be differentiated by type, if it is an image, it will open a specific editor for the image, if it is a button, it will open one for a button, and so on. There is a Project Settings tab, it will be possible to modify some project settings, such as project name, GUI size and others.

The inspector will look something like this:
(Image from Internet. I don't have copyright of the image and I don't know who created it. Using only as a demonstration).

At the bottom there is the File Manager, this is where the files that will be used within Utiki will be, the supported files will be: Sprites, Fonts and Sounds. In the Console tab, it will show the input of mouse clicks and other interactions with the UI when clicking on play and being able to test in real time. The Log tab will be a list of debugging information from Utiki, just like the Game Maker's output.

There is a beautiful shader that blurs the window background, giving a modern and clean look to the canvas, it does not consume much GPU performance, however, it will be possible to disable it, obtaining more performance.
Notice that there are shadows on the windows, differentiating from the background color and giving it a professional look.

At the bottom, there are buttons related to Recent Projects, when opening the program, it is much easier to open the last file you were editing in just one click!

In "Get Started" you can create a new project or open any Utiki project file.

When you move the cursor over the buttons, they change color, when you click, the color reverts.


Creating a new project:


(Old screenshot) Perhaps some will notice, in fact the interface is inspired by the Godot Engine interface, however, it is not the same, the Godot interface has outlines, this one does not and this is more modern. The colors of the entire interface have been changed to a dark theme.


When clicking on "New UI Project", a new window will open.
Here you put some project information, the whole project will be saved in just one file and not a folder. The file extension will be .utk.

The "Pixel Art UI" checkbox indicates whether I should use a linear interpolation filter or not when working in the workplace.

In the future, I will put a preview on the right side.


This is the workplace, where the interface/UI for your game will be made:




The entire interface is responsive and the areas can be resized:
Note that the objects can also be selected in the "objects" tab.
The scrollbar allows you to scroll the list.




With the powerful Layer system, there are many possibilities to manipulate the depth of the items.





Note that when selecting a layer, it highlights which objects are contained within the layer.
It is possible to hide and show the layer or individual objects.
It is possible to change a layer position, changing the depth of all contained objects.
The first layer button adds the layer to the bottom of the list, the second adds it to the next layer.

Note also that above the workplace, there are tabs, similar to the browser, in them, it will be possible to create new workplaces, they will simulate the Game Maker rooms, this will be useful when I create a menu for example, if I click on a button, I can make me go to this imaginary room, which are actually codes to draw in the draw event, all of which will be saved in the same file.

Still in the Inspector, it will be possible to define the X and Y position of the objects, rotation, scale, anchor, click actions and many others. It will be possible to add codes in a text box (in which they will be executed when I press, but this will not be executed inside the Utiki, but in Game Maker when exported)




Features:


For now, this is the list of items that I plan to add, so that the user can choose:

- Background (Stretched or repeated)
- Sprite (You can define whether it will be 9 slice or not)
- Text (With custom font. It will be possible to add some cool things like 0's before a number, text typing effects, alignment, width, color, etc.))
- Button (With mouse click).
- Virtual Button (For Mobile, using device functions).
- Virtual Joystick (For Mobile, using device functions)
- Virtual Keyboard (On the screen or it will be possible to be a keyboard using the keyboard)
- Checkbox
- Healthbar (That uses a custum sprite or functions like draw_healthbar. It can be vertical or horizontal)
- Speedometer (For racing games, can be customized)
-
Geometry (functions like draw_rectangle, draw_circle...)
-
Menu (Mouse or Keyboard, it will be possible to choose the style of the menu: changing the text color, using draw_rectangle at the bottom, using a side indicator sprite on one side or both and others...)
- Scrollbars (horizontal and vertical)

-
Anchor (I think this is the most important UI object, with it it will be possible to create an imaginary rectangle, it will serve as an anchor for other objects to be drawn from it, that is, the X and Y of the child object will be connected to it, if I move the anchor, the objects attached to it move. You will also be able to choose not to use them, just use coordinates from the GUI itself to orient objects on the screen. (be responsive)).

-
Sprite Arrays (Horizontal or vertical. It will be possible to choose the variable as far as the loop goes.)
-
Geometry Arrays (Horizontal or vertical. It will be possible to choose the variable as far as the loop goes.)
-
Text Arrays (Horizontal or vertical. It will be possible to choose the variable as far as the loop goes.)

-
Array of Sprites with Text (Horizontal or vertical. You can add more texts like name and price for a store for example)
-
Array of Geometry with Text (Horizontal or vertical. You can add more texts like name and price for a store for example)


Best things:

The interface is wysiwyg, that is, what you see is the result. Everything will be draggable, as well as it will be possible to define exact values of the positions of the items.
I think about adding guidelines to the workspace, so that the objects align automatically (you can disable this).


Example of UI interfaces that can be easily created:


(I got these images from the internet, I don't have any copyright, I don't know which one created, I'm using it just for the demonstration principle, in fact, this is incredible.
If the owner is seeing this and wishes, I can remove.)





Functionalities:


The program will be translated into 13 languages:

- English
- Portuguese
- French
- Spanish
- Italian
- German
- Dutch
- Japanese
- Korean
- Russian
- Africaner
- Chinese
- Chinese Traditional


It will be possible to modify the interface/canvas theme, for now there is only the dark theme, but it will be possible to use a custom theme or pre-defined themes.



Core Engine:


The entire canvas is drawn on a single object, basically everything consists of arrays, structs and variables.
The format of the file to be exported is .utk, inside it will actually be .zip with the files inside, such as sprites, fonts, sounds and the file containing essential project information.
I'm using Dialog Module, File Manager and File Dropper made by @Samuel Venable (Thank you so much!)

The entire program is loaded in a previous room window. Loading takes an average of 2-3 seconds.

Some areas of the interface don't use surfaces, but they do use shaders, thanks to @YellowAfterlife for creating the shader that allows the software achieve this performance. (Thank you so much!)

I created the shader that highlights the layer in red, this was done by simply multiplying the red color by the texture in the shader fragment.

The software does not use application_surface, it only uses the GUI event for everything, everything is drawn on a surface. There is a surface for the workplace, one for the camera and one for the Interface/canvas.



Logo:




Old logo concept:
This was courtesy of a friend, I will make a similar one and more neat. (Thanks Rhyan!)
Image




Disclaimer:


I must make it clear that the program will not be able to perform miracles, it cannot do its entire game alone, you will have to learn how to use the right tools and put everything together to make your game (although the software does much of the process), this software serves as an quickstart for you to create a great and beautiful interface without having to spend hours trying to do something nice. Although it will create a complete interface, "surfaces" related things you still have to do. (Maybe I will change that in the future). I do not guarantee that everything I have quoted will be created as written, but I will do my best according to my experience with GML.
I was a little limited to using only 10 images in the topic.

I count on your feedback to develop it together :bunny:
Thank you so much for reading this far, have a great day! 😀
 
Last edited:
Honestly, UI management is probably the feature that GMS2 is missing the most in my opinion (especially with the new additions to 2.3 adding a lot of the previous "missing most" features). Plenty of others have solutions available as well, but this looks especially well put together, both beautiful and extremely flexible. Great work!
 

kburkhart84

Firehammer Games
I don't know how you are doing all of this, but there is one thing I did with my input system that you might want to do here as well. Since 2.3, the datafiles folder is for the old "included files." Furthermore, you no longer have to import the files into the IDE(though you can still change settings for them). This means you can update those files, remove some, add some, whatever, and they will always just work and get put in the working directory.

In my input system, I was previously copy/pasting values from my configuration program. Now, I have a #macro in the project that points to the datafiles folder. When you want to run the configuration, you simply go to the right room in a build, either by putting it at the top of the room order, or having some object take you there, or whatever is easiest. That configuration program then updates files in the datafiles folder(the sandbox has to be turned off).

I found this to be a neat way to handle configuring things. You can easily run a build to do the configuration. You technically could also create an executable and just run that(though you would have to do it again if you ever moved the project directory). In your case, you could easily make the user find the directory instead of using a #macro like I did. In your case, you could easily put GUI definitions of some sort in that files, either multiple in a single file or one per file. Then, you would have objects that simply dynamically create those GUIs on demand via a function call or something.
 

FoxyOfJungle

Kazan Games
I don't know how you are doing all of this, but there is one thing I did with my input system that you might want to do here as well. Since 2.3, the datafiles folder is for the old "included files." Furthermore, you no longer have to import the files into the IDE(though you can still change settings for them). This means you can update those files, remove some, add some, whatever, and they will always just work and get put in the working directory.

In my input system, I was previously copy/pasting values from my configuration program. Now, I have a #macro in the project that points to the datafiles folder. When you want to run the configuration, you simply go to the right room in a build, either by putting it at the top of the room order, or having some object take you there, or whatever is easiest. That configuration program then updates files in the datafiles folder(the sandbox has to be turned off).

I found this to be a neat way to handle configuring things. You can easily run a build to do the configuration. You technically could also create an executable and just run that(though you would have to do it again if you ever moved the project directory). In your case, you could easily make the user find the directory instead of using a #macro like I did. In your case, you could easily put GUI definitions of some sort in that files, either multiple in a single file or one per file. Then, you would have objects that simply dynamically create those GUIs on demand via a function call or something.
Thanks for the explanation and the tips, I will analyze better what you said at another time, I'm a little sick, with a headache too... 🤧
 

FoxyOfJungle

Kazan Games
UTIKI DEVLOG #1 [ v0.0.1.1 ]


* Graphics:

Utiki logo remade:






Loading screen:



For now there is no demo, I will reinstall Visual Studio to return to using YYC. Also, I just created the logo.
Edit: Now it has.



* Core:

Many optimizations made, before I had 500 - 700 FPS, now 1818!

 
Last edited:

FoxyOfJungle

Kazan Games
UTIKI DEVLOG #2 [ v0.0.1.2 ]


* Core:


The scrollbars now work perfectly, so far I haven't made a horizontal one, but it should be simple. I made several internal adjustments to the engine core. I also included some clip shaders in some parts of the canvas. Now, the tabs in the workplace do not now go over the canvas. I increased the height of the instance buttons. The performance has been improved, however there are some things to improve, such as drawing the list items only in the visible area.



Demo is now available.
 

FoxyOfJungle

Kazan Games
UTIKI DEVLOG #3 [ v0.0.2.0 ]


* Visual:


Added the Object Creation Menu, here you can choose which object to add with just 1 click!





You click this button and the menu opens: (in a future update, you will can press Shift + A too)
Next to it there is the play button, this is where you will test the interface.



Note that zoom buttons have been added, there are preset values for the zoom now, so no bad pixels, now it's all PIXEL PERFECT!
Note the zoom on the right:
Gizmo maintains 1:1 scale:



The gizmo is the indicator of where the objects will be created, to move it, just click with the middle mouse button or ALT.



Fullscreen button added:



Whenever I move a layer, now it highlights:





* Core:


The save and load system is ready to be used, now when creating a project, it creates a .zip file and compresses all resources used in Utiki: Sprites, Audios and Fonts and convert to the .utk extension.
When loading, it extracts in the included files folder in LocalAppData in a folder called "cache". To free up space, whenever you exit the program, the folder is deleted. Each folder is unique, so I can open as many instances of Utiki as I want!
In the future you will have a button to clear the cache completely, in case there is a power failure and the files are still there.

Many internal adjustments have been made, the scrollbars have been reformulated and the text boxes have been optimized, they no longer use objects, now they use structs.

Demo is now available.
 
Last edited:

FoxyOfJungle

Kazan Games
UTIKI DEVLOG #4 [ v0.0.3.0 ]


First of all, sorry for the delay in posting, these features have been added for some time ago, but I just had time to show you now.



* Core:

It is now possible to hold Shift + Click to select multiple objects.
Press B to create a selection box and select several:



New tab that shows only the objects of the layer, now there is a tab that shows all the objects on the side, when selecting multiple objects it is possible to view. It is also possible to select the objects in the list itself.



You can now press Shift + A to open the object creation menu (making it possible to create objects quickly!)



Improved the spacing of the buttons in some pixels and now I moved the text with information downwards, so that it leaves more space for the buttons.



Discord Rich Presence added:
This is a cool feature to show to your friends that you are using a super cool program :)



Fixed full screen bug (in the past, when leaving the full screen, it didn’t maximize correctly):




Other internal adjustments have been made, all JSON files have been updated and improved to work with the new GMS 2 functions. The way the Utiki saves the temporary project in the cache has also been slightly modified, and the name of the temporary project now has a code and an "_" in the name.
Thanks!


New Demo is now available.
 

FoxyOfJungle

Kazan Games
UTIKI DEVLOG #5 [ v0.1.0.0 ]


* Visual:


A powerful system of dialog boxes has been added that will be used for messages like "If you click here everything will be deleted", preventing the user from clicking where he shouldn't. Besides that every program needs this :D








As you can see, two NEW THEMES have been added: White and a new Dark!! In the future there will have more, for all kinds of tastes :)




The FPS went from 1800 to 500 because of the openned window, but that doesn't affect performance, it's running smoothly.


* Core:

The scripts for drawing the menu buttons and the project creation window have been improved dramatically.
Fixed a bug where it was not possible to delete the first layer.


New Demo is now available.
 
Last edited:

Joh

Member
This is all around super impressive! Looks great.
How are you keeping such performance?! Ui/text heavy interface games/programs rapidly destroy GM frame rate.
are you using existing frameworks or is it all custom made?
Seems like this project could be quite handy! best of lucks.
 

FoxyOfJungle

Kazan Games
This is all around super impressive! Looks great.
How are you keeping such performance?! Ui/text heavy interface games/programs rapidly destroy GM frame rate.
are you using existing frameworks or is it all custom made?
Seems like this project could be quite handy! best of lucks.
Hello! My intention is that everything is as fast as possible, both IDE and generated code, I'm trying to get as much as possible that GMS 2 offers. I'm using some shaders to save CPU work, so that makes it a lot faster. In the end, there are only 3 surfaces in the entire program: 1 full screen (I don't use the application surface), 1 from the workplace camera viewing window, 1 from the workplace area. Everything was done absolutely from scratch, if you are curious, I have already posted status updates on my profile since the beginning when it only had "green areas" lol. Thank you very much! 😁

I restored the website and you can try it now :)
 
Last edited:

Japster

Member
This looks great @FoxyOfJungle , but it's daunting trying the demo with no object, examples etc - I was a bit lost as regards what to do to even quickly try something! - could you perhaps bundle an example of some of the UI stuff you've made using it at all please mate? - at the moment I haven't a clue where to start playing, without an example project to show me a bit more about it? :)

I do like the glass / semi-transparent bits to the initial window though, cleanly done!

Cheers!
 

FoxyOfJungle

Kazan Games
This looks great @FoxyOfJungle , but it's daunting trying the demo with no object, examples etc - I was a bit lost as regards what to do to even quickly try something! - could you perhaps bundle an example of some of the UI stuff you've made using it at all please mate? - at the moment I haven't a clue where to start playing, without an example project to show me a bit more about it? :)

I do like the glass / semi-transparent bits to the initial window though, cleanly done!

Cheers!
Thank you!
Well, technically there is nothing to do but visualize what the program will look like in the future, it is still in development, so there is no way to do many things yet... I will upload a new demo for you to test. :)
I am not doing it actively, just sometimes due to lack of time.

 
Last edited:
Top