Comment on page
Learn various concept types and usage of nodes
This article explains the concept, types and usage of nodes along with examples.
A node can be defined as a reference to a specific event or action that is applied for a single or multiple 3D objects in the scene for creating a flow-like structure to define the course of the AR experience. The following are the basic node concepts:
a) Add 3D objects into the 'Design Canvas'. b) Click the
'Toggle' icon from the top menu bar and the 'Actions and Events' flow designer will pop-up in the bottom panel. c) Drag and drop common event or action nodes from the side panel. You can also click the required node and it will get added to the flow designer panel. d) Right-click on the 'Actions and Events' flow designer panel to access advanced event and action nodes.
Select the node and click 'Delete' Node
a) you can connect the event inputs to the required output and this is referred to as the 'Node connector' b) To delete: select the node connector, hold CMD (Command Key) > the node connector will turn RED , click the node connector to delete. c) To move/reposition: click the node connector and 'Dot' will appear. Use the 'Dot' to reposition the node connector. This is referred to as a 'Node Pin' d) To delete node: Click the 'Node Pin' , Hold Cmd (Command Key) > the node pin will turn ORANGE (When selected) and then RED for delete. Click to delete. e) Repeat same steps to delete the node connector.
Delete Node Connector and Pin
Create Node from Object and Select Related Nodes a) Select the object from the Design Canvas and click 'Create Node from Object', an object node will be created and displayed on the 'Actions and Events 'flow designer. b) Select Related Nodes: Click this icon and all the node related to a specific object will turn ORANGE. Easily move the entire set of related nodes to enable easy designing.
Create Object from Node
There are multiple methods in which you can modify the screen size to enable the user to easily edit and create a desired flow of actions and events to the various 3D models, widgets, audio, video etc. inserted. The following are the options:
You can increase the space for designing various 'Actions and Events' by maximising the screen space. Follow the steps below:
- Click thetoggle icon to access the 'Actions and Events' panel.
- To expand the 'Design Canvas', clickoricon to increase space.
Refer image below:
You can manually resize the screen by using the expand icons from the side panels of the 'Actions and Events' tab as shown below:
Manual Screen Resize
You can choose various targeted screen resize options as mentioned below:
- Expand the 'Actions and Events' panel.
- Click the'Screen Resize' from the top panel to access various targeted resizing options. You can choose to 'Maximise', 'Tile window to left' or 'Tile window to Bottom'.
Refer Image below:
Targeted Screen Resize
To enhance view of various 3D objects on the design canvas you can enable the 'Window see-through' option. This provides better visibility of the objects inserted behind the 'Actions and Events' panel.
See through Window Panel
The following are the various categories of nodes:
These nodes are easy to access and are displayed on the 'Action & Events' flow designer (Right panel). Use these nodes to quickly create a scene and access multiple event and action nodes to build your scene.
These nodes can be identified with a GREEN tile. Event nodes are use to indicate a specific event to be triggered for an object. There are 4 types of event nodes: i) On Scene Start: Use this event to apply an action on an object to be triggered upon 'Scene' start. ii) On Tap: Use this event to initiate an action upon the tap of an object in the scene. iii) On Update: Use this event to initate an action upon an update of an object in the scene iv) On timeline event: use this event to initiate an action upon using the 'Event' tab in the animation timeline
Join the event node input with relevant output and also connect objects to the events to create a scene.
These nodes can be identified with a BLACK tile. Action nodes are used to indicate a specific action on an object during the scene. It can be also used to identify a specific event and time frame.
There are multiple action nodes such as: 1) Set colour: In order to modify the colour of an object and initiate this action, connect to an event and define the relevant objects. For eg: On Tap> Set Colour (change colour)> object changes colour 2) Wait: In order to apply time intervals before another action begins. Ensure you modify the time as required. 3) Open UR: In order to trigger a response action of OPEN URL, ensure you link the action to an event. For eg: On Scene Tap>Open URL 4) Show/Hide: In order to show or hide an object in response as an action to an event. For eg: On Tap>of an object >show/hide another object. 5) Audio Controller: In order to apply audio controls, apply audio to specific objects etc. For eg: On Tap> of an object> play audio>use audio controller. You can choose various options as displayed in screen below:
Audio Controller with On Tap Event
6) Anime Clip Controller:In order to control the animation and apply necessary effect to specific object. For eg: On Tap> of one object>Control Anime clip (animation) of another object.
Anime Clip controller to control Animated Objects
7) Fadein/Fadeout: In order to modify the opacity of an object and initiate this action, connect to an event and define the relevant objects. For eg: On Tap> Fade out (fade opacity of object)> object fades colour. 8) True/False: Use this action to define the true or false action and connect to an event. 9) Number: Use this action to indicate a number. Usually utilised time in seconds (time intervals) to trigger an action on an object after a few seconds. 10) Number: Define a time frame in seconds 11) Text Constant: Apply a text as a constant 12) Create from XYZ: Define the X, Y and Z axis for an action of an object 13) Branch: Apply branched events or multiple events for various scenarios. Eg: branch an event when 'object in True' and another event when 'False' 14) Event Connector: Use this to easily connect set of events to another set for easy mapping of the actions and events.
15) Specialised Action Node:You can also specific a specific object for an action node. For eg: Audio Controller or Anime Clip Controller. You can choose the object from the drop-drop int he object field. All object in the 'Design Canvas' will be available in the drop-down menu.
Define Object in Action Node
Use specific nodes and create from Object.
- 1.Right-click on 'Actions and Events' and select desired event to access advanced actions.
- 2.Perform advanced functions of triggering actions for objects.
- 3.Complex actions including variables, math, vectors etc
- 4.Multiple event nodes with enumerable options of actions are available. Select the desired event, object and action to apply advanced action nodes.
Event and action nodes are embedded with inputs sockets such as object, multiple object, input event and output event sockets. Connect these sockets on the basis of the scene planned for the AR experience.
These sockets are used to join events, actions and objects. Input the correct objects, and events with the desired output and events to create a scene. Build a flow-like structure using these sockets.
Following are types:
- Object Socket An object socket specifies an object in the scene. A script node can read properties from the object, or in the case of processing an event, it can set properties on the object. Use the 'Black' object connectors to apply actions and events on objects.
- Multiple Object Socket You can connect multiple objects from a single event using the 'Black Stripped Node' Refer example below:
Object Reference Nodes
Input event socket watch for incoming signals (like taps, scene changes, or other external events). Upon receiving an input event, the node can perform calculations on its inputs and parameters, change properties on an object reference, and trigger output events.
Vectors: Apply vectors such as x,y and z access.Identify vector node with 'Purple Color'
Numbers: Define the time intervals. Identify number node with 'Blue Color'
Data: Define Data(values). Identify and specify values for each node with 'Orange Color'
- Boolean: define boolean data
- Input values (numbers, vectors, strings, booleans, and other simple data types) provide values for calculations performed by this node. If an input port is not connected to another node, this node can (optionally) display controls in the “parameters and/or input values” that allow the user to enter specific values to use for each parameter.
- Output sockets are event sockets to indicate an output. Attach action and event nodes and specify objects.
- Output values (none in this example node, but use the same symbols as input values) specify the result of calculations or tasks performed by this node.
Refer video below:
Define Output Values