Simple node editor

It should be as simple as setting panOffset as the inverted node position, the zoom has actually no impact here as it is applied after the panOffset Has to be inverted because of the way it is applied afterwards...

Code (csharp):

1. [HotkeyAttribute (KeyCode.C, EventType.KeyUp)]
2. private static void CenterToNode (NodeEditorInputInfo inputInfo)
3. {
4.     if (GUIUtility.keyboardControl > 0)
5.         return;
6.     inputInfo.editorState.panOffset = inputInfo.editorState.selectedNode != null? -inputInfo.editorState.selectedNode.rect.center : Vector2.zero;
7.     NodeEditor.RepaintClients ();
8. }

Put this anywhere in the project and you should be able to focus on a node with 'C' Hope this helps!

 

Inverted! That was a key! Thanks for fast response. Works perfectly. Most of my nodes have coresponding GameObjects in scene and thoose create an interactive application, so I use nodes to store data like text and images and Transitions from different Pages with this content.
I wanted to add functionality to right click on GameObject in hierarchy and select context menu to open NodaCanvas and show me where this node is located.
(My canvases have usuwally 150 - 300 nodes).

Once again thanks for help! Everyone in office is happy now they don't have to search for nodes manually

 

No problem, glad you've found use

 

Hey Seneral,

Thanks for the update on the Modularity Update on Canvas and Traversal (PR #109). It works great in terms for my use, specifically for the dialog system based on ChicK00o's work.

I know this question has been asked countless times already, specifically having multiple input connections support (which I think the main reason for the modularity update was).

Right now my terrible attempt to implement it was to disable removing nodes when connecting an output to an input that already has another output connected.

It works for most case, except it freezes when I try to save the canvas, which is probably what my way of working around is causing it to freeze. How would you go about getting a proper workaround for the nodes?

Can't say enough how pleased I am with the framework so far. Keep up the good work!

 

Thanks for your kind words
You got the right timing!
@Nopey on GitHub just posted his WIP solution for this, working with him to get it working properly (with serialization and integration). Concept looks very promising so far, so we might have a good solution running soon!

Yeah, when modifying the canvas, especially the 'integrity' of the canvas (including nodes and nodeKnobs), the save system is likely to break due to modified properties or added ScriptableObjects that are not registered.
If you added ScriptableObjects, then you could use these callback functions in both subclasses of Nodes and NodeKnobs:

Code (csharp):

1. /// <summary>
2. /// Returns all additional ScriptableObjects this Node holds.
3. /// That means only the actual SOURCES, simple REFERENCES will not be returned
4. /// This means all SciptableObjects returned here do not have it's source elsewhere
5. /// </summary>
6. public virtual ScriptableObject[] GetScriptableObjects () { return new ScriptableObject[0]; }
7.  
8. /// <summary>
9. /// Replaces all REFERENCES aswell as SOURCES of any ScriptableObjects this Node holds with the cloned versions in the serialization process.
10. /// </summary>
11. protected internal virtual void CopyScriptableObjects (System.Func<ScriptableObject, ScriptableObject> replaceSerializableObject) {}

But I recommend, if you can, to wait for the implementation of Nopey
Else, I can help you with integrating that of course with a bit more detailed information if you're having trouble.

EDIT: Wrong code

 

Thank you for your reply!
It's not a hurrying matter, so I might hold it off in the meantime, especially if proper serialization and integration is being worked on.

The NodeGroups are a great addition to have (including resizing of nodes), something I'll probably end up porting for the regular nodes too.

In the meantime I'll try to see if I can come up with a list of suggestions on top of my head that I'd personally like having implemented which aren't yet part of the issues tracker (might be able to assist with some of it as well once my time frees up a bit).

I think mentioning the progress here briefly on the things that are being worked on would also gain some traction, which would have definitely help even more if the OP were to be updated by the current active members (if that were a possibility).

 

Yeah, Node resizing is definitely something to look at. Although I would prefer an automated resizing that adapts to the content over a manual resizing option... But this would require some technical hacks into the GUI system similar to our scaling solution and definitely alot more time...

I've much to do currently, because I'm preparing to release my first tool. That means I have to do everything from developement over promotional stuff and even to a website so my time is relatively limited. But I'm quite happy with the progress we're currently making on the framework, even if it's just merging of older implementations, small modifications or discussing on features - because we had quite a big influx of people and with them new ideas coming in recently

I also thought that modifying the OP would be really benefitial, but unfortunately @unimechanic has been offline since shortly before this thread became really active (even before I posted the framework)... Even thought of making a seperate thread but was quite hesitant, and now it's probably too late

 

Hello,
I just took a quick look at this and really like the extensibility of it.
I would like to replace my own node editors for quest and dialogue design with new ones based on your framework because adding new node types in my old editors is quite tedious.

But I found the following Problem: NodeInputs have only 1 connection and NodeOutputs can have multiple ones, which makes perfect sense for your image processing or pretty much any calculation but quest and dialogue parts should always have multiple ways to get to, but can not lead to multiple following parts.(Except user choice outputs or conditional outputs, but those would be one NodeOutput per choice/condition).

Is there already some solution for multiple inputs / single outputs?
In NodeInput.cs I found the lines

// Multiple connections
// public List<NodeOutput> connections;

commented out, so there must have been some kind of problem with that in the past?

Thanks for that awsome amount of work you put into this!

 

Hi! Thanks for your kind words
That's actually the current focus, and you can follow our progress on this issue.
The problem we faced is not about structure but actually interface. Imagine, what if you allow multiple connections for both Inputs and Outputs, how would you be able to edit them? Currently you drag the connection on the knob that only has one, but that would not be possible when you have multiple connections going off each knob. We have ideas though to fix that, I'm about to make a prototype for them, so it should be in a working state during the next few weeks hopefully

 

Ok I've read through the issue and the current plans sound rather complicated, to be honest.
Maybe I miss something important, but as I understood, the knobs are just relevant for CREATING connections.
If I want to rewire one of multiple connections of a knob, I would just want to delete the connection by clicking on it with the middle mouse button and then create a new one.

That would require:

• disable dragging of connections on knobs with multiple connections and instead create a new one
• cache calculated points of bezier curve into connection for hittesting

I know you dislike hittesting the curve. Do you have performance concerns on this one?

Edit: Oh I see, there is no connection class...

 

That has been considered, but hittesting a bezier curve is not very elegant.
I don't have much experiences with user interface design but I would assume it isn't quite intuitive either. The curve does not look like something you can click on, and so the user will have a rather hard time figuring out what he needs to do in order to delete or modify a curve.
It would be technically possible and performance isn't a too big deal, but the other solution, although in a raw state, seems more promising to me. It has various options to make it easier to use and make it possible to edit the curve in a faster manner, with less clicks and movement.
Anyway, feel free to post suggestions in the issue I might try implementing hittesting if you still think it might be worth a try, but dragging from a knob to edit curves seems more intuitive to me atleast...

 

That makes sense, usually a node should handle automated resizing depending on a few factors (in my case, adding new options, foldout, etc.). That would make some nodes look extremely long in height, but I'd be happy enough if I can get some basic resizing done for the node, such as checking the last control available on the node GUI to determine the size for the node itself.

Good luck with releasing your first tool, definitely understandable and yes, there has been quite an interest in here as of late which will prompt for what would probably be a fantastic framework (not that it isn't already so far ).

I wouldn't necessarily think it is too late, especially with the traction it gained throughout. Once you have a more finalized version, at least to the point where the core functionality such as a fully working asset/cache saving, multiple node connection and probably multiple selection, then you could go about and create a new thread with a more prominent community interest and maintenance

On another note, had been taking a glance on how to improve the entire node editor experience, from setting up a toolbar instead of the sidebar, separate inspector window and probably thinking of having a compact window set up for nodes, which would show only the text values of important fields for a quick glimpse) but that would make maintaining nodes a whole lot harder as their size would change but their position would remain the same. Unless I'd handle that but that will definitely require a lot of time on something that's probably trivial.

A few handful suggestions I'd have that would help with the overall experience is to be able to create a new node when dragging the output to the canvas, simply triggering the context menu when the left mouse button is let go (prior to the need to create them only with the right mouse click). Again some are trivial suggestions which I'll probably PR some of them but these are just distractions more or less until the main issues are dealt with.

 

Im working on a custom behavior tree solution for my game and i found this amazing node editor.
But i have 2 issues atm that i cant seem to solve.
First, i keep getting this error for all of my custom nodes:

No TypeData defined for: BehaveIn and type could not be found either
UnityEngine.Debug:LogError(Object)
NodeEditorFramework.ConnectionTypes:GetTypeData(String) (at Assets/Node_Editor/Node_Editor/Framework/ConnectionTypes.cs:46)
NodeEditorFramework.NodeInput:CheckType() (at Assets/Node_Editor/Node_Editor/Framework/NodeInput.cs:87)

All my inputs/outputs have names and types like:
node.CreateInput("In", "BehaveIn", NodeSide.Top, 70);

Second issue is when im trying to set up an array in "Create" and later use that in "NodeGUI" function, that variable is always null?

 

Hi and thanks!
First you have to make a typeData for your 'Behave(in)' type that specifies the type that is passed (if necessary), color and other customization settings, etc. It's as simple as adding this code snippet anywhere in the project (assuming BehaveIn was for inputs, which is irrelevant):

Code (csharp):

1. public class BehaveType : IConnectionTypeDeclaration
2. {
3.     public string Identifier { get { return "Behave"; } }
4.     public Type Type { get { return typeof(void); } }  // type to pass
5.     public Color Color { get { return Color.green; } }
6.     public string InKnobTex { get { return "Textures/In_Knob.png"; } }
7.     public string OutKnobTex { get { return "Textures/Out_Knob.png"; } }
8. }

Next issue is unfortunately pretty common (partially because of the confusing nature of the implementation there). In Node.Create, you have to make sure to add the array to the node you're creating, not the current node (this).

Code (csharp):

1. this.array = new type[4]; // Don't
2. node.array = new type[4]; // Do

 

Thanx, that helped me a lot! : D
Now i can start doing the actual magic . p

 

I have run into another small issue. I want to have a checkbox in one of the nodes i can set during design time and then read that during runtime, but it always seem to be default value whatever i set it to in the editor? Here is a part of the code for the node:

Code (CSharp):

1.  
2. private bool trueFalse = false;
3.  
4. protected internal override void NodeGUI()
5. {
6.      GUILayout.BeginHorizontal();
7.      trueFalse = GUILayout.Toggle(trueFalse, "True");
8.      GUILayout.EndHorizontal();
9. }
10.  
11. public override NodeStatus Tick()
12. {
13.      NodeStatus status = NodeStatus.FAILURE;
14.      if(trueFalse)
15.          status = NodeStatus.SUCCESS;
16.  
17.      return status;
18. }
19.  

Edit: Also having another small issue, i want icons for my nodes, so in Create i do:
node.tex = (Texture)Resources.Load("Icons/" + node.Id);
And then in NodeGUI i do this:
GUILayout.Label(tex);

This works fine, until i reload the canvas again, then it wont show any icons, is it because Create is not executed at load? Any way around this?

 

The same rules of serialization that apply to monobehaviours apply to the nodes, too. If you want a value to save, it has to be either public or tagged with [SerializeField].

Yes, Create is only called once. You can cache the reference once again by serializing it or you can use standard OnEnable, which is called whenever an object is loaded.
BUT if you plan to use the canvas at runtime, without displaying the GUI, you don't want the texture to be loaded. Then you could wrap it in preprocessor checks or simply load it at the start of the GUI function like:
if (tex == null) loadTex

Same with the path and usage of Resources. If you don't need the GUI in the build, don't put it in resources and load it with UnityEngine.AssetDatabase, or best use ResourceManager.LoadResource/LoadTexture which works both in editor and runtime if a full path to a file in a resource folder is specified.

Hope that helps

 

Hi,

I see you're now saying it's supporting in-game editing? I.e. can I create node structured in the actual game rather than in the editor? Is there's a sample to look at? Thanks.

 

Sure, you can take a look at RTNodeEditor component for a complete runtime Node Editor GUI or RTCanvasCalculator which just traverses the canvas and iteracts with it through code. Both are located in NodeEditor/Example
We also had a WebGL demo running previously until dropbox decided to abandon their support for html pages and thus it's dropped now. But may be able to get it running again somewhere else...

EDIT: Just note currently there is no way of saving those changes made at runtime, Unity doesn't allow to serialize objects and save them as files outside of the game data. For that we plan a seperate XML-based save format. But you can load in saved canvases of course.

 

Ok, got a WebGL demo up and running on github pages now. Background tiles are somewhat distorted, but this is only visual. Trying to figuring this out now
Takes a few second to load, stays white until then because I removed every template data...
https://seneral.github.io/NodeEditor_WebGLDemo/

Edit: Fixed the glitch and added more canvases

 

Thanx! I'm only planning to use this in the editor, so should not be any problems.

 

Just want to share what im working on with this great Node Editor:
https://github.com/virror/BehavorTreeDesigner

https://dl.dropboxusercontent.com/s/w16lrmkz3dwh7fu/shot_170115_172754.jpg

 

Looks great so far! Would love to see where this is going

 

It is fully working, so its possible to make working ai, but there is a lot of missing features and you have to do all the action nodes yourself : p
Would not be possible without the incredible Node Editor : D

 

Actually, there are features in the develop branch only so far that make the framework even more modular and, for example, allow you to force a root node or traverse the canvas right in the editor through extending a traversal algorithm
Anyway, I'm sure all this will eventually find it's way into master (as soon as the following modular plans are implemented and maybe Undo, too)

 

Would be really cool to see the traversal in the graph in realtime as in mecanim : D

 

Any specific reason that protected internal abstract void NodeGUI (); is marked as internal? It gives me trouble overriding.

 

Yeah saw that you got errors when not inside Plugins. It's an easy fix though, instead of:

Code (csharp):

1. protected internal override void NodeGUI()

do

Code (csharp):

1. protected override void NodeGUI()

and it's ok.
Internal is necessary so NodeGUI can actually be called from the outside of the Node class. I think what is limiting to you is protected, which means only acessible in the Node and it's children.
protected internal means both accessible from inside the Node and it's children aswell as in the rest of the namespace.
Sure, not absolutely necessary. I will remove it when merging the next time

 

Just wanted to mention that i pushed a new major update to the BehaviorTreeDesigner today. Now it has a fully working example scene with some actions and stuff. If anyone needs a visual ai solution and likes to code a little bit, feel free to try it out : )

 

