The Spaghetti Machine - A generic graph editor [RELEASED v1.11]

​

The Spaghetti Machine is a custom editor for Unity. It allows editing graphs (for example state machines, dialog trees, flow diagrams or tech trees), simply by connecting panels with curves. It includes methods for importing and managing these graphs in your Unity application.

The runtime part includes useful mechanisms to import and manage graphs, such as :

​

 

lol, i just wanted to say , that Ad Banner you have up top , so great,

 

Absolutely fantastic presentation!

Customizable backgrounds for nodes is simple yet very effective.

I would like to see this as an editor component inside Unity and work with Unity's strength of iterative development.

Very nice Zogg

-Steve

 

Currently collecting money just because I love the video
And the manual is very well-written
And the interface design is very neat and beautiful
And the fork cursor when connecting a node in the editor is just plain brilliant

 

+1

I am not interested, just played and enjoyed the presentation.
If the editor is as good as the banner design and the video... well, must have.

 

Do the code that is generated is csharp or jscript?

Looks great btw.

 

Actually, the Spaghetti Machine doesn't generate code - it saves the graph as a file (with .bytes extension but actually it's xml). You can then load the file and access all information in the graph from your scripts - no matterh whether they are written in C# or Jscript - using methods in SpaghettiMachine.dll.

The examples are written in Jscript.

 

Hmmm. Mobile support?

EDIT: Just checked it on my Android. It doesn't have Mobile support.
Other than that, an extremely solid tool. Please work on mobile support though.

 

Super-wonderful presentation And it looks like an awesome tool.

 

I'll see if we can include mobile support in the next update. Shouldn't be a problem, I think.

 

FYI, I'm currently working on an update, including:

• Mobile support (as requested by buffonomics), maybe simply by allowing importing a graph from a string,
• The "Spaghetti Spy" which allows displaying a graph during runtime in the editor, with useful information about active panels, custom variables, potentials etc. This makes debugging much easier as you can actually see what is happening.

​

I'm not promising anything, but if everything goes smooth, the update can be submitted at the beginning of next week.

 

Zogg,

You are awesome. I loved your video as much as I loved the concept. Great job!

I'd like to add one concept to your madness. Instead of saving a "graph" you should save a "plate." You can have multiple plates of spaghetti in your project, each serving its own special purpose. Also in keeping with your marvelous theme, the debug panel should not be a spaghetti "spy", it should be a spaghetti "waiter" or perhaps a "cook," maybe a spaghetti "consumer."

 

@zencoder: I actually considered calling a graph a "plate". I liked the idea (a lot), but eventually decided against it for the sake of user-friendlyness: When you speak of "graph", most users will know that you're actually speaking of the "stuff connected with lines". But when you speak of a "plate", they may wonder what you are speaking of. Thus, "graph" is less fancy but clearer.

[Edit:]When I wrote this post, I intended to adopt your second idea and call the edit window "Cook" and debug window "Waiter". But thinking about it, the "waiter" metaphor is somewhat misleading: It gives the impression that this tool is necessary to get the spaghetti from the cook to the user, whereas it's merely an optional debugging tool. Also, other metaphors like "consumer" and "critic" don't really work (and neither does the initial "spy"). So I'll stick with "editor" and "debugger" - again, sacrificing fanciness for clarity.

I will, however, keep the "kitchen table" and "tablecloth" backgrounds, as subtle visual metaphors, just as the spaghetti fork cursor used to connect panels.

Anyway, thank you for your input!

 

What did you use to compile the spaghetti machine dll? Does the spaghetti machine work on windows and mac?

I think you should start a mini series on you tube about how a self aware spaghetti machine starts developing itself and eventually plots for world domination. It begins by simplifying or complicating human laws as it sees fit and lobbying to elect its own candidates funded by the spaghetti machine political action committee.

Is the "connecting nodes since 1892" a reference to William S. Burroughs adding and listing machine ... the Burroughs Registering Accountant in 1892 for $475?

 

I compiled it with MonoDevelop. (All you have to do is to create a new solution of type "library", then add the files you want to compile as references, and compile.)

It definitely works on Windows ^^. It should work on Mac, too, but I didn't have the occasion to test the latest versions on a Mac (for lack of, well, a Mac). To be sure, I suggest you try the free demo on Mac - if it works, the full version will do as well.

I would love to say that, say, one of my ancestors was actually Burroughs assistant - but actually, the number 1892 was chosen arbitrarily. What a coincidence!

 

We just set up a GetSatisfaction account. Feel free to give any feedback at https://getsatisfaction.com/mitm

Oh, and we submitted version 1.1 this afternoon.

 

Version 1.1 is out!​

