FoxyOfJungle
Kazan Games
PRESENTATION:
Hello, welcome to the Utiki Editor "work in progress" devlog topic.
"Utiki Editor" is a software that aims to streamline the process of creating games, using a Drag and Drop interface. This is a WYSIWYG (What You See Is What You Get).
CURRENT STATUS:
Currently (04/10/2022) I am redoing the project from scratch and much better, so it takes time.
It will actually be more than a UI editor, currently, but an integrated environment where it has several cool features, such as: Particle Editor, Post-Processing, Image Effects (including rendering sprites with animations), Sprite Font Maker, Sound Studio, 3D Model Viewer, State Machines and Rythm Game editor. (also, maybe a tileset editor).
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.
SOFTWARE 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:
(Screenshot before engine rewrite)
All "spoiler" info is old (from 2020), so you hope it's different now, but i'll use some things.
I count on your feedback to develop it together
Thank you so much for reading this far, have a great day!
Hello, welcome to the Utiki Editor "work in progress" devlog topic.
"Utiki Editor" is a software that aims to streamline the process of creating games, using a Drag and Drop interface. This is a WYSIWYG (What You See Is What You Get).
CURRENT STATUS:
- Hiatus. | Update: (March, 17, 2023).
- Version: Alpha. Not released.
- Demo: (not yet).
- Latest Post: Devlog #7.
Currently (04/10/2022) I am redoing the project from scratch and much better, so it takes time.
It will actually be more than a UI editor, currently, but an integrated environment where it has several cool features, such as: Particle Editor, Post-Processing, Image Effects (including rendering sprites with animations), Sprite Font Maker, Sound Studio, 3D Model Viewer, State Machines and Rythm Game editor. (also, maybe a tileset editor).
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.
SOFTWARE 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:
(Screenshot before engine rewrite)
All "spoiler" info is old (from 2020), so you hope it's different now, but i'll use some things.
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:
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.
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:
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
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
Thank you so much for reading this far, have a great day!
Last edited: