UI Node Connect 4 is a customizable runtime UGUI Node Graph Framework that facilitates the creation of interactive node graph interfaces inside your Game or App.
For more detail this asset from the Unity Asset Store: Click Here
UI Node Connect 4 v4.1
“Sharing is caring”
The UI Node Connect 4 is a runtime UGUI Node Graph Framework with Nodes, Ports and Connections, drag and drop, a custom UI line renderer and useful features to create node graphs, flowcharts, circuit boards, connection puzzles, among other creative ways for the users to interact with your game or app.
Customize the asset with your own sprites, texts, colors, buttons and expand it by adding new features using the API to hook up to events and analyze the Nodes, Ports and Connections.
Make the Canvas part of your gameplay by adding a new interaction way for the users to manipulate and connect Nodes to each other.
Technical details
Features:
Support for Canvas Render Mode: Overlay, Camera, World Space
Drag and Drop
Logic and visual Node connections
Multiple Connection line styles (line: Solid, Dashed, Dotted; curve: SPLine, ZShape, Soft ZShape, Straight Line)
Line color and start/end width
Line Caps
Line flow Animation (animation shapes: Square, Circle, Triangle, Diamond)
Nodes and Connection pointer hover
📚 Documentation
📚 Code Reference
🎮 Logic Gates Sample Scene
Overview
The UI Node Connect 4 (UIC4) is a framework for UI Canvas that facilitates and speeds up the creation of node graphs and similar mechanics for your Game or App, enabling you to easily create node graphs, flowcharts, circuit boards, connection puzzles, among others.
It is possible to customize the asset with your own sprites, texts, colors, buttons and expand it by adding new features using the API to hook up to events and analyze the Node’s Ports and Connections.
The main visual elements of the system are the Nodes, Ports and Connections, that you can access via the Graph Manager. The UIC4 also has an event system for a more organized and decoupled interaction of your scripts with the system.
In the following sections, the system’s modules and example scenes are explained.
Getting Started
With the package imported into the scene a new option will be available in the Hierarchy’s context menu (access it by clicking in the hierarchy or a GameObject with the right mouse button), “UI Node Connect 4”. From there, you can create a Graph from scratch by selecting “UI Node Connect 4 > Create a GraphManager”.
Note that you will also have access to the sample scenes, they are a great learning source and can be used as templates for your projects.
If you create a Graph Manager in a blank project, this button will add two GameObjects, besides the EventSystem needed for the Canvas interactions, those are:
Canvas – UIC4 Graph Manager: object with a Canvas and a Graph Manager components, already setup with a custom image for a pointer and a child UIC Line Renderer
UIC4 System Manager: object with an UIC System Manager and Input Manager components
After the Graph Manager is added to the scene you can start adding Nodes. Opening the context menu from the Graph Manager GameObject the “UI Node Connect 4” menu will also show the option “Create Node”.
The added Nodes come with one Port of each type as an example, at this point, the system already has all the needed components to work. You can also add new Ports to the Nodes using the context menu.
Graph Elements
The Graph Elements are the main visual elements of the system, those are the Nodes, Ports and Connections. While Node and Port are MonoBehaviours, the Connection is a non-MonoBehaviour object stored by the GraphManager and rendered by the UIC Line Renderer.
