The Spaghetti Machine: A generic graph editor

Hi!

I am currently working on a graph editor which allows editing graphs inside the Unity Editor. It is inspired by the (amazing) Strumpy Shader Editor, but will allow editing of pretty much any type of graph which comes to the user's mind, from flow diagrams over state machines up to your significant other's complicated family structure.

What you can basically do is connecting panels with colored cables - they look a bit like spaghetti, hence the name "Spaghetti Machine".

Here some examples for what you can do with the Spaghetti Machine (actually made with the editor, no photoshopping) :

Dialog structures:


Logical graphs:


Adventure maps:


Those are just some examples. Other examples include:

• State machines
• Electical circuits
• Flow diagrams
• Neural networks
• Non-linear campaign structures
• "Visual scripting"
• Object hierarchies
• Space maps (à la X3)
• Menu systems
• Tech trees
• etc...

The available panels are defines in simple XMLs. For the dialog structure, we have for example an XML like this:

Code (csharp):

1.  
2. <paneltypes>
3.     <paneltype title = "Start" width = "80">
4.         <slot label = "Out" type = "output" color = "white" multiple = "true" />       
5.     </paneltype>
6.     <paneltype title = "End" width = "80">
7.         <slot label = "In" type = "input" color = "white"  multiple = "true"/>     
8.     </paneltype>
9.     <paneltype title = "Character Dialog">
10.         <slot label = "In" type = "input" color = "white" multiple = "true" />
11.         <slot label = "Character" type = "string" />
12.         <slot label = "When done" type = "output" color = "white" multiple = "true" />         
13.         <slot label = "Dialog" type = "output" color = "blue" multiple = "false" />
14.     </paneltype>
15.     <paneltype title = "Dialog" watermark = "WatermarkTalk">
16.         <slot label = "In" type = "input" color = "blue" multiple = "true" />
17.         <slot label = "Text" type = "text" default = "Lorem ipsum dolor sit amet..." />        
18.         <slot label = "Answer1" type = "text" default = "Yes..." />    
19.         <slot label = "1>>>" type = "output" color = "blue"  multiple = "false" /> 
20.         <slot type = "more" />         
21.         <slot label = "Answer2" type = "text" default = "No..." />     
22.         <slot label = "2>>>" type = "output" color = "blue"  multiple = "false" /> 
23.         <slot type = "more" />         
24.         <slot label = "Answer3" type = "text" default = "Maybe..." />      
25.         <slot label = "3>>>" type = "output" color = "blue"  multiple = "false" />     
26.     </paneltype>       
27.     <paneltype title = "Effect">
28.         <slot label = "In" type = "input" color = "blue"  multiple = "true"/>
29.         <slot label = "Out" type = "output" color = "blue" multiple = "true" />
30.         <slot label = "Effect" type = "output" color = "white" multiple = "true" />    
31.     </paneltype>   
32.     <paneltype title = "End Dialog" width = "150">
33.         <slot label = "In" type = "input" color = "blue"  multiple = "true"/>      
34.     </paneltype>       
35. </paneltypes>
36.  

The edited graph can then be saved as XML and loaded into any application.

The Spaghetti Machine doesn't actually do anything with the structure, it only provides simple access to panels and connections. What you do with it will depend on your application. (Maybe I'll provide additional methods for some standard cases, for example state machines or dialogs.)

 

Its a nice idea, in fact probably fun to use for game design also.

 

Nice, I'm sure having a generic library available will allow a lot of people to make nice node based editors who were reluctant to before because of the headache of implementing a node GUI system. It's building blocks like this that make Unity awesome.

 

Cool. Looks rather complex to me.

 

Sweet!

 

It looks like a great tool to use. Once a node graph is made, can conventional scripts be made to traverse the nodes, so that during runtime it can be referenced, rather than as a tool to compile stuff prior to runtime? Not sure if that makes sense.

And, in what other ways will it be "inspired by the (amazing) Strumpy Shader Editor". hint hint

 

That's exactly how it works. There are simple classes to traverse a diagram:

• Diagram (the graph), contains methods like Load( strPath ), GetPanels(), FindPanel( strName ) etc.
• Panel (a node), with methods like GetSlots(), FindSlot( strlabel ) etc.
• Slot (element of a panel: a plug, data element, or a combination of both), contains methods like GetLinkedSlots() etc.

I'm also thinking of adding some "generic" functionality stuff to the whole mechanism, mainly handling of an "active" flag for each node, and sending signals (bools, floats or vectors) through the connections.
,

Mainly the way how the interface works: Wiring with the left mouse button, breaking wires with the right one, the minimap at the center of the background etc. It's not lazyness, but the knowlege that when designing an interface, it's generally a good idea to stay close to the interface of well-known similar tools. This makes things easier for users who know the other tool.

 

thanks for the reply Zogg - that makes it seem like very interesting things could be done with it if the graph is easily accessible during runtime, definitely like a dialog engine, but open-ended for any other applications that could have similar needs or needs not yet thought of.

Sorry my "hint hint" did not hint clearly - seeing other node graph systems coming out from other authors with similar UI design is fine when the functionality is what is very different - but the big difference with SSE is of course the way in which he released it to the public!

 

Is there a rough time estimate for a release? And, what are your plans for licensing? Is this something to sell on the asset store, license separately directly from you, or is it going to be free? Hint: I'd be willing to pay for this.

 

Very nice... this could be interesting to be used with my SCXML implementation...

 

We will release the editor on the Asset Store. The first version will probably be released during August.

 

Here some examples of what kind of graphs could be created with the Spaghetti Machine:



(No actual editor graphs, just some Cacoo diagrams to illustrate the possibilities.)

 