Now with the debug window, allowing to observe active panels, potentials and custom variables at runtime:

 

As soon as there is mobile then I will get it.

 

In version 1.1, we added methods SpaghettiMachine.LoadFromResources and SpaghettiMachine.LoadFromString which should theoretically make it possible to run the Spaghetti Machine on mobile devices. However, we hadn't yet the possibility to test it. You can download and test the free demo - if it works on mobile devices, the full version will work as well.

(Actually, SpaghettiMachine.LoadFromResources was already in v1.0, I only forgot to put it in the manual. )

 

I love the ad and the video was just awesome cute

But, I find creating menus and state machine's and such in Unity pretty straight forward... I'm not sure how this makes it easier, other than that it's more fun to connect noodles with plates (until you get too tangled up)...

I guess this can be used to create a concept map app out of the box via Unity ...?

 

Of course, you don't need the Spaghetti Machine to create menus, state machines etc. But in many cases, it's a good idea to use the Spaghetti Machine, for various reasons :


Graphs give a better overview than code.

​

This especially holds for more complex cases - when your state machine code fits onto one screen, you don't really need a visualization. But if you are, for example, implementing a complex AI state machine or a dialogue system, a graph is much more clearer than code - or an XML file, or links between game objects, for that matter.

Data are easier and cheaper to modify than code.

​

The later we are in the project, the more time consuming (=expensive), difficult and dangerous any code modification becomes. A data-driven approach like the Spaghetti Machine requires much less change in the actual code.


Graphs can be changed by non-coders.

​

If you are a one-woman (or one-man) development team, this is obviously irrelevant. But as soon as you have a team with game designers, or more generally a team where the people who request changes are not those who implement them, it's much more efficient to allow them making (and testing) changes for themselves.


Spaghetti graphs allow visual debugging.

​

Version 1.1 of the Spaghetti Machine includes the Debugger window that allows you to actually see what happens in the graph: Active panels, custom variables, potentials etc.


Drawing spaghetti is fun!

​

I am shamelessly stealing an argument you already mentioned, but I think it's actually an important aspect of working with the Spaghetti Machine. Btw, that's why I added some not-so-serious details like the little fork cursor or the colour "octarine" (There's also a little easteregg...).

You can't (yet) display or edit a graph ingame, but you can actually use the Spaghetti Machine Editor as concept map app.

 

Quick question: does this work for web applications? It seems the runtime requires a dll integration. Is there any chance there might be a web friendly version in the future? This stuff seems very useful but no web deployment would make it less appealling...

 

Don't worry, the dll is compiled with your source code into the .unity3d file, just like any other dll (e.g. UnityEngine.dll, System.dll etc.).

RE-EDIT: For a while I thought I was actually wrong, but it turns out that dlls can indeed be used in WebPlayer builds, as long as they don't refer to the UnityEditor.dll. (That's why v1.1 had problems with web player builds, fixed in v1.11)

 

Great! Mmmm... Now it seems I have no convincing reason to keep that $100 in my pocket damn, you got me big time!

 

Gotcha ! MOUAHAHAHAHAHAHAHAHA!!! <- evil world-domination laughter

Feel free to give feedback about your experiences with the Spaghetti Machine - be it praise, criticism, problems or suggestions. The more feedback we get, the better future versions will be.

 

My particular needs require the graphs to be readable outside Unity; ie: UntiyEngine.dll is NOT present. Is this possible? Are the graphs output in a easily readable (XML, JSON, etc) format that does not explicitly require Unity?

 

The graphs are actually XML files - I only save them as ".bytes" files in order to avoid graphs being loaded as panel sets or vice versa. Take for instance the "Hello World" example (Example 1 in the package):

​

The XML file of the graph looks like this :

Code (csharp):

1. <graph>
2.     <panel type="Start" x="124" y="44" width="200" height="51" image="">
3.         <ID>1000</ID>
4.         <slots number="1">
5.             <slot label="Out" plug="output" color="" multiple="true">
6.                 <ID>1</ID>
7.                 <output ID="2" />
8.             </slot>
9.         </slots>
10.     </panel>
11.     <panel type="Word" x="366" y="95" width="200" height="85" image="">
12.         <ID>1001</ID>
13.         <slots number="3">
14.             <slot label="In" plug="input" color="" multiple="true">
15.                 <ID>2</ID>
16.                 <input ID="1" />
17.             </slot>
18.             <slot label="Word" content="string" color="" multiple="true">
19.                 <ID>3</ID>
20.                 <data_string>Hello</data_string>
21.             </slot>
22.             <slot label="Next" plug="output" color="" multiple="true">
23.                 <ID>4</ID>
24.                 <output ID="5" />
25.             </slot>
26.         </slots>
27.     </panel>
28.     <panel type="Word" x="305" y="214" width="200" height="85" image="">
29.         <ID>1002</ID>
30.         <slots number="3">
31.             <slot label="In" plug="input" color="" multiple="true">
32.                 <ID>5</ID>
33.                 <input ID="4" />
34.             </slot>
35.             <slot label="Word" content="string" color="" multiple="true">
36.                 <ID>6</ID>
37.                 <data_string>World</data_string>
38.             </slot>
39.             <slot label="Next" plug="output" color="" multiple="true">
40.                 <ID>7</ID>
41.             </slot>
42.         </slots>
43.     </panel>
44. </graph>

As you can see, the XMLs are not difficult to understand. A <input ID="4" /> indicates that we have an input plug connected to the slot marked with <ID>4</ID>. I think the rest is pretty much self-explanatory.

 

Salut ...

Pour moi ca ressemble plus a de la choucroute !!

bis dann..

 

Well, the Spaghetti Machine is an all-purpose tool - so, if you like you can use it to make a choucroute garnie (dressed sauerkraut) :

 

These pic explanations are so cute (again!)

But, I'm still having trouble understanding how to use it, exactly.

For example, I am not sure how the nodal connections are represented for dressing that sauerkraut... Can they be mapped one to one to assemble a sauerkraut?

 

I suppose you are asking how to access the connections in the game ? Well, this strongly depends on how you want to use the graph. Actually, the sauerkraut example is not very typical, as it is

• Deliberately confusing, and
• Completely useless

But for argumentation's sake, let's assume we want to use it to create some sauerkraut labyrinth monster chasing text game. "You are on a potato. Exits are to the S, SW, W, NW, N, NE, E and SE. You smell a wumpus."

You start with creating a panel set specific to your needs, by creating an XML file where you define panel types with image, slots and plugs. (A slot contains a name, plus some data and/or a plug. Usually a slot is a row on the panel, but not in this case.) Then you load this panel set into the editor, create panels and connect them by clicking on the plugs and drawing connections. Then you save it as, say, "ChoucrouteMaze01.bytes".

Now, to use the graph in the game, you have to create a script, say "SauerkrautMachine", derive its class it from SpaghettiMachine, attach the script to a game object and select (in the inspector) the type of machine - in this case, best would be a State Machine, a type where there is never more than one active panel.

First thing your script does is loading the graph, and activating an initial state (panel) - say, the bacon :

Code (csharp):

1. import Spaghetti;
2.  
3. class SauerkrautMachine extends SpaghettiMachine
4. {
5.     private var mActivePanel : Panel = null;
6.    
7.      function Start()
8.     {
9.         // Load the graph
10.         LoadFromFile( mstrGraphPath + mstrGraphFile );
11.        
12.         // Activate the "Start" panel
13.         FindPanelByType("Bacon").Activate();               
14.     }
15. }

Now, each time a panel is activated, your SauerkrautMachine script receives a message "OnPanelActivated". We use it to memorize the currently active panel:

Code (csharp):

1. function OnPanelActivated( panel : Panel )
2. {
3.     mActivePanel = panel;
4. }

Now, when you have a panel, you can access its slots by their name with FindSlot( slotname : String ). To respond, for example to the user input "Go NE", you would do something like this :

Code (csharp):

1. if( userInput == "Go NE" )
2. {
3.     mActivePanel.FindSlot("Northeast").ActivateConnected();
4. }

The ActivateConnected activates the panel and sends a message OnPanelActivated, where mActivePanel is updated, and so on. (Note that in version 1.1, you can actually observe the activation of panels in real-time in the Debugger.)

Of course, it all depends on how you want to use the graph. If you would use the sauerkraut graph as electrical circuit, for example (with potato batteries, sausage resistances, bacon transistors etc.), you would use plug potentials rather than panel activation.

(Btw, it's all explained in detail in the manual, as well as in the examples included in the package and in the free demo.)

 

Hi Zogg,

I'm following this thread since the beginning, because the Spaghetti Machine looks really interesting (plus yummy: I'm Italian ), and I'm keeping track of it for eventual future works.

I have a question though. I just noticed that you find slots and panels by strings. It's obviously much more legible than using ints, but also slower. I was thinking it would be great if the Spaghetti Machine automatically wrote a C# file integrated into the Unity project, containing enums for all the slots/panels/etc. This way, finding them at runtime would be more performant, and writing the code would be both type-safe than quicker.

 

Does this work in publish to flash?

 

Hi Zogg !

The Spaghetti machine seems very interresting and i'm currently learning to use it with your demo version (as my current project code strangely looks like a bolognaise).

However, i noticed that you reference gameobjects with a string, then using "GetDataGameObject()" to a gameobject connected slot to get back the referenced gameobject.
How is this handled inside the engine ?
Do you make a "GameObject.Find(<nameofthegameobject>)" to retreive it from the scene ?

 

Great idea! I'll add this to my ToDo list.

Currently it doesn't - when building for Flash, the compiler runs into a NullReferenceException. I'm trying to find a workaround, but I can't promise anything.

Yes, but not each time you call GetDataGameObject(): The Find method is called only once when the graph is loaded. So, if your game object doesn't exist at this moment because it's not yet created or you're in another scene, you'll see a Debug.LogWarning, and GetDataGameObject() will return null even if later on, an object with this name exists. (In this case you can use GameObject.Find( slot.GetDataText() ).)

 

Hahahahaha....
Nice product, very good humours.. hahaha

JP

 

Hi,
I was wondering if there's been any update for the Webplayer compatibility yet... Haven't heard about it since this last post. I'm very interested in the product, but having this thing supported in both Web Mobile environments would be a requirement for me.
Besides, would it be possible to get our hands on the source code when buying the plug-in?
Love the presentation. Keep up the good work.

 

We will release an update with restored web player compatibility this week (it's done, I just have to correct one or two bugs).
Turns out it is actually possible to include dlls in the web player - you only have to avoid dlls which use UnityEditor.dll.

We currently don't intend to release the source code, as doing so might turn into a customer support nightmare: On one side, when a user makes some minor changes to the code, it would be unjustified to deny him help with bugs and problems which have nothing to do with his modifications. On the other hand, when a user makes not-so-minor changes, he might accidentally break something else in the code, and then report the bug to us, in which case we would end up fixing his code modifications.

However, we are thinking about adding possibilities for customization, e.g. adding custom data types for slots.

Thanks!

 

Thanks for the prompt response.
The reason for me asking about the source code, is the fact that our projects usually have short deadlines and we are somewhat hesitant on having dependencies on third party plug-ins. It's not really our intention to make large scale modifications to the product, but rather having the possibility to solve or circumvent critical problems by ourselves rather then having to wait for the next update, especially when it comes to relatively young products.
On the other hand, I also understand your point of view, having a hard time managing customer support and all. But please let me know if you see any 'in between'-solution that would keep things manageable, cause it would mean a lot to us having the source code at our disposal as well.

Either way, I'm glad to hear about the WebPlayer compatibility update

 

Of course, when you have problems and a deadline approaching, you can always contact us directly - we will do whatever we can to make you meet the deadline. To give an example, ten days ago a customer had a problems with the Spaghetti Machine (actually the web player build issue) and a milestone scheduled for some days later, and contacted us via GetSatisfaction. I looked into the issue at once and sent him a temporary solution the very same day, then discussed the issue with him and went on to fix the problem more properly, which led to said WebPlayer compatibility update.

Besides, if it's to circumvent problems in a hurry and not for permanent changes, I don't see a problem in sending you the source code of the Spaghetti Machine runtime classes "under the table" - which I actually did with said customer. (I would, however, more hesitant to send the Spaghetti Machine Editor source code to a customer, to avoid people downloading the demo and then tricking me into sending them the non-demo source code for free.)

 

This is very understandable. That's why I suggested getting the source code AFTER buying the fully licensed product.
I will discuss this with my superiors, and might decide to make a purchase via Asset Store soon.
Thanks again for the update!

 

(Note to self: Add some hidden code phrase to the licensed version to be able verify if someone actually bought the licensed product.)

 

This is a interesting tool, but I'm wondering do you need to run it within unity? Can it be made standalone app? If so, at least designers can modify it easily without needing the project.

 

Currently, the Spaghetti Machine Editor only runs inside Unity. Of course your designers can use it without needing the project you are working on - all they need is a flyweight project with only the Spaghetti Machine.

 

I just submitted version 1.11 which fixes several bugs, has an improved debugger window, and - most importantly - fixes the Web Player issue. (The WebPlayer does actually work with dlls, as long as they don't refer to the UnityEditor.)

However, it seems that this week is a very stressy week for the Unity team, not only because of the GDC, but also because of the technical problems they had, and probably submissions piling up. So I won't blame them for taking a bit longer for approval than usual.

If anybody bought the licensed version and needs the update urgently, please contact me.

 

What's the best way to contact you to get the update urgently? PM?

 

Wait a minute...

...

I guess the best way for you would be to check your mail.

 

If anybody else needs an urgent update, best is to contact me at mkuppe(a)methodinthemadness.eu .

 

Get them to quote the order number or something.

 

Oops, I didn't see the "Verify Invoice" tab on the publisher admin page. My bad. Guess I added a code phrase in v1.11 for nothing.