Incari Studio
2022.1
2022.1
  • Incari HMI Development Platform
  • Getting Started
    • Overview
    • Requirements
    • What's New
    • Installation
    • First Steps
      • Incari Hub
      • Creating a Project
      • Incari Studio
  • Objects and Types
    • Overview
    • Project Objects
      • Scene
      • Screen
    • Scene Objects
      • Camera
      • Group
      • Lights
      • List
      • Mesh
      • Sprite
      • Text
      • Web Sprite
      • Primitives
      • Screen Space Elements
    • Prefabs
      • Creating and Using Prefabs
      • Logic in Prefabs
      • Nested Prefabs
    • Attributes
      • Attribute Types
        • Asset/Object Attribute
        • Boolean Attribute
        • Color Attribute
        • Numerical Attribute
      • Common Attributes
        • Object
        • Camera
        • Sprite
        • Transformation
          • Global Transformations
          • Local Transformations
    • Data Types
      • Bool
      • Byte
      • Float
      • Int
      • String
      • Vector2
      • Vector3
      • Vector4
    • Terminology
  • Modules
    • Overview
    • Asset Manager
    • Animation Editor
    • Attribute Editor
    • Code Editor
    • Console
    • Exporter
    • Image Sequence Editor
    • Logic Editor
    • Global Preferences
    • Material Editor
      • Default Car Paint Model
      • Default Extended PBR Model
      • Default Glass Model
      • Default PBR Model
      • Default Shadeless Model
      • Default Phong Model
    • Model Editor
    • Plugins
    • Profiler View
    • Project Outliner
    • Project Settings
    • Scene Outliner
  • Toolbox
    • Overview
    • Actions
      • Delay Action
      • FadeFromTo Action
      • FadeTo Action
      • MoveBy Action
      • MoveTo Action
      • RotateBy Action
      • RotateTo Action
      • RotateFromTo Action
      • ScaleBy Action
      • ScaleTo Action
    • Array
      • Array Value
      • Clear Array
      • Concat Arrays
      • Get Array Element
      • Insert Array Element
      • Length of Array
      • Pop Array Element
      • Push Array Element
      • Remove Array Element
      • Set Array Element
    • Binary
      • Binary (Hex) Value
      • Concat Binaries
    • Communication
      • CAN
        • CAN Send Packet
        • CAN Start
        • CAN Stop
        • Events
          • On CAN Packet Received
          • On CAN Start
          • On CAN Stop
      • HTTP
        • Events
          • On HTTP Route
          • On HTTP Server Start
          • On HTTP Server Stop
        • HTTP Client
        • HTTP Response
        • HTTP Server Start
        • HTTP Server Stop
      • MQTT
        • Events
          • On MQTT Start
          • On MQTT Stop
          • On MQTT Topic
        • MQTT Publish
        • MQTT Start
        • MQTT Stop
        • MQTT Subscribe
      • Serial
        • Events
          • On Serial Error
          • On Serial Packet Receive
          • On Serial Start
          • On Serial Stop
        • Serial Send Packet
        • Serial Start
        • Serial Stop
    • DateTime
      • Date Time Formatter
      • Now (UTC)
      • System Time
      • Timezone Value
    • Development
      • Assert
      • Benchmark Get
      • Benchmark Start
      • Benchmark Stop
      • Clear Console
      • Console
      • Profiler Start
      • Profiler Stop
    • Dictionary
      • Clear Dictionary
      • Dictionary Value
      • Erase Dictionary Element
      • Get Dictionary Element
      • Get Dictionary Keys
      • Get Dictionary Values
      • Merge Dictionaries
      • Set Dictionary Element
      • Size of Dictionary
    • Events
      • Custom
        • Event Listener
        • Event Trigger
      • Gestures
        • On Swipe
        • On Tap
      • ImageSequence
        • On ImageSequence Frame Changed
        • On ImageSequence Pause
        • On ImageSequence Play
        • On ImageSequence Stop
      • Keyboard
        • On Key Press
        • On Key Release
      • List
        • On List Current Index Change
        • On List Entry Select
        • On List Load
      • Mouse
        • On Hover Enter
        • On Hover Leave
        • On Mouse Button Down
        • On Mouse Button Up
        • On Mouse Click
        • On Mouse Double Click
        • On Mouse Enter
        • On Mouse Leave
        • On Mouse Move
        • On Mouse Scroll
      • Object
        • On Alpha Change
        • On Opacity Change
        • On Position Change
        • On Position Change 2D
        • On Rotation Change
        • On Rotation Change 2D
        • On Scale Change
        • On Visibility Change
      • On-Screen Keyboard
        • On On-Screen Keyboard Arrow Down Pressed
        • On On-Screen Keyboard Arrow Up Pressed
        • On On-Screen Keyboard Enter Pressed
        • On On-Screen Keyboard Input Changed
        • On On-Screen Keyboard Key Pressed
      • Screen
        • On Screen Scene Change
      • Variables
        • On Variable Change
        • On Variable Set
      • Video
        • On Video Play
        • On Video Finish
      • Web
        • On Javascript Callback
      • WebSprite
        • On WebSprite Load
        • On WebSprite Remote URL Change
    • Flow Control
      • Branch
      • For Each Loop
      • For Loop
      • Index Switch
      • Is Equal
      • Is Greater Equal
      • Is Less Equal
      • Select Data
      • Sequential
      • Switch
      • Toggle
    • Functions
      • Function
        • Function Input
        • Function Output
    • IO
      • Load File
      • Save File
    • Incari
      • Animation
        • Pause Animation
        • Play Animation
        • Stop Animation
      • ImageSequence
        • Get Current ImageSequence Frame
        • Get ImageSequence Duration
        • Get ImageSequence FPS
        • Get ImageSequence Total Frames
        • Go To Next ImageSequence Frame
        • Go To Previous ImageSequence Frame
        • Pause ImageSequence
        • Play ImageSequence
        • Resume ImageSequence
        • Show ImageSequence Frame
        • Stop ImageSequence
      • List
        • Generate List
        • Next List Entry
        • Previous List Entry
        • Select List Entry
        • Set Active
        • Set Current Index
      • Object
        • Get Alpha
        • Get Material
        • Get Opacity
        • Get Position
        • Get Position 2D (px)
        • Get Rotation
        • Get Rotation 2D
        • Get Scale
        • Get Size 2D (px)
        • Get Text Color
        • Get Tint
        • Get Visibility
        • Is Object 2D
        • Is Object 3D
        • Set Alpha
        • Set Material
        • Set Opacity
        • Set Position
        • Set Position 2D (px)
        • Set Rotation
        • Set Rotation 2D
        • Set Scale
        • Set Size 2D (px)
        • Set Text
        • Set Text Color
        • Set Tint
        • Set Visibility
      • On-Screen Keyboard
        • Get Screen Keyboard Layout
        • Set Screen Keyboard Layout
        • On-Screen Keyboard Clear Input
        • On-Screen Keyboard Get Input
        • On-Screen Keyboard Move Selection
        • On-Screen Keyboard Press Button
      • This Scene
      • Scenes
        • Scene
      • Screen
        • Get Scene
        • Set Scene
      • Screens
        • Screen
      • Vector
        • Arc
          • Get ArcEnd
          • Get ArcStart
          • Set ArcEnd
          • Set ArcStart
        • Get BackgroundColor
        • Get FillColor
        • Get StrokeWidth
        • Label
          • Get LabelText
        • Line
          • Get LineWidth
          • Set LineWidth
        • Pie
          • Get PieEnd
          • Get PieStart
          • Set PieEnd
          • Set PieStart
        • Rectangle
          • Get RectangleCorners
          • Set RectangleCorners
        • Set BackgroundColor
        • Set FillColor
        • Set StrokeWidth
      • Video
        • Is Video Playing
        • Pause Video
        • Play Video
        • Seek Video
        • Stop Video
      • WebSprite
        • Get Remote URL
        • Set Remote URL
        • Web Sprite Reload
    • Math
      • Absolute
      • Add
      • Average
      • Boolean
        • AND
        • Bool Value
        • Negate
        • OR
      • Ceil
      • Clamp
      • Decrement
      • Divide
      • Floor
      • Increment
      • Interpolate
      • Logarithm
      • Math Constant
      • Maximum
      • Minimum
      • Modulo
      • Multiply
      • Numerical Value
      • Power
      • Random
      • Range Mapper
      • Root
      • Rotation Matrix
      • Subtract
      • Trigonometry
        • Arc Cosine
        • Arc Sine
        • Arc Tangent
        • Arc Tangent 2
        • Cosine
        • Radian-Degree Converter
        • Sine
        • Tangent
      • Vector Value
    • String
      • Capitalize
      • CharCodeAt
      • Compare
      • Concat Strings
      • Contains
      • EndsWith
      • CryptoHash
      • Format
      • FormatArray
      • IndexOf
      • Join
      • JSON Parse
      • JSON Stringify
      • LastIndexOf
      • Length
      • Lower
      • IsLower
      • MatchRegex
      • PaddingLeft
      • PaddingRight
      • RandomString
      • RemoveCharacters
      • Replace
      • ReplaceRegex
      • Reverse
      • Split
      • StartsWith
      • String Value
      • Trim
      • TrimLeft
      • TrimRight
      • Upper
      • IsUpper
    • Transition
      • CrossFade
      • Fade
      • MoveInFromBottom
      • MoveInFromLeft
      • MoveInFromRight
      • MoveInFromTop
      • SlideInFromBottom
      • SlideInFromLeft
      • SlideInFromRight
      • SlideInFromTop
    • Utilities
      • Color Value
      • Conversion
      • Create CustomID
      • Create Object
      • Get Command Line Option
      • Group
      • Interval
        • Reset Interval
        • Start Interval
      • Is Data Type
      • Is Object Type
      • System Call
      • Timeout
        • Cancel Timeout
        • Start Timeout
    • Variables
      • Variable Getter
      • Variable Setter
    • Web
      • Call JavaScript Function
  • Demo Projects
    • Overview
    • 4 Methods of Animation
    • Using APIs to Pull Dynamic Data
    • An Analog Clock
    • Image Sequence Button Animation
    • Prefabs
    • Project Initialization
Powered by GitBook
On this page
  • 2D
  • Vector2D
  • 2D Nodes

Was this helpful?

  1. Objects and Types
  2. Scene Objects

Screen Space Elements

PreviousPrimitivesNextPrefabs

Last updated 2 years ago

Was this helpful?

As Incari can use both 2D and 3D Assets, it is necessary that the coordinate system be 3D. The downside of this is that most designers work with a layer-based, 2D coordinate system which presents the need to convert each Asset’s position in 2D space to the same relative position in 3D. This can be a slow and tedious process.

With the introduction of Screen Space Elements, though, it is much easier for UI/UX designers using 2D-based tools to transfer their designs into Incari without the extra step of performing individual conversions. Designers can now import Assets from third-party content creation software, such as Photoshop or Figma, directly into Incari.

Additionally, the Screen Space Elements encompass new Objects and new .

The 2D Objects available in Incari fall under two groups in the Scene Outliner. These are 2D and Vector2D. These provide 2D counterparts to those under 3D and Vector3D and are only editable within two-dimensional space, meaning that their position is only contained within the X and Y axes. Additionally, these utilize the pixel positioning feature, which means that the origin (0,0) is set at the top-left corner of the Screen and the X and Y values under Position reflect the exact pixel position when the Object is rendered on the Screen.

2D

The 2D Objects cover different functional items used to provide engaging graphics and visuals in Incari.

  • Image Sequence Sprite2D

  • Label2D

  • List2D

  • On-Screen Keyboard2D

As the name suggests, the On-Screen Keyboard is simply a keyboard shown on the screen in two-dimensional format. Certain style aspects can be changed with a .css file and Tint, the latter providing the color for the highlighted key.

  • Sprite2D

  • Svg2D

  • Text2D

  • Video2D

Videos are self-explanatory. This Object allows the user to upload their own video and move it around within two-dimensional space.

  • Web Sprite2D

Vector2D

The Vector2D Objects provide alternatives to their Vector counterparts and encompass several two-dimensional shapes that help build up the visual aspects of a User Interface. Unlike Vector, Vector2D Objects do not have Z axis components.

  • Arc2D

  • Ellipse2D

A circular 2D Object that is restricted to the X and Y axes.

  • Line2D

  • Pie2D

  • Rectangle2D

2D Nodes

The 2D Nodes fall under three groups and include the following:

  • Position

  • Rotation

  • Size

Image Sequences are used for one type of animation in Incari. More information can be found and .

Labels are useful for displaying textual information and titles. More information can be found .

Lists require several different files to display data in the desired manner and are interwoven with Incari Models. More information can be found .

More information on Sprite Objects and further links can be found .

This Object allows the user to upload their own SVG, or Scalable Vector Graphic, file. Learn more about Scalable Vector Graphics on .

A Text Object is used for writing texts in the User Interface. More information can be found .

Web Sprites are important for embedding different types of web technologies into an Incari Project. This is explained in greater detail .

A 2D Object that is a piece of a circle defined by a starting and ending degree disregarding the center and running straight through between the two selected degree points. It is restricted to the X and Y axes. More information on Arcs can be found .

A linear 2D Object that is restricted to the X and Y axes. More information on Lines can be found .

A 2D Object that is a piece of a circle defined by a starting and ending degree and a connected point at the center of the circle. It is restricted to the X and Y axes. More information on Pies can be found .

A rectangular 2D Object that is restricted to the X and Y axes. More information on Rectangles can be found .

These Nodes work for 2D Objects. The Vector Nodes are still usable for Vector Objects and now can be used for Vector2D Objects as well. More information on Vector Nodes can be found .

here
here
here
here
here
Wikipedia
here
here
here
here
here
here
here
Set Position 2D (px)
Get Position 2D (px)
Set Rotation 2D
Get Rotation 2D
Set Size 2D (px)
Get Size 2D (px)
Nodes
2D Objects
Vector2D Objects