Adding flow graph UI with litegraphJS

After a formal discussion on litegraph.js, with @Silver-Streak @HarsimranVirk @arthuro555 and others, all of us are pretty pumped to work on implementing the library. @4ian, we would love to know your opinion on this. @rishabhabhani had a decent proof concept to approach it as discussed over here Events Editor Revamp. Moreover @Silver-Streak pretty much-explained litegraph’s use in a nutshell, " from a conceptual level, I could see Litegraph being an alternate way to view an event and sub events. It could drive people to reuse conditions way less and have cleaner code, and I think it’d be easy to represent that since the event sheet really is a general flow. Now, applying it as a completely alternative to event sheets would be hard."

Also we noticed that you had starred litegraph.js @4ian, so we kinda already know your thoughts on this :wink:.

2 Likes

To expand on my info above:

From an “might be easy to implement” perspective, I could see letting someone double-click on a top level event (or group) in the event sheet, and it showing just that event and its subevents in a graph/flowchart. If it is done as a vertical flow, rather than horizontal, it will accurately represent the order of operations for the events, too.

In a perfect world, we’d be able to switch from the event sheet’s current view to one that is flow chart based. Either each top level event/group would have it’s own graph, or each event/group could be numbered to show order of operations. Obviously I can imagine that’d be much more difficult than just having a per event graph/flow.

1 Like

It’s a weird mix between nodes and events list system. An node system isn’t thinked for fit ours events.
Maybe each node could be an instruction (condition or action) but even that require an new proof of concept.

Instead of think to a weird system of event maybe it’s better to look for a blueprint system like on Unreal Engine, but again here this require a solid proof of concept based on the instructions of GDevelop.
What could be the inputs and the outputs of the action “Push an object with a force” when an user push the Z key ?

Also the question is why you think this system of graph is needed ?
The eventlist is too hard to read? Why ? You use the groups and the sub-events, the external events ?

2 Likes

I do think in some cases, the Event List can be hard for some users to wrap their head around. Regularly on the discord (and here in the forums) people sometimes still have issues sometimes understanding the difference between an event, condition, and action.

As mentioned above, in a perfect world, the flowchart/graph view would be an entire alternative to the event sheet, to avoid confusing the two. I only suggested the option of making it an alternative way of viewing a single event/subevents because I think that’d be easier to map 1:1.

I agree though, it’d be better to set it up as a full graph view.

I think the biggest issue people have even with “Visual Scripting” in other engines, such as Godot, Unreal Blueprints, or even Bolt for Unity, is that the nodes are usually just representing an actual function/code, rather than abstracting it into something the user can understand.

GDevelop’s event sheet does this abstraction. Instead of a “Vector3” node that says “Obj Test X 24 Y 150” with a line, GDevelop states plainly “Move test to 24 x 150 y”.

Putting it into a Node/Graph format (With something indicating sequence) could help a lot of users start to understand the flow of evens more simply, while still keeping the benefits of GDevelop’s event language.

3 Likes