How is saving supposed to be done?
It seems, if you open a canvas asset, it creates a copy and if you then save it, it creates another one.
I think that some field values of my derived canvas type get lost during that process

 

What do you mean by 'supposed to be done'?
The editor window handles it like this by default on the master branch: A copy is created of the canvas, saved to Editor/Node_Editor/lastSession.asset and directly worked on. That means all changes applied to the loaded canvas are automatically saved to the lastSession. If you then save, a copy of that lastSession is created and saved to your save destination.
On develop branch, we have a new cache system that does not directly work on lastSession.asset but instead of a copy of it only existing in the memory while periodically saving to lastSession.asset. Still the same for saving though.

Hope that answers your question, if not, don't hesitate to ask

 

thanks for your support.
I just wanted to know if I'm doing it wrong.
I would rather expect to open a canvas asset, edit it and then just click on save to apply the changes to it.

Half of my last post got lost somehow(repaired it now). I fear that some field values(scriptableobject subassets) of my derived canvas type get lost during that copy process. Any Ideas on that one?

 

Try getting the "develop" branch instead of master, it has a vastly improved save system : )

 

Ah, now I got you. Well, a 'Save' button that saves to the last location is implemented in develop now, but can't change the copying thing as that would deceive the basics of saving users would expect
You can of course change that behaviour to not create a working copy in NodeEditorUserCache, but without copying, you would directly work on that file and undoing aswell as doing a backup would be impossible, so I don't recommend it...

