Presentation

Node tree

Node tree defines the content structure and its layout on the screen.

The node tree is constructed from nodes that display content (for example, Image node) and implement logic (for example, Button 2D node). The same node tree supports 2D and 3D nodes and provides the means to connect them.

The relationship between the nodes in the node tree is very important and defines how several Kanzi core technologies work. Rendering order, layout, property and resource inheritance, and input and message propagation all depend on the relationship between parent and child nodes in the node tree.

Kanzi offers the tools to modularize and reuse parts of the node tree (for example, prefabs).

Nodes available in Kanzi

Content control nodes

  • Image.

    Use the Image node to show a bitmap image.

    See Using the Image node.

  • Model.

    Use the Model node to show the imported meshes in your Kanzi application.

    See Using imported meshes.

  • Nine Patch Image.

    Use the Nine Patch Image node to create a scalable button background that scales with the size of the Nine Patch Image content.

    See Using the Nine Patch Image node.

  • Page.

    Use the Page nodes to create the structure of the user interface in your application, and the Page Host nodes to manage navigation requests and transitions between Page nodes under a Page Host node. For example, you can use Page and Page Host nodes to create different parts of the user interface in your Kanzi application, such as Page Host nodes Home, Media, Navigation, or Settings screens, each having their own hierarchy of Page and Page Host nodes.

    See Using the Page and Page Host nodes.

  • Text Block 3D and Text Block 2D.

    Use the Text Block nodes to show a small amount of text in your application.

    See Using the Text Block nodes.

  • Viewport 2D and Viewport 3D.

    Use the Viewport nodes to set the size of a render target surface onto which Kanzi projects content.

    See Viewport nodes.

Interactivity control nodes

  • Button 3D and Button 2D.

    Use the Button nodes to create interactions through clicking, tapping, or pressing a key on the keyboard.

    See Using the Button nodes.

  • Scroll View 3D and Scroll View 2D.

    Use the Scroll View nodes to define an area where to generate scrolling messages in response to user input and physics-based animation.

    See Using the Scroll View nodes.

  • Slider 3D and Slider 2D.

    Use the Slider nodes when you want to allow users to change numerical values using a visual indicator between a minimum and a maximum value.

    See Using the Slider nodes.

  • Text Box 3D and Text Box 2D.

    Use the Text Box nodes to add single-line text input to your application.

    See Using the Text Box nodes.

  • Toggle Button 3D and Toggle Button 2D.

    Use the Toggle Button nodes to create interactions through buttons that can have multiple toggle states.

    See Using the Toggle Button nodes.

  • Toggle Button Group 3D and Toggle Button Group 2D.

    Use the Toggle Button Group nodes to allow users to select only one option from a set of options that are mutually exclusive.

    See Using the Toggle Button Group nodes.

Layout control nodes

Container control nodes

3D nodes

  • Camera.

    Use the Camera node to show the content of a Scene in your Kanzi Studio project and in your Kanzi application.

    See Using the Camera node.

  • Instantiator.

    Use the Instantiator node to replicate the appearance of a 3D node or a tree of 3D nodes that the Instantiator node targets.

    See Using the Instantiator node.

  • Level of Detail.

    Use the Level of Detail node when you want to show different appearances of the same object, or different object, based on the viewing distance of the Level of Detail node.

    See Using the Level of Detail node.

  • Light nodes.

    Use the light nodes to create sources of light for a Scene in your Kanzi application.

    Kanzi has these light node types:

    • Directional Light emits light only in one direction and is suitable for modeling the sunlight.

    • Point Light emits light from a specific location uniformly to all directions (360 degrees).

    • Spot Light emits light from a specific location towards a specified direction in the shape of a cone.

    See Using the light nodes.

  • Scene.

    Use the Scene node to show 3D content in your Kanzi application.

    See Using the Scene node.

Class hierarchy organization

The base class is Node. The base class for 2D nodes is Node2D and allows adding 2D nodes as child nodes. Node3D works in the same way for 3D nodes. Node class does not have the means to connect child nodes, so that the Node2D, Node3D, and derived classes can define what types of nodes they accept as child nodes. For example, Viewport 2D derives from the Node2D class and therefore accepts 2D child nodes, but also accepts one child node of the type Scene. This way Kanzi can arrange 2D and 3D nodes in a heterogeneous tree.

To iterate the tree in a homogeneous way use the Visitor or Abstract Child APIs:

  • For Visitor API, see Node::visit or Node::visitDescendants.

  • For Abstract Child APIs, see Node::getAbstractChildCountOverride, Node::findAbstractChild, Node::addAbstractChildOverride, and Node::removeAbstractChildOverride.

Each node has the access to its parent. The type of parent pointer is Node because the type of the parent can be either 2D or 3D.