Love it, want it, where do I insert cash.

 

Another example on the flexibility of the Spaghetti Machine, now made with the editor:



(Coats of arms stolen from http://www.lagardedenuit.com/wiki/.)

 

Zogg, that looks fantastic. When will it be available?

 

Probably end of August, but I am not promising anything.

 

What's the status I this?

 

I am also interested in this. Exactly what I need for one of my projects.

Is it possible to have a Panel which contains a Graph?

 

We've almost finished the first version, up to the manual and some bugfixes. The biggest problem is the fact that the editor window content is deleted when the user hits the Play button - see this discussion.

We rescheduled the release to end of september, due to another projet (which actually uses the spaghetti machine extensively, by the way). I'm not sure about the price (does 99US$ seem reasobable to you?). We also plan to release a free demo version with some limitations (e.g. graphs cannot be saved unless the number of panels is prime).

Currently not (maybe we'll include this feature in a future version). However, you can handle multiple graphs at runtime - so you can put the name of a sub-graph in a panel and load this subgraph when the panel is activated.

 

What is the license? Will it be per-developer? per-project? Buy it and use it in any project you work on?

I guess the final answer on the cost will depend somewhat on the license but at first blush $99 seems reasonable to me. It does place it outside the 'impulse purchase' range, but I'm not sure that putting it that low (probably $10-$15) would really get you the 6-10x increase in sales you'd need to cover it.

 

$99 is reasonable.

 

I'm bursting here!

 

Sorry for the delai. The release version is almost ready (up to some bugs) and could technically be released within, say, one or two weeks - but we are currently in the process of creating a new company, which may take some more time (particularly since we are in France). So I can't really make promises concerning the release date.

 

wakka wakka?

 

Very cool! Any news ?

 

very interesting product might be interested in purchasing if it was available.

 

We had a first submission tuesday, the guys at Unity gave us a very positive feedback and made some suggestions on how to improve the examples. I'm currently on it. We will resubmit the Spaghetti Machine at the beginning of next week.

 

I was following this thread and I have to say that it sounds interesting.
Glad you managed to the final stage.
Looking forward to give it a spin. Will it be possible to try a demo?
Thanks.

 

Yes, we will release a free demo version at the same time as the Asset Store version. The demo version has some limitations (graphs with more than 17 nodes can't be saved, slightly obstructive "Demo" sticker) but is otherwise identical with the full version. Both version include six useful examples, from "Hello World" up to a fully functional dialogue tree / visual scripting system.

Also, we have an extensive manual (60 pages) with lots of examples which is included into the package but can as well be downloaded for free.

 

If you need beta testeurs
Je suis dispo !

 

Excellent! I am looking forward to this.

 

Can this be used on the iOS? Can I use UnityScript instead of C#?

 

Good news : The Spaghetti Machine is out!

• On the Asset Store: <link>
• Free demo version: <linkylink>
• The manual : <link> (also included in the package and the free demo)

 

We didn't test the latest version on iOS, but it should. You might want to try the free demo version to be sure, though.

Yes, you can.

 

What does it do that Visio already doesn't do for me?

This is more for in-game graphs?

 

Love the video very humorous...

My question is the same,
Can i display these graphs in-game and present them to the player for them to edit/create/save graphs.

 

The graphs can't be displayed in-game, but easily imported and used by game scripts. The runtime-part is an important part of the Spaghetti Machine, it includes useful mechanisms such as

• Easy access to graph, panels, slots and links
• Very useful panel activation mechanism
• Three variants of how "active" panels are handled (state machine, multi-state machine, trigger machine)
• Sending messages over links
• Applying potentials to links (for example for electric or logic circuits)
• Attaching custom variables (numbers, strings... - whatever is derived from object) to panels

When you watch the video, you may notice that the whole script for the menu system, including reading and managing the graph and displaying the menus, consists of 103 lines, commentaries included. I invite you to try this with Visio.

 

Thank You for the quick reply,

Indeed it looks useful for many situations except were graphs would be used in educational simulations like teaching logic gates, Or application that might display flow charts that users can manipulate themselves.

 

mhmmmmm, digging this. Theres no way these could be displayed/manipulated at runtime?

 

Bought this. Just what I was looking for.

 

Yes, having an ingame graph editor could be useful in a handful of cases.

But then again, having the Spaghetti Machine as editor tool can be useful in all-but-a-handful of cases.



It's somewhat like, say, the Unity transform gizmo: In some rare cases you might want to integrate it into your game - but its principal interest is the visual manipulation of data within the editor.

 

I like your diagram
and agree,

but some of us want to use unity to develop other applications besides games.

 

I created a new thread for the Spaghetti Machine in the Asset Store forum: -----> <click here>

 

Hey zogg, i'm wondering where did you find information about creating a graph plugin for unity or if your develop all the code from zero for reach it? , i don't know if u can share info about it or web page where did u find info about it , because i need to develop something similar for solve a problem in an actual project.

thanks

 

Hi, if I was to buy this in order to build a tool would I be able to re-distribute it? It's either I work on my own editor for the tool I'm working on or use this and save my self some time I've been learning how to get it done from the strumpy source code but this would def shave a month of my work.

 

This package looks great, but...

I want to use it to set up a dialog system, I would build quests with this for my RPG. The problem is that I want users to also be able to make their own quests. So I want the file format of the graph to be something human editable, like xml.

According to your docs, you save the graphs in this obscure .bytes binary format. The fact that you don't provide the source makes it impossible to do this myself.

I would have bought this package if it either supported a decent xml format for graphs or if it included source.

 

AFAIK the project is pretty much dead...