Greatly improving readability of Visual Scripting in Godot 3.2

[jasperbrooks79]

Describe the project you are working on:

I am working on a Tomb Raider project, with a new character, and I can only use Visual Scripting, as a beginner, and will use it to learn code, over time . . Also, an RTS-like game, StarCraft inspired . . .

Describe the problem or limitation you are having in your project:

When I make boxes in Visual Script, the arrows are all over the place, and it ends up looking like this . .

I want to make it look as much as possible, as normal writing, with the ' black ' lines going directly through, so it reads like a flow-chart, very easily read, in engine . .

Describe the feature / enhancement and how it helps to overcome the problem or limitation:

It would be a lot easier, if one could change the position, of the input, and output node, in the Visual Script boxes, like this . . .

Especially, if there was a little button in the corners, of each node, where you click it, and the input side switches from top-side-left-right . . Like this . . .

Also, if the other inputs, could somehow be moved around, a purely visual update, no changes to the code framework, behind it, it would make visual scripts look much nicer, and be much easier to read, for any team, in the world, also for me, who can't code YET, but need Visual Script to build my first games, and learn code, as I watch Godot, on youtube . . Ideally, one would be able to change the input anywhere, perhaps by giving everything a different color, like this, everything can be moved to one of four sides, of the nodes, just a visual thing, to make nicer flow-charts . .

Describe how your proposal will work, with code, pseudocode, mockups, and/or diagrams:

Well, it's not a big change, to the code, in Godot, more of an update to a few visual tweaks, on the boxes, in visual script . . But, a programmer needs to do it, and I think everyone using visual script, either for their games, or for learning Godot, will have a much easier time, if this was possible, but done well, by good programmers, Godot-experts . . .

If this enhancement will not be used often, can it be worked around with a few lines of script?:

As a beginner, I can't do this . . It would take a lot of work, for me, too much . . :(

Is there a reason why this should be core and not an add-on in the asset library?:

Every single person wanting to make Godot games could benefit from this, and Visual Script could become a nicer way, for people to get into Godot, so more people would like the engine, especially artist-minded people, but also new people, that want to learn coding through Visual Scripting, in the beginning . . Also, with nicer flow-charts, productivity might increase for bigger teams, where artists could make better ' visual ' coding, and in the end, mean more games . . Also, people wanting to learn Godot, but scared of code ( like me ), would have an easier way of learning node names, for later coding, if visual script was even MORE appealing, like it is now, really good . . This feature would just make the scripts 200 % more readable, and make Godot more appealing, to the world, to game makers, on all levels . . But, it has to be done well, my suggestion is pretty rough, a smart coder, or Godot-expert could probably make this nicer, so the charts read MUCH nicer, also for programmers . .

[jasperbrooks79]

Add : If this could be done well, the flow-chart in visual script would be so much easier to read, even programmers, and code-masters would find them more enjoyable, and that means more artists can contribute to games, and so make more games, and Godot will become the place, that has the best Visual Script environment, benefitting the engine . .

Anyway, it's just a visual thing, the nodes stay the same, what ' they do ', but it gets a lot easier, and more compact, to make nodes, like that . . If one could select a custom color, for each box, or so . . Anyway, it would just make the diagrams 200-300 % easier to read, if done well . .

[jasperbrooks79]

Here's sort of a proposal, for how it could be done . .

By changing the ' structure ' of the nodes, the visual script ' boxes ', so they have an ' outer ' layer, and ' middle ' layer, and a ' center ', the ' inputs ' and, ' outputs ' could be moved there, and if one could change the color of the boxes, in a setting manager, like make add boxes blue, or green, instead of red, scripts could be a lot easier, to read, also for coders, and artists could have more fun . . I think, everyone would win, and more people would get into Godot, enjoy it . .

I'm not very smart, and can't really make the idea as good, as it should be, but maybe some smart people at Godot could look at this, and find a nice system, for using it, maybe one could use standard boxes, anyway this would be nice, since Visual Scripts are very confusing right now, because they quickly become unreadable, having this, everyone would benefit, also programmers, that have to read artists visual scripts, and so on . .

Maybe the black arrows should be in the ' middle ' layer, and the inputs and outputs ( for bools, strings, vars ) should be in the outer layer . . With this, visual scripts would become 300 % more readable, also for coders, experts . .

Thanks, hope this gets in Godot, really love it, Visual Scripting, as an artist, code-phobic beginner, wanting to learn slowly, through Visual scripting, make games, master Godot <3 . . .

This is a rough suggestion, I hope some talented people at Godot could sort of work a bit with it, find the ' best ' solution, perhaps by giving each bool, var input a different color, to the ' dots ' were easily seen, or identified, as well . . It's just a suggestion, that needs some experts to make it shine, work well . . Thanks, happy Godoting <3 :D

Here's what charts could look like, if one could change the ' black ' arrows position, a bit . . .

I would like this feature, as it would help me a lot, but also every team, even the coders, programming-experts, to work with artists, beginners . .

You basically only need to move the ' core ' inputs black arrows, to sit in the precise corners, and enable a toggle, or using right click, to move them . . So they take from top, or from side, either way <3

[jasperbrooks79]

Here's a first, quick suggestion, for how the boxes could look . .

So, if a box takes a bool, it has a unique ' dot ', for the arrow to connect, that can be moved around the node, just a visual change, no change to what the node does, or hard code . .

The visual scripts would become 300 % easier to read, also for programmers . . .

With this feature, I and other artists could work 200 - 250 % more efficiently, and programmers would have easier time reading scripts, and work with artists, in all projects . . It's because I have great difficulty making visual scripts look nice, and I need this myself, as a beginner . . But, everone using Godot would benefit, across the planet, from now on, as well . . Please, consider it, I need help, as a beginner . . . Thanks, <3 :) I am scared of coding, and I am learning Godot through visual scripting, in time I will learn code, to do the advanced stuff, but Visual script is SO nice for beginners, and I learn the names of nodes, that I will later use in code, with this feature, I would have a 200 % better time, learning Godot, as would all noobs, or code-phobes . .