Regarding your worries about loosing extra ScriptableObjects stored in there, yes this is a small problem because the serialization system requires them to be saved seperately. Depending on your type of data, you can save them externally, in which case the reference to them is maintained when referenced in e.g. nodes, or you can tell the framework to store them in the canvas save file. You can do that by overriding these two functions in Node.cs (plan to add these to NodeCanvas.cs, too):

Code (csharp):

1. /// <summary>
2. /// Returns all additional ScriptableObjects this Node holds.
3. /// That means only the actual SOURCES, simple REFERENCES will not be returned
4. /// This means all SciptableObjects returned here do not have it's source elsewhere
5. /// </summary>
6. public virtual ScriptableObject[] GetScriptableObjects () { return new ScriptableObject[0]; }
7.  
8. /// <summary>
9. /// Replaces all REFERENCES aswell as SOURCES of any ScriptableObjects this Node holds with the cloned versions in the serialization process.
10. /// </summary>
11. protected internal virtual void CopyScriptableObjects (System.Func<ScriptableObject, ScriptableObject> replaceSerializableObject) {}

Use GetScriptableObject to return your SOs you save in the Nodes (but only on the node that actually holds these objects). Use CopyScriptableObjects to replace references to them on ALL nodes referencing these objects!
Hope that helps you

And yes, @virror is right, if you can 'risk' it, get develop. It's currently stable afaik, and has some great improvements

 

While working further on improving the node editor in general and dialog nodes, it also had me distracted enough to revamp the whole interface. Moved everything into a slick toolbar (but still keeping the old sidebar toggleable just in case) and was also experimenting on some custom GUISkin. So far I'm happy with the results.

http://files.atrblizzard.com/sharex/dialogrevamped.png

As for the dialog nodes, currently trying to find some ways on handling conditions, such as trigger a dialog only on specific scenarios or even lines. Ideally it would make sense to keep all conditions as separate nodes but I'm trying to find some option to get some input knobs for the dialog lines so it would know which one would show up through the condition node's output, but I'd also like to hear opinions from others as well.

https://forum.unity3d.com/attachments/diaq_graph-jpg.105050/

For some reason I really like the simplicity of handling nodes. I might end up making use of the inspector in a more meaningful way or even add a floating inspector window inside the node editor window itself. Granting skin and other UI customization options seems like a good idea to have in the future.

 

Hello Just wondering if there is an If and else nodes somewhere? Could not find any so wondering if someone would happen to have one?

 

The scriptable objects are subassets of the canvas itself and only referenced in the nodes.
My custom Canvas represents a Sequence of Cutscenes, where each Node is a Cutscene. So I derived SequenceCanvas from NodeCanvas and manage the all Actors in the Canvas and just reference them from the nodes.

Edit:
Just to clarify:
Right now I dont have problems with that, because I've removed the cache and edit directly on the opened canvas, so don't worry . Just some Testscenario for when you add those overridable Methods to NodeCanvas.

 

That looks absolutely fantastic! Nice work
I've not focused much on GUI yet indeed, the current one was actually my first prototype GUI to get started. Toolbar really is the best option. If you don't mind, could you make a PR for it? Really would love a better GUI, just don't have enough time...
On the dialogue nodes, seems like that is the best way to go, without cluttering the existing node GUI. Also note you can reposition the knobs next to their lines just by calling OutputKnob(index) after the line GUI (or calling SetPosition on the knobs).

 

What do you want to use it for? With the existing calculation nodes it would make no sense to create an if/else node. So it depends on your situation...

 

Ah ok. Actually, it would be easier for you to simply add them yourself rather than disabling the cache but anyway
Which branch are you using? I can commit that to develop but I won't directly commit to master right now, so I would send you code instead. It's really just 2-3 lines.

 

Much appreciated, but the cache really didn't fit my requirements, so I wanted to get rid of it anyway. I've also modified other parts of the framework, so I'm already off the track

 

I am creating a game where you make games. but I also want players to learn how to code while there at it.
So I intend to add if, else and much more.

 

So, a visual scripting machine that works at runtime (which is why you can't use other solutions)?
Well, there's more to it than an if-else node. You'd first have to implement the whole pathing and executing logic, the current calculation behaviour is not up to that. I suggest you to get the develop branch, which has some modularity features that make this job way easier. You can make a different canvas type and then implement scripting logic (including pathing like if/else) in a seperate traversal class.
The existing calculation logic aswell as the graph example might help you, but there's still lot's of basic things to implement before starting with if/else nodes.
If you need more specific help implementing the logic, I might try to help you

 

The current calculation logic (as i understand) only goes one way, to make game logic you need a way of calculating a node, and then get some result back to the parent node. You might want to have a look at my BehaviorTree thingy i made using this node editor, it has some of that logic implemented. It also has a kind of if statement node named "selector".

https://github.com/virror/BehavorTreeDesigner

 

Good idea. Actually, I remember I also have made a few Nodes back then that might help him, Expression and conversion Nodes, which ease handling with different kinds of types. Will update them on the repo

 

Yes, that is correct this is the only one that works in runtime I have found so far.
I originally wanted to use plybox because in this game you develop RPG games, and i really liked the blocks as there much easier to learn to use, but its Editor only.
Help would be very much appreciated as I don't have much time to complete this visual scripting system.


-----EDIT-----
I have come up with a simple idea for an If node with Else built in
But now I need to create things like
Update
Start
and custom function nodes
And be able to call them when needed
Is this possible?

 

Certainly! For now I'll keep the side panel intact (will just make it hidden by default) and separate their function out into their own constructors which then can be called from both ends. I still have to get the submenu items to work, for instance creating a specific type of canvas, however I imagine it being ready soon enough.

Sounds about right, will keep conditions and actions separate from the dialog nodes, but will probably add input nodes to each line, or to an entire dialog in general. Thanks, just what I was looking for!

 

Sure, you can do whatever node you want.
But you certainly can't do a scripting engine right on the framework, you will need some backing code that runs it properly. That means, you'd need to make your own traversal system (which is very easy with the latest update) which executes the nodes in their correct order and also makes sure your start nodes get called at start etc. or even better provides the apropriate callbacks (Start, Update, etc) your nodes can subscribe to. Also, you can use normal ScriptableObject callbacks like OnEnable in the nodes.
Can't help you too much, but this should get you a basic idea what to expect. Not an easy task, but also not impossible
Also, regarding plygame, although the layouting of the framework does not work like that you could certainly modify it to allow such a layout.

 

Great! Thanks
Well, GenericMenu do not allow for changes after building (f.E. deleting entries) so most GenericMenus would have to be rebuilt on re-initialization (these including canvas types for Example).
Scene loading is a bit more tricky, you would have to rebuild on every call to the GenericMenu to ensure it's the latest scene save setup. Should be as easy as caching a GenericMenu without the scene saves and showing a copy of it with scene saves added everytime you open it.
I plan to support procedural/on-demand creation of menu entries in our custom GenericMenu implementation in the future though (idea came from Expression Nodes example branch, currently all types in every namespace have to be loaded into a single GenericMenu at once...)
Good luck!

 

I want to use the develop branch as you suggested.

First Problem I encounter using an unmodified version of the framework is that the Nodes dont have a reference to the canvas they're in.
Is there already some way to get the canvas of the node or can this be added to the Framework?

Second Problem: Can someone provide me with an example of how to override CopyScriptableObjects?