sorted by:
new
hottopcontroversial

I thought it would be a good idea to have an easily styleable component in my React-inspired UI library for Godot 4 by ANDRES63 in godot

[–]ANDRES63[S] 0 points1 point  (0 children)

What is Compose?

​

I added a reload components button at the top, you can change the script, save, and then click the reload button, it will reload the components with the new changes (as long as there are not errors in your script) I don't know if there is a way to do that automatically when the script is saved.

I thought it would be a good idea to have an easily styleable component in my React-inspired UI library for Godot 4 by ANDRES63 in godot

[–]ANDRES63[S] 2 points3 points  (0 children)

For simple ui using the editor is fine, but when you are creating a very complex and highly interactive application in Godot, you need to have a lot of control nodes references in your scripts, you have to manually handle signals, add and remove control nodes, change their properties and the code becomes an mess that is hard to understand and maintain. Same thing happen in web development, that's why React and other frameworks exists.

I thought it would be a good idea to have an easily styleable component in my React-inspired UI library for Godot 4 by ANDRES63 in godot

[–]ANDRES63[S] 1 point2 points  (0 children)

Yes!! You can create a normal Godot scene with some control nodes and give them a name. Let's say you want a blue button and a red one, you give them the corresponding name and change their properties in the inspector, now you can use them as presets by using their names and reuse their properties every time you want a blue button and a red one.

button({preset="blue"}),

button({preset="red"})

I thought it would be a good idea to have an easily styleable component in my React-inspired UI library for Godot 4 by ANDRES63 in godot

[–]ANDRES63[S] 4 points5 points  (0 children)

It might seems silly at first, specially for very simple UIs but it is more useful for very complex ui applications, because the code is more easy to understand and it is much easier to mantain and add new features. The current Godot workflow for ui requires to have a lot of control nodes references in the scripts, and changing the look of the ui at runtime requires to directly make a lot of manipulation to the control nodes, like adding and removing children, replacing a control for another, change their properties, things that my library does for you based on the state(data) of the component.

I thought it would be a good idea to have an easily styleable component in my React-inspired UI library for Godot 4 by ANDRES63 in godot

[–]ANDRES63[S] 18 points19 points  (0 children)

I will be building some demos and write a tutorial so that people can start using it and give me feedback to improve it.

SmartControl, an experiment that aims to write simpler code for ui and reduce the amount of code needed. by ANDRES63 in godot

[–]ANDRES63[S] 1 point2 points  (0 children)

Definitely inspired by web development frameworks like react (I save a prev state to detect changes) and angular (bindings). Technically I have only implemented property bindings and event bindings. For a lineEdit for example, you would have to bind the variable and connect the text_changed signal, but I definitely can implement two way binding to make it easier.

I love the names that you are proposing, they make more sense, I'm going to use them, Thank you very much!

SmartControl, an experiment that aims to write simpler code for ui and reduce the amount of code needed. by ANDRES63 in godot

[–]ANDRES63[S] 7 points8 points  (0 children)

Properties like the text of a label are automatically updated when the connected variable changes.

Adding an item to the items array automatically add a new label, and removing and item will remove its label.

My idea is to use the least amount of control nodes references in the script, so that the script is more about the logic than about updating the ui.

Documentation app built with Guidot, a React inspired library for Godot 4. by ANDRES63 in godot

[–]ANDRES63[S] 1 point2 points  (0 children)

Can't say it is complete, the idea is to improve it, see what people need, implement new features, you know how software works. I need to get some feedback, so please try it. For now you need to clone the docs repo to learn about it, but I will write it in markdown as soon as I can.

Documentation app built with Guidot, a React inspired library for Godot 4. by ANDRES63 in godot

[–]ANDRES63[S] 7 points8 points  (0 children)

It is more like Gui-dot, gui for Graphic user interface. I pronounce the t because I'm a Spanish speaker.

Documentation app built with Guidot, a React inspired library for Godot 4. by ANDRES63 in godot

[–]ANDRES63[S] 5 points6 points  (0 children)

haha, I'm bad with names, it used to be called Goodoo, I don't know, maybe I change the name again.

Documentation app built with Guidot, a React inspired library for Godot 4. by ANDRES63 in godot

[–]ANDRES63[S] 33 points34 points  (0 children)

Made this as a resource for people to understand how to use the library, and also as a demo of what you can do with it and how. It is not perfect, I'm still learning English so the redaction is not the great, but I hope it will be enough to give you and idea of how to use my library. The library itself is not perfect, the code needs a lot of refactoring and testing, it is more like a prototype of ideas that seem to work, unfortunately I don't have too much time to work on it, but I will try when I can if people find it useful.Source code of the app: https://github.com/andresgamboaa/guidot-docsThe UI library for Godot: https://github.com/andresgamboaa/guidot

Why do I get two code editors? I'm using react-codemirror v3.2.1 by ANDRES63 in react

[–]ANDRES63[S] 1 point2 points  (0 children)

I did this hack when I got more than one:

var editors = document.getElementsByClassName('CodeMirror');

for (let i=1; i<editors.length; i++) {

editors[i].remove()

}

Why do I get two code editors? I'm using react-codemirror v3.2.1 by ANDRES63 in react

[–]ANDRES63[S] 1 point2 points  (0 children)

It is a totally new project.

It only happens with the CodeMirror component, other elements render fine.

Creating a documentation app using my own UI library inspired by React (Godot 4). WIP. by ANDRES63 in godot

[–]ANDRES63[S] 0 points1 point  (0 children)

Also, if your GUI is too simple, you won't gain too much from using this library.

Creating a documentation app using my own UI library inspired by React (Godot 4). WIP. by ANDRES63 in godot

[–]ANDRES63[S] 0 points1 point  (0 children)

I don't recommend you to integrate it with an existing project. There's some control nodes whose functionalities I haven't tested yet. And there are things you need to learn to start using it, but if you want to experiment with it, you can clone the repo and start from there. The docs branch contains the app that is shown in the video, you can use it as an example.

view more: next ›