For all us struggling in code hell, we need the help, Thanks . . :(( <3

This is my best suggestion, maybe someone at Godot can look it over, and improve it . . .

[jasperbrooks79]

If the grid was made a bit smaller, the boxes could move the ' inputs ' on the grid, and all the lines would be vertical, for all boxes, in Visual script, like this . . .

ps. Sorry for the many posts, I have some mental issues, OCD, PTSD . . :(( <3

No more messy lines, programmers that work with artists would also enjoy this, work better . . .

If one could also resize the boxes, as one needed, it would really help, to snap to the grid . . Maybe some people at Godot could look at this, and make the ' ultimate ' version of this stuff, thanks . .

It would be a great help, to all people new to Godot, if this was added, and ran well . .

[jasperbrooks79]

Maybe the boxes ( visual script nodes ) could look like this, where one could click a button, to edit how they ' look ', on each box . .

So, they follow the grid ( the grid could be made smaller ), and still was readable, and one could resize the boxes, as needed . . Anyway, I would like that, it would really help, at least for me, maybe other artists, noobs, beginners, it's just a suggestion, an idea . . .

Anybody could read the scripts, much easier then, also coders, advanced users, everybody would benefit . .

The trick will be, finding a way of showing which things are connected, to the inputs inside, in some way . . .

So, there needs to be a way to show which ' internal ' variables have gotten a particular input, maybe a color scheme, or so . . . Maybe someone with experience could figure this out, I'm not sure . . Maybe by making the DOT in front of a vc3, or bool grow larger, when it is ' active ', connected . . .

Something like this, but nicer, better . .

Maybe a Godot master could make this, I'm hoping . . . .

Anyway, I would really like this feature, to make Visual scripting easier, more useful . . <3

Maybe someone at Godot can make sense of this, and make it really good, I'm just a beginner, a newbie . . :((( <3 Maybe's there's a visual script team, that are experts . .

A suggestion, for how node-boxes could look, please improve it, us code-noobs are struggling, daily . . .

Friendly for nerds, programmers, and easy for artists, non-coders . .

For many nodes, you wouldn't have to move them very much, if the nodes were arranged nicely, to begin with . . With this help, I could make much better games, faster . . . But, it needs some pros, to make it useful, really good, experienced coders, and Godot experts . .

[aaronfranke]

So what you're basically saying is that you want the ability to move input and output "dots" and arrows to arbitrary places around the edge of each VisualScript "box"?

[jasperbrooks79]

Yes, that way the scripts can be a lot easier to read, like in this picture . .

That way, all the scripts would look like this . . .

It is very nerdy, but also easy to read, for artists . . . Maybe one could right click the boxes, to go into a small ' edit mode ', where one drag or drop the arrows and, inputs . . :)

Right now, my scripts look like this, so I can ' read ' them top-down . . But, the arrows are a problem, otherwise the scripts get very big, and it is impossible to read them, either way . .

Ideally, the boxes should also be the size, of the grid, and the text, inside them, should also follow the grid, at least the outputs, inputs . . :)

So, it feels more like an ordered architect drawing, a nice schematic, or flow . .

Beautiful, but also easy to read, and understand . . This way, it could appeal both to artists, and coders . . But, it's an idea, and people that really understand Visual scripting could probably make it nicer, feel like an architect drawing, in Godot . . :)

[jasperbrooks79]

Like, an architect sketch . .

Ordered, simple, informational and, neat . . . .

Maybe some experts at Godot could look at it, make it even better, nicer . .

The best solution, is if the charts could look like beautiful architect drawings, to appeal both to artists, and coders, visually impressive, nice . . .

This way it would appeal to both artists, and also logical thinkers . . Attractive for artists, and easy for coders to read, improve . .

[Jummit]

I think having the flow in visual scripts on both axis would make them harder to read, but I haven't tried it, so I don't really know for sure.

[jasperbrooks79]

The problem right now is, the main lines look like this, and it gets hard to read, because it's not natural for eyes to read a chart, like this . .

It just gets confusing, especially with big scripts, it's like it's ' not logical ', that it looks like this . .

To make it look more like a chart, more ' organized ', into logic, this would be nicer, I use it all the time, and one of the reasons they are so hard to read, especially later, is that the lines flow in a ' confusing ' way, compared to logic . . This would be more readable, to analytical minds, and also be beautiful, to artists, non - coders . . .

Ideally, one wants the ' main ' line to be logical, and be easily identifiable, right now it sort of ' disappears ', in all the lines . . It would just be easier to read, if it was more ' linear ', one would always know where to look, when looking at a particular box, or node, if the lines could be straight, ' run ' through . . For me, it would make them more like a schematic, and make reading scripts almost twice as easy, and natural . .

Keeping track of ' what goes where ' is a lot harder, when scripts look like this . . .

Right now, those ' going down steps ' is the ' correct way ' to make the boxes, but from a logical standpoint, making sense of all those lines, is just tough, problematic . .

It's just difficult to read, ' understand ', and getting an overview of a big script is a nightmare, because all the boxes look the same, as well . . .

[jasperbrooks79]

Here's how I think the boxes should look like, roughly . . The ' bendy ' lines are ' inside ' the nodes, and the charts are more ' linear ', but still visually appealing, beautiful . .

I should still be appealing to artists, by making the whole things look like a nice architect chart . .

It would be both logically, and aesthetically pleasing, in the end . .

The point is, with the graphics, like a stylish architect drawing, and more logical flow it would appeal to everybody, also programmers . . So, everyone can code, at least make simple charts, even non-coders . .

[Gianclgar]

I would suggest taking a look at Cycling74's Max programming environment and visual programming. And also it "original" open-source origins (Pure Data)

It's a different concept, as it's oriented to real-time audiovisual programming. But they managed to make visual programming in a very intuitive way, and also has an "abstraction" system that expands a lot its possibilities. Also the programming system itself is highly customisable. For more visual people like me it meant a lot and got me into programming from a totally different perspective. So sad Max it's paid and closed-source.

I think it would be awesome if Godot VisualScript becomes more "Max-ish" and would be really happy to contribute to that.

I'm attaching a few screenshots for visual reference. The first ones from Max help files (equivalent to control-click anything in GDScript) and the rest from programs I made.

[Gianclgar]

I think the two key aspects for improving readability are the "patchcord" system (where you can define the path of the connections, as they are objects on its own, and even have an "automatic routing" option), and the order of execution based on top-to-bottom.

I've been doing some research and reverse engineering and found this:

-Boxes are just compiled chunks of code, mostly made in C or C++
-Max itself is written in C++ using JUCE framework

Then I started looking for the savefiles (patches) it self and found that tey're just JSON files with the extension changed to .maxpat

While VisualScript files look like this (Binary hex?)

Then just took me a few hours (maybe it would have been minutes if I remembered the most basic code-programming stuff) to make a very basic godot program that opens a .maxpat file and replicate some aspects of its elements:

I'm not saying Godot VS should be like Max, as they are different approaches for different "problems" but it could be use a nice reference for improving readability and it make Godot EVEN MORE accessible.

This could also be useful for #593 and godotengine/godot-visual-script#17

[fire]

You can decode visual script files by saving them as tres. @Gianclgar

Edited: Nevermind. I forgot about this.

Edited: This is still a bug.

[YuriSizov]

Closing this proposal as we have officially discontinued the VisualScript module. It may return in future as an engine extension, then all the feedback can be reevaluated by maintainers of that extension.

Thanks for your suggestion nonetheless!