Import of Resources

• Manage Imports
• Import Dialog Options
• How to Import Resources
• Import Raw Resources
• Import Benchmarks
• Import from Solution
• Smart Importer
• Smart Importer UI
• Basic Operations
• Smart Importer UseCase
• Recommended Layers Structure for Smart Importer
• Axure RP Importing example
• Adobe XD Importing
• Figma
• The example file of Figma
• Automatic Imports
• Image Update
• glTF Files
• Skinning

Manage Imports

Manage Imports

Scene Composer’s Solution Explorer provides the possibility to manage and organize the solution’s files. Imported resources are organized in folders according to the user's needs. This folder structure is linked to the locally stored solution folder structure.

For more information on solution management using folders, please also see here.

You can modify the folder structure of imported resources in the Solution Explorer panel. In addition to Solution Explorer, some of imported resources can also be made visible in the "Imports" panel.

Original image file retention

When an image file is imported using the File menu [ Import > Import Resources ], the original image file is retained along with the bitmap information file (*.bin file) used in Scene Composer.

The original image file is not retained if the file format is FBX, glTF and so on, or if the file is imported using the Smart Importer.

Original image file name

The original image file can be found in the [ Original Image ] section of the Properties panel of the imported resource. The original image file name is "the image information name" + "the original image file extension".

When the resource file name is renamed in Solution Explorer, the original image file name is also renamed.

Original Image File Location

Solution Explorer displays only the bitmap information file. The original image files are stored in the local Solution folder (the same location as the folder displayed in Solution Explorer).

Select a resource file in Solution Explorer and use [ Open In File System ] from the context menu to view its local location in Windows Explorer.

Moving original image files

When you move an imported resource in Solution Explorer, the original image file is moved along with the locally stored bitmap information file.

Imports Panel

The Import panel can be shown or hidden by selecting "View > Libraries > Imports" from the menu bar. This panel displays imported resources in a hierarchical manner. They can be placed on the scene editor by drag-and-drop operations.

Properties of Imported resources

When you select an imported resource either in Solution Explorer or Import panel, its properties are shown in Properties panel. Information about the selected resource is displayed in Properties panel.

Clone, Delete and Rename Items

Imported resources can be cloned, renamed or deleted in the Solution Explorer panel. Right-click an imported item in the Solution Explorer and choose the desired option from the context menu. You can also right-click on a folder containing imported files to bulk delete them.

For further information refer to Solution Explorer Context Menu.

Delete Unused Imports

If there are unused imports or import parts, it is possible to clean up the solution by using the "Delete Unused Imports..." option. This option is available in the

The "Delete Unused Imports" dialog will list all the imports from a solution.

The filter button allows to hide/show the unused (= undeletable) imports. Tick the checkboxes for unused imports to delete them with the Delete button.

Import Dialog Options

This section describes the import dialog screen configuration that appears when importing resources.

Import Dialog

1	Comparison: The resources that exist at the import destination are compared with the resources to be imported this time, and the update status is listed. The status of the import is indicated by icons and tooltips in [ Status ] section. The status can also be identified by the font color of each resource name displayed in [ After Import ] section. Green: Indicates a new resource being added. Yellow: The same resource exists, but with different properties. Colorless: The same resource exists and has the same properties, or it is not included in the resources to be imported this time.
2	Save Report…: Generates and saves a report file (cvs format) on the comparison of import files. The report name and save destination are set in the dialog window displayed by clicking this button.
3	Select Files…: Select items to be imported into the solution.
4	Folder: Select the destination folder for imported files. Use the drop-down menu or the Browse button to select any location in the Solution Explorer as root folder of the import destination. By default, the root folder "/Resources" is selected.
5	Create new folder for import: Select this option if you want to create a subfolder below the destination specified in "Folder" section. Input the new subfolder name in the field.
6	Delete existing items in destination folder: This option allows you to delete existing contents in the destination folder before performing the import operation.
7	Preserve imported folder structure: This option is available only when importing Image or 3D model file types. It can only be set when "Delete existing items in destination folder" is enabled. When "Preserve current folder structure" option is enabled, the existing files in the import destination folder are deleted, but the subfolder structure is retained. *This option is not displayed when you import file types for Font or Shader.
8	Visible in imports panel: This option allows you to make imported items visible in both the Import panel and the Solution Explorer.
9	Preserve library item attributes: This option likes export always, bitmap conversion option, etc. allows to keep all the different attributes set to an item unchanged after the re-import operation. The attributes which can be preserved are the properties associated with bitmaps - converter, target format, origin - and all the vertex buffer properties: buffer type, enable cache, position, normal, texture coordinate, tangent, bi normal etc. The preservation of any of these properties implies the fact that when an object is re-imported and any of those mentioned properties will be re-written, the "preserved" property will remain unchanged.
10	Set bitmap profile: This option allows you to specify a default bitmap profile that can be used for all bitmaps which do not have a profile set explicitly, and can be set when importing images, FBX, and glTF files. You can set-up Bitmap Profile from Solution > Solution Options... from the menu bar. In addition to this, settings can also be made from the Properties panel that appears when the target resource is selected in Solution Explorer.
11	Import as wireframe: This option appears only when importing FBX files. If checked, a wireframe vertex buffer will be created based on the triangles and rectangles in the FBX file. If checked, the vertex buffer and wireframe vertex buffer will be registered in Associated Vertex Buffer the solution options.
12	Set the "Is Indexed" property of the vertex buffer to enabled: This option is only displayed when importing FBX files (this option is enabled by default). If this option is enabled, the buffer type is changed to an index array. As a result, Scene Composer automatically selects the appropriate index size. If this option is disabled, the buffer type is set to an array.
13	OK button: Import the resources with the specified settings.
14	Cancel button: Close the dialog without performing the import.

SVG Importer Dialog

(1)	Import Settings Import to folder: The Solution Explorer folder into which the SVG file will be imported.  Create new folder for import When importing an SVG file, enabling this will allow a new folder to be created in the Solution Explorer. Importing List A list of items selected for import. Items that cannot be imported will be displayed with an error icon. Items that can only be partially imported will be displayed with a warning icon (note that even with no icon there may be cases where certain elements cannot be loaded).
(2)	Add/Delete: Add: Add another SVG file to be imported Delete: Remove an SVG file from the list of items to be imported
(3)	Preview Display: Left-side: The original SVG image that has been selected from the Importing List Right-side: The SVG image that has been selected from the Importing List as it will be when imported into Scene Composer. In the current version of Scene Composer, there are cases where the size will not match the original SVG image.
(4)	Error Message: If there are warnings or errors with the selected file, a message will be displayed here.
(5)	Import/Cancel: Import: Import the contents of the Importing List Cancel: Cancel the file import

How to Import Resources

This section describes how to import resources using [ Import Resources... ] from [ Import ] on the menu bar.

Import File Formats

The file formats to be imported when using this menu are as follows

• Image files (*.bmp, *.jpg, *.jpeg, *.gif, *.tga, *.png, *.dds, *.ktx, *.hdr, *.exr)
• Font files (*.ttf, *.ttc,*.otf, *.fnt, *.fbm, *.*)
• Shader files (*.vert, *.frag)
• SVG files (*.svg)
• FBX files (*.fbx)
• glTF files (*.gltf, *.glb)
• Icon files (*.bmp, *.ico, *.jpg, *.png)
• Script files (*.lua)

In addition to the above, Photoshop file (*.psd), Adobe XD file (*.xd), Axure RP file (*.rp) and Sketch file (*.sketch) can also be imported. For more information on these, please refer to Smart Importer chapter.

For Font files, by selecting Font files during file selection, they can be imported as fonts regardless of their extension. For more details, please refer to the explanation here.

With CGI 3.14 or later, skinning animations can be played back by importing skinning FBX or glTF files.

glTF file format

SceneComposer supports following glTF file formats when importing:

• glTF: This points to external binary data (geometry, key frames, skins), and images.
• glTF-Embedded: This embeds base64-encoded binary data, and images inline using data URIs.
• glTF-Binary: In Binary glTF, a glTF asset (JSON, .bin, and images) can be stored in a binary blob.

For more detailed information on the file formats, please see the Khronos website: GLB File Format Specification.

About .ktx File Format

The following compressed image formats are supported:

• Etc2CompressedRgbFormat
• Etc2CompressedSrgbFormat
• Etc2Alpha1CompressedRgbaFormat
• Etc2Alpha1CompressedSrgbaFormat
• Etc2EacCompressedRgbaFormat
• Etc2EacCompressedSrgbaFormat

To use this type of format, first of all it is necessary to convert an image with a different format (.tga, .gif, .psd, .bmp, .pgm, .png etc.) in a .ktx file. The next tools support generating KTX files:

• Texgenpack
• Mali Texture Compression tool
• Ericcson Texture Compression Tool

This tool compresses texture images to the Ericsson Texture Compression (ETC/ETC2) and Adaptive Scalable Texture Compression (ASTC). The available output file formats are .pkm - that can contain compressed textures - and .ktx – which allows the compression of a 2D texture with all its mipmap levels.

After the conversion is done, the .ktx resulted file can be imported in SceneComposer by following the same flow as in the case of other image formats.

In the case of a converted .ktx file which is imported in the SceneComposer application, the usage of the "DefaultBitmapConverter" property - available for any usual .bmp image - is not possible.

About Bitmap Font

Bitmap fonts are supported by SceneComposer. In order to use bitmap fonts, the SCHost.dll must be compiled using BitmapFont font engine. Only one font engine can be active at a time in an SCHost.dll.

The user can import 2 types of files as bitmap fonts:

• .fnt (windows font files) - are converted to bitmap fonts
• .fbm - already converted bitmap font files

When a font is imported, following specific property will be set:

• Source file names: specifies the name of the file which was imported - helps the user identify a font

On OpenGL ES1.1 platforms, such as Traveo2, it is not possible to perform import operations on shader files, SVG files, FBX files, and glTF files.

---

Import Operation

You can open the Import Dialog to proceed importing resources in one of the following three ways.

Menu Bar

Select [Import] > [Import Resources...] from the menu bar.

Context menu

Right-click on any folder in Solution Explorer and select [Import] > [Resource...] from the context menu that appears.

Drag and Drop

Drag and drop the target file to be imported into any folder under Solution in Solution Explorer.

• • glTF file can also be imported by drag-and-drop to any folder under Solution in Solution Explorer.
    
    
  • Note that under OpenGLES1.1 environment, shader files (*.vert, *.frag), SVG files (*.svg), FBX files, and glTF files cannot be imported by drag-and-drop operation.
    
    
  • When an image file format (*.bmp, *.jpg, *.png) that can be imported as an icon is dragged and dropped into any folder under Solution in Solution Explorer, the dialog box will appear as shown below, allowing you to select whether to import it as an image or icon resource. You can choose whether to import it as an image or an icon.
    
    
    
    

Import operations by file format

After selecting a file, operations will vary depending on the file format. Please refer to the following links for detailed operation procedures.

• Image, font, shader, FBX, and script file formats
  

• FBX files with multiple animations

• Icon file format
  
• SVG file format
  
• glTF file format

Image, font, shader, FBX, and script files

For importing FBX files contains skinning, see here.

When an image file is imported, the original image file is retained along with the bitmap information file (*.bin file) used on Scene Composer. See here for details.

1. When the import process is executed, Scene Composer will display a message to save any unsaved changes in the solution. Press OK to proceed. If you do not want this dialog to appear during the import process, uncheck the "Always show this dialog" checkbox.
   

   

    

    

2. After saving the solution, the Import Resources dialog is opened, where you can select one or more resource files to be imported. Select your files to import and press OK.

   • You can search for supported file formats by selecting them in the drop-down menu at the bottom right of the Import Resources dialog.
   • You can import multiple files at once as long as their file format belong to the same category, such as an Image file or a Font file.
   • By selecting Font files from the pull-down menu below, you can import any file as a font file, regardless of its extension.
     
     
     
     
     

3. After choosing your files to import, an Import dialog will be displayed depending on the file types you are importing (Image, Font, FBX, Shader…).
   

   • See Import Dialog Options for a description of the settings on the dialog screen.

   • Select [ Import as wireframe ] check box to import the wireframe vertex buffer when importing an FBX file.

     

     
     
     

4. Configure import settings to your needs and click "OK" button.
   

   • The file will be imported as a resource in the Solution Explorer in the location corresponding to the settings on the dialog screen.
     

     

Wireframe Related Properties

When importing an FBX file with the [ Import as Wireframe ] option enabled, a [ Line Width ] will be added to the property item ”mesh” of the target node. This specifies the line width of the mesh when it is rendered as wire.

• The actual line width is determined by rounding the specified width to the nearest integer.
  
• If the setting is less than “1”, it is always set to “1”.

FBX files with multiple animations

Scene Composer supports the import of FBX files that contain multiple animation tracks. The names of the imported animation tracks are automatically created from each animation track contained in the FBX file.

The animations that can be imported from FBX files are as follows.

• Translation
• Rotation
• Scaling

Icon files

See Icon Picker for information on how to use imported icon resources.

1. When the import process is executed, Scene Composer will display a message to save any unsaved changes in the solution. Press OK to proceed. If you do not want this dialog to appear during the import process, uncheck the "Always show this dialog" checkbox.
   

   

    

    

2. After saving the solution, the Import Resources dialog will open. Select the target file and press OK. If the selected file format is "*.ico", the [ Import Icons ] dialog will appear as shown below.

   • The path of the selected file is displayed in the [ Selected files ] field. To re-select a file, press the [ Select File... ] button.
     
   • In [ Destination folder ], specify the location where the file will be imported as a resource.
     
   • As explained in the Drag and Drop section, if you drag and drop an image file format that can be imported as an icon (*.bmp, *jpg, *.png), the above dialog will appear and you can import it as an icon.
     
     
     
     
     

3. Click "OK" button to complete the import operation.
   

SVG files

1. When the import process is executed, Scene Composer will display a message to save any unsaved changes in the solution. Press OK to proceed. If you do not want this dialog to appear during the import process, uncheck the "Always show this dialog" checkbox.
   

   

    

    

2. After saving the solution, the Import Resources dialog is opened, where you can select one or more SVG files to be imported. Select your files to import and press OK.

   • You can import multiple files at once.
     
     
     
     
     

    

3. After choosing your files to import, an SVG Importer dialog will be displayed.
   

   • See SVG Importer Dialog for a description of the settings on the dialog screen.
     

     

     
     
     

4. Configure import settings to your needs and click "Import" button.
   

   • "ImportedScenes" and "Scenes" folders have been created at the destination folder chosen in "Solution Explorer". The former holds data imported as template scenes, while the latter holds data imported as actual scenes. 
     

   • If multiple SVG files have been imported, the Scene Editor will display the actual scene for what was the topmost SVG file in the SVG Importer.

     • Transform > Position > X = 0, Y = 0 will be the item's initial position.
       

   • Copy group nodes within imported scenes into the desired scene and use them.
     

     

glTF files

The CGI Studio glTF Importer does not support the following features:
  - Morping
  - Vertex Buffer Streams
  - Sparse Accessors

For additional details on handling glTF files—e.g., supported extensions, multiple UV sets, and limitations—please see the glTF file page.

For importing glTF files contains skinning, see here.

1. When the import process is executed, Scene Composer will display a message to save any unsaved changes in the solution. Press OK to proceed. If you do not want this dialog to appear during the import process, uncheck the "Always show this dialog" checkbox.
   

   

    

    

2. After saving the solution, the Import Resources dialog is opened, where you can select one or more resource files to be imported. Select your files to import and press OK.

   • You can import multiple files at once.
     
     

3. After choosing your files to import, an Import dialog will be displayed.
   

   • Use the import dialog to configure Image-Based Lighting (IBL). You cannot change these settings after the import.
     
   • If you do not want to use IBL, clear the Use Image Based Lighting (IBL) checkbox.
     
   • During glTF import, the Engine automatically generates the IBL from a single HDR panorama (latlong) image, so you do not need to set the radiance, irradiance, or BRDF integration textures manually.
     
   • When necessary, set the HDR panorama (latlong) image and IBL texture size in the import dialog.
     
   • The default IBL texture size is 256. On ES2.0, set at least 64 and use a power-of-two value. On ES3.0, the minimum size is 64.
   • You can also set IBL in Solution Options. For details about these settings, see IBL HDR.
     

     
     
     

4. Then, "Import GLTF" dialog will be displayed.
   • You can’t change IBL settings in the import dialog (red box below).
     
   • When you specify an HDR panorama image and run the import, the Engine automatically assigns the generated shared IBL textures to each mesh (orange box below).
     
   • The Engine generates the following textures: LambertianTexture (Diffuse/Irradiance), GGXTexture (Specular/Radiance), GGXLutTexture (BRDF 2D LUT), and SkyBoxTexture (Skybox).
   • For other settings on the dialog, please refer to Import Dialog Options.
     
     
     
     

5. Configure import settings to your needs and click "OK" button.
   

   • The file will be imported as a resource in the Solution Explorer in the location corresponding to the settings on the dialog screen.
     

     

Shared IBL textures

When you import a glTF and generate IBL from an HDR panorama (lat/long), the importer automatically assigns the shared IBL textures (LambertianTexture/GGXTexture/GGXLutTexture/SkyBoxTexture) to each mesh. When you change a shared IBL texture, the importer propagates the change to all meshes that reference it. 

In the example below, select LambertianTexture (Diffuse/Irradiance) in Solution Explorer and set Magnification Filter to Nearest in the Properties panel; the importer applies the same setting to every mesh/material that references LambertianTexture (irradiance/diffuse slot). 

Import Raw Resources

You can import any type of raw resource by selecting [ Import > Import Raw Resources... ] from the menu bar.

In the "Import" dialog click the "Select Files..." button and select one or more raw resources to import in the "Open" File dialog.

For a description of the checkboxes, refer to Import Dialog Options.

Compare new content with already imported resources by right-clicking on a raw resource, to open the "Compare Properties" dialog.

---

Problems: Import Conflicts

In the "Problems" panel, potential import conflicts are listed.

Import conflicts might appear if a raw resource has been imported and already used previously. A conflict will occur when new raw resources are imported in the same folder and the "Delete existing items in destination folder" is checked.

The content of this tab can be saved in CSV (Comma Separated Values) format by clicking the "Save Report..." button. A "Save As" file dialog appears which allows selecting the name and the location of the CSV file.

Import Benchmarks

Render benchmarks can be calculated with CGI Analyzer. As a result, a "*.crsms" file can be exported with CGI Analyzer, which contains the calculated render time for each node part of a given scene. Import a "*.crsms" to make node benchmarks available on the node property "Render Benchmark". Once the benchmarks are available on the nodes of a scene, the camera render strategy "Benchmark" can be used for multi-pass rendering.

Open the "Import" dialog from the "Import" > "Import Benchmarks" menu.

Press the "Select Files..." button and choose a "*.crsms" file from the Open dialog.

The values from the imported .crsms file will be applied to the "Render Benchmark" property of all nodes.
The errors encountered after the .crsms file is selected are displayed in the Import Benchmark dialog.

More detailed information can be found in CGI Studio Application Development Tutorial.

Import from Solution

A powerful option to import different elements from a specific solution previous created in SceneComposer is "Import from Solution". This option can be accessed from Import menu.

The "Import from Solution" panel gives the possibility to follow a succession of three logical steps in order to import specific elements from a chosen solution.

---

Using the "Import from Solution"

The first step consists in selecting a desired solution from which the user needs to import some elements.
Choose an existed folder were the desired elements from a selected solution will be imported or create a new folder for import
Select some specific elements from a selected solution.
Import the selected elements.

If for a selected element there are dependent items, a special Options button will become available. This button is placed above the right side of the screen where all items are shown.

Four different options are available:

For every category of imported items it is possible to see their relationship with existing imported items: New, Existing and Conflict.

By selecting one or many from these "Show" options, the user can see the new items, the existing items or the conflicts between new imported items and previous imported items. If there are different existing (\=) items, another "Existing" button will become available. By using it a "CompareImportItemsView" dialog will be opened to show the existing items.

The "Show only differences" button allows the user to see just the differences between selected items. The comparison can be used in different modes. For instance, if the imported items are shaders, they can be seen in three different modes: Objects, Visual and Text.

If there are conflicts between items a "Conflict" button will become availI waable. By pressing it the "Compare Items" dialog will be opened and all the existing conflicts will be shown.

The status' signs show the nature of every conflict. If the "Show only differences" button is pressed, the dialogue will only show the conflicts. If the button is released, all the items will be shown. If a conflict is selected, all the properties and their differences will be shown.

Smart Importer

Smart Importer UI

This page describes the Smart Importer dialog. The Smart Importer dialog consists of the following four parts.

1. Preview
2. Import
3. Layer Tree
4. Control

Preview

Here you will see a preview of the file to be imported. Use the mouse wheel to zoom in and out of the preview image. The zoom factor of the preview is displayed in the lower left corner of the preview section. Pressing the button with the four arrows will preview the file at the maximum zoom factor within the display area of the preview area.

Select an element on the preview image, then AI detection will be performed on the selected element and the controls will be listed in the Control section.

Import

The import section consists of two tabs, [ Import Settings ] and [ AI Settings ].

Import Settings Tab

The Import Settings tab contains the following settings.

Import to folder	Select a destination folder for the imported resources. The selection can be any location on the Solution Explorer. To change the destination folder, use the pull-down menu. To create a new destination folder, use the next section [ Create new folder for import ].
Create new folder for import	When this option is enabled, a new import folder can be created with any name. The created folder will be located in the import destination folder specified in [ Import to folder ].
Scenes	You can edit scenes with the Smart Importer. Please click here to learn how to use it.
Toggle Applied Controls Preview	When this option is enabled, a green frame will appear where the control is applied. This allows you to visually check where the control is applied on the preview.
Resize Display Resolution	This option is enabled when the resolution of the file to be imported is larger than the solution's display resolution. When this option is enabled, the resolution of the imported file will be automatically resized to fit the display resolution.
Import State Machine	When this option is enabled, import state machines from your design file directly to your CGI Studio solution. If a global state machine already exists within your solution, a prompt will be displayed in which you can choose whether or not to import the new state machines with the Is Global property enabled.

AI Settings Tab

Settings for AI detection are made here.

The value specified in the Preference is used for [ Edge Detection ]. For details, please refer to that.

The colour selected under [ Transparent background color ] is used by AI to analyse the image being imported. Which transparent background colour is best for detecting controls depends greatly on the content of the image. If you are having problems with AI detecting controls, try changing this setting.

Layer Tree

Displays a tree view of each element from the file being imported. The list displayed here corresponds to the scene tree in Scene Composer. When one or more elements are selected in this list, AI detection is performed on the selected elements and the controls are listed in the Control section.

Entering any keywords in the search field at the top of the Layer Tree will narrow down the list to only those layers that contain the entered keywords.

Check the checkbox to the left of each layer element to set it as an element that constitutes a scene. Unchecked elements will not be imported.

Revert/Revert All button

To cancel the applied control settings, select the target item in the Layer Tree panel and press the [ Revert ] button. Note that pressing the [ Revert All ] button cancels all applied control settings in the layer tree. When the [ Revert All ] button is pressed, a dialog box will appear to confirm the continuation of the operation for safety.

Control

Control List Tab

Select any layer in the Layer Tree and the AI will detect the most suitable controls. The results of this analysis are displayed in the "Control List" tab, where candidate controls are listed in order of probability.

The controls are categorised by solution and reference (such as ConstructionKit and Custom Controls).

• For controls in ConstructionKit, the probability of matching with the AI is displayed as a number (and bar) to the right of the control name, and they are listed in descending order from the highest number.
  • For Custom controls that are not included in ConstructionKit, they are displayed in order of control name.
• By default, five controls are displayed in each category. Clicking the [ View All ] button (red box in the image below) will display a list of all controls.
  
• The list of controls that is displayed can be narrowed down by entering keywords in the search field at the top (orange box in the image below).
• To apply the controls to the selected element, use the [ Apply ] button in the control list.

The displayed control list can be narrowed down by entering keywords in the search field at the top. In addition, using the settings section that appears by clicking the triangle icon on the left side of the search field, you can configure the display settings of the controls that appear according to the detection value.

To apply a control to a selected element, use the "Apply" button in the control list. When applying a control with a low probability of AI detection result, a dialog box will appear to confirm your selection.

Appearance Tab

When any control is applied, the display automatically switches to the "Appearance" tab. Set the propertyies settings related to the applied control's appearance. Note that some controls such as TextValue do not require appearance settings.

The Appearance tab is made up of the following three main sections.

1. Image
2. Pivot Point
3. 9-Patch

Image

For each control image properties, set the layer image in the file to be imported. If the control image properties name and the layer name are equal, the layer image is automatically set. However, you cannot edit the image layer.

For example, when Gauge control is applied, the Control Image has a NeedleImage property. Therefore, if NeedleImage exists in the layer name of the file to be imported, it is automatically set to the NeedleImage property.

When you assign a control to a group player, you can choose from the following options for the control image.

Select layers	Select any image layer from the group layer. You can use composite images with multiple layers. For more information, please refer to here. After importing, the composite image will be placed in the [ ControlBitmaps ] folder. At this time, the bitmap name will be set to the property name specified here. If you select a single layer, the original bitmap placed in the [ Bitmaps ] folder will be used. For information on the location of the folder, please refer to Folder structure after import.
Transparent	A transparent image will be used.
Default value	Uses the default image for the applied control.

You can select images included in the group player by clicking on the selection icon on the right of the image.

• You can select the images of the descendant layers and yourself as property values.
• You cannot select layers other than images (except for bitmap layers to which controls have been applied).
• After selecting, the pivot point is set to the centre of the composite image.

For each control image properties, set the layer image in the file to be imported. If the control image properties name and the layer name are equal, the layer image is automatically set.

Image Array Properties

Image array properties is supported, and for example, images in FlipBook control are automatically assigned. The numbers attached to each Image element on the Appearance tab correspond to the values displayed in descending order in the layer tree.

Folder structure after import

After import, the [ Bitmaps ], [ ControlBitmaps ], and [ TextStyles ] folders are created in the Solution Explorer.

Bitmaps	The imported bitmap for each layer is placed.
ControlBitmaps	The bitmap composed of multiple layers is placed for the control properties.
ImportedScenes	The scene imported as a template will be placed.
Scenes	When you import a StateMachine (screen transition), the target scene will be placed.
TextStyles	The created text style is placed.

Pivot Point

When set-up a control image with layer mapping, the pivot point is automatically set. The pivot point values set automatically are as follows. (However, if the pivot point values are specified with the layer names mentioned later, the specified values will be used as the set values.)

• Pivot point X value: 0
  
• Pivot point Y value: 0

In addition, by checking the Pivot Point check box (No.1 below image), the following options can be used

• Can be enter any values for the X/Y coordinates of the pivot point (decimal points can be entered).
• Set the pivot point to the centre of the image (click on No.2 the above image).
• The Freehand dialog box will appear (click on No.3 the above image). Move the crosshair cursor on the dialog box to set the pivot point as you want.
• The background color of the [ Freehand ] dialog can be set to black or gray from [ Background Color ] in the lower right corner of the dialog (highlighted in the orange box in the figure below). Additionally, the default background color can be configured in Preferences>Smart Importer.
  
• 
  
  

On the other hand, you can apply any pivot point value by specifying the pivot point value in the layer name of the image to be imported.

• If the layer name in the target file to be imported is something like "***@X10@Y20", the pivot point values are automatically set as X10 and Y20.
  
• If the layer name in the file to be imported is "***@X10.5", the pivot point value is automatically set as X10.5 and Y as ”0".

9-patch

This option appears when the "Enable editing 9-patch" option is enabled in the Preferences>Smart Importer settings. When enabled, the 9-patch feature can be configured (input values must be positive numbers only).

Basic Properties Tab

This section allows you to set some properties items for the applied control. After importing, you can also select the target control and configure it on the properties panel.

If the layer name is the same as the control's property name, the individual properties are automatically mapped from the file to be imported.

Basic Operations

This section describes the basic operations on the Smart Importer.

Import File Formats

The Smart Importer uses the following two methods for import, depending on the file format to be imported.

• Local files: *.psd, *.xscil, *.xd, *.rp, *.sketch
  
• Cloud Resource: Figma data
  

For more information on Photoshop layer structure format, see Recommended Layers Structure for Smart Importer.

Restore Settings

The settings that were applied when the import was performed are saved in the solution along with the imported scene. Therefore, when importing the same file again and importing to the same path in the Solution Explorer, the Smart Importer will display a dialog asking if you want to use the saved settings.

Use	Saved settings are applied.
Merge	Merges both saved and new settings.
Don't use	No saved settings are applied and new settings are made.

If an image has been replaced in an imported file, the old image in the scene can be replaced with a new, updated image while maintaining the previous mapping between layers and controls by using [ Use ].

For other behaviors when reimporting files, see here.

Conversion to 2D Nodes

During import, specific elements (artboards/color pickers, in Photoshop) in the file to be imported are converted to optimal nodes in Scene Composer.

Artboards	Artboards in the file to be imported can be treated as a Group Node in Smart Importer.
Color Picker	Color pickers in the file to be imported can be treated as Solid Color Nodes. In this case, the solid color layer will use the same icon as the Solid Color Node in Smart Importer.

Under any of the following conditions, the Appearance tab cannot be edited.

• The layer of the file to be imported does not have image information.
• The applied control does not have a properties that refers to an image.

Other than the above, the same options are available as for image layers. For example, the Layer Mapping section can generate image resources once (Control) properties are mapped to a layer. Similarly, other prototyping tools will do the same with color pickers.

For each node in a 2D scene, see here.

Control instance configured with Smart Importer

After finished applying the detected controls and configuring images, pivot points, and other properties, click the [ OK ] button at the bottom of the Smart Importer dialog to import the configured file.

See the Smart Importer UI for details on what to configure in each part of the Smart Importer dialog.

It will be imported to the location specified in the Import Settings Tab, with the configured settings. Note that the control instance configured in Smart Importer (e.g., "Gauge left" in the image below) can be viewed in the Import panel.

Control instances configured in Smart Importer can be used in the scene editor or by dragging them into the scene tree.

Configure Scenes

The Import Settings tab allows you to manage scenes to be imported into Scene Composer. After selecting a target scene from the [ Scenes: ], open the context menu to see the following options

Add Scene	Add a new scene. Note that all checks for each element displayed in the layer tree will be unchecked. After the operation, the [ Add Scene... ] dialog box will appear, and enter a name for the new scene.
Clone Scene	The scene will be duplicated maintaining the configuration on the current layer tree. After the operation, the [ Add Scene... ] dialog box will appear, and enter a name for the new scene.
Remove Scene	Deletes the selected scene.
Rename Scene	Rename the scene. Can also change the name by double-clicking the target scene name.

TextStyle

When importing a Text Layer into Scene Composer, a new TextStyle is created. Its name will be a combination of the font name and the font size used in the Text Layer of the PSD file. Upon creation of a new TextStyle Scene Composer checks if a font resource with the corresponding name is registered in the Scene Composer solution. If the appropriate font resources cannot be found in the solution, a dialog box like the below will be displayed.

If the font does not exist in the solution, you can use an existing font resource by specifying an alternative font on this dialog.

Text and text-containing controls

The bounding rectangle (width/height) of text and controls containing text are imported as automatic values.

Global State Machine

State Machine elements are all imported as Global State Machine (confirmation dialog is not displayed).

Smart Importer UseCase

This section describes various use cases for Smart Importer operations.

Configure Scene Contents

Using the example of importing an image file consisting of two scenes, an IVI scene (e.g., music player and climate control) and a cluster scene, explains how to configure the contents.

• IVI_Sample layer: IVI scene consisting of a music player and air conditioning controls
  
• Cluster layer: A scene consisting of clusters only

If the import file name "IVI_Scene" consists of the above two layers, the two scenes can hold different contents (elements) by performing the following operations.

1. Select [ IVI_Scene ] from [ Scenes: ] and select [ Clone Scene... ] from the context menu.
   
   • In the [ Clone Scene... ] dialog box, specify "Cluster_Scene" as the name and press [ OK ].
     
   • Two scenes, "IVI_Scene" and "Cluster_Scene" will appear in the [ Scenes: ] section.
     
     

2. Select [ IVI_Scene ] from [ Scenes: ] and uncheck [ Cluster ] from within the layer tree.
   

   • The Cluster layer will be excluded from the IVI_Scene scene structure.
     

     

     
     

3. Select [ Cluster_Scene ] from [ Scenes: ] and uncheck [ IVI_Sample ] in the layer tree.
   

   • The IVI_Sample layer will be excluded from the Cluster_Scene scene configuration.

     

      

4. Press the [ OK ] button in the Smart Importer dialog to perform the import.
   

   • You can see the imported scenes and resources in the Solution Explorer panel.
     

   • Scenes IVI_Scene and Cluster_Scene do not contain the layers specified in steps 2-3, respectively.
     

     

Re-importing a file containing new images

If you reopen a file that has already been imported (same file name and same path where the file was saved) using [ Restore ], the saved settings (including applied controls and appearance settings) will be loaded. If the destination folder or scene already exists, you will be notified by blue information icons (in the orange box below). Hovering over these icons will display the necessary information in a tooltip. Running the import with the current settings will overwrite already imported resources and scenes, thus keeping the Layer Mapping settings and applied controls information and updating the images in the Scene Composer solution to the latest image.

If you want to import image content into the Scene Composer solution a second time, keeping the resources and scenes from both imports, select a different import location or a different scene name.

Re-importing a file containing images with different layers

If you import a file that has already been imported (same destination path, same file name), but has a partially different layer structure, it will appear as follows on the layer tree of the Smart Importer dialog.

Added/modified group layers	An orange icon will be added to the Group Node icon. Through this symbol, you can visually identify groups that have been modified since the last import (see orange frame in the image below).
Control Assigned Bitmap	If a bitmap of a node to which a control has already been assigned is used within another control, it will be displayed in yellow font.
Newly added layer	Newly added layers are displayed in green font (see green frame in the image below). Note that this layer will not appear in the [ Preview ] because the check box in the [ Layer Tree ] is disabled. Check the checkbox to make it appear in the [ Preview ].
Deleted Layer	Layers that existed in the previous file to be imported and do not exist in the current file to be imported are displayed in red font (see the red frame in the image below). Also, the checkboxes in the Layer Tree panel are disabled. Since these layers are not included in the current import file, they will not be displayed in the [ Preview ] even if they are checked in the [ Layer Tree ].

Merging multiple scene settings

The settings when applied during the import run are saved in the solution along with the imported scene. This allows you to import various configurations into the solution using a single import target file, and eventually merge them into a single configuration. The following is an example of such a setup procedure.

Creating Multiple Configurations

This section uses an example of import using the Car_Cluster.psd file stored in the following location. Note that the "New SPI configuration was found" dialog will not be displayed during each import operation because the folder specified as the import destination is different.

<root>\cgi_studio_content\2D\PSD

1. Open the Car_Cluster file in the Smart Importer and configure the Telltale control. Then, under [ Import to Folder ], specify the "/Resources/Cluster_Telltales" folder as the import destination and perform the import.
   • See "1. TellTale Settings" in the image below.
     
     

2. Re-open the same image file in the Smart Importer, this time setting the Gauge control. Specify "/Resources/Cluster_Gauge" folder as the import destination and perform the import.

   • See "2. Gauge Settings" in the image below.

     
     

3. In the same way, set the ProgressBar control. Specify "/Resources/Cluster_ProgressBar" folder as the import destination and perform the import.

   • See "3. ProgressBar Settings" in the image below.

Merge of multiple scene configurations

1. Open the Car_Cluster file in the Smart Importer.
   
   
2. Specify "/Resources/Cluster_Telltales" in the [ Import into folder ] and uncheck the [ Create new folder for import ] checkbox.
   
   • At this point, the Smart Importer dialog will appear. Select [ Use ] and then click [ OK ] to restore and apply the Telltale control settings.
   • A blue caution icon will appear in [ Scenes: ].
     
     
     
     
3. Next, change the import destination to "/Resources/Cluster_Gauge".
   
   • A dialog box similar to the one below will appear, so select [ Merge ] and then click [ OK ].
     
   • As a result, the configured Gauge control will be added to the previously configured Telltale control.
     
     
     
     
4. Similarly, change the import destination to "/Resources/Cluster_ProgressBar".
   
   • As in step 3, a dialog box similar to the one shown below will appear, so select [ Merge ] and then click [ OK ].
     
   • As a result, the configured ProgressBar control will be added.
     
     

The above operation results in a configuration with TellTale control, Gauge control, and ProgressBar control applied.

Configure a control image with multiple layers

It is possible that the image file you are importing is so complex that the Gauge background and needles are made up of multiple images for example. However, the Gauge control in Scene Composer requires only one image for the background and one for the needle. In order to balance complex image configurations and control settings, the Smart Importer allows multiple layers for each image used in the control.

The Car_Cluster.psd file is used as an example.

The image below shows the layer tree of the imported "Car_Cluster.psd" file in Smart Importer. The orange framed layer contains the Gauge needle and the blue framed layer contains the background.

To apply Gauge control, select the root layer of the target layer group on the [ Layer Tree ]. In the above image, "Gauge Left" is the root layer. In the [ Control List ] Tab, the results of automatic control detection by the AI will be listed. Press [ Apply ] button of "Gauge" control from the list and assign "Gauge" control to the layer group "Gauge Left".

By selecting the root layer to which the control is applied, the entire layer group can be set. Child layers will be set in the same way.

To select multiple layers and set them all at once, hold down the <ctrl> key or <shift> key and click on the target layer with the mouse, or click and drag around the layer you wish to select.

After applying the control, in the [ Layer Mapping ] section of the [ Appearance ] Tab, the child layer images in the layer group are set as "NeedleImage" and "Background" images to be used as images for the Gauge control. In the case of Car_Cluster.psd file, the NeedleImage property is automatically set because the layer name of the file to be imported contains NeedleImage.

In the Car_Cluster.psd file, there are multiple layers as the background image. Thus, select [ Select layers ] from the [ BackgroundImage ] pull-down menu.

The [ ImageLayers Selection ] dialog box will appear, so select the layer you want to apply to [ BackgroundImage ].

After the Smart Importer import is executed, an image will be created in which the specified layers are merged into the "Background" where multiple layers existed. The merged image can be viewed by double-clicking on it in the Solution Explorer to open the Image Preview window.

As shown above, bitmaps merged from multiple layers for control properties are placed in the [ ControlBitmaps ] folder in the Solution Explorer.

Recommended Layers Structure for Smart Importer

This page will explain how best to set up items so that they and their internal group items are automatically detected as controls when importing Adobe Photoshop (.psd)/Adobe XD (.xd)/Figma (.fig) files with the Smart Importer.

Controls that can be automatically assigned are limited to those found in the Touchable and Common categories.

---

For Adobe Photoshop（.psd）Files

Making controls from photoshop layer data can be in the following way 

After observing the above method, select the finished photoshop file from the Scene Composer toolbar [Import] > [Smart Importer] > [From Local File...]. The Smart Importer panel will open, and the file will be loaded in line with the .psd file layers that were set. As seen in the image below, the TextButton control has already been confirmed and subsequently applied.

This will also be reflected on the property panel after importing is complete. 

When importing nodes with mismatching layers and properties, new group nodes are created, and additional properties are added as child elements.

---

For Adobe XD（.xd）Files

The preparation needed for .xd files is for all intents and purposes the same as with 「For Adobe Photoshop（.psd）Files」. As seen below with the TextButton example, structure the Adobe XD items to match the structure and property names of controls to be automatically applied.

For Figma（.fig）Files 

The preparation needed for .fig files is for all intents and purposes the same as with 「For Adobe Photoshop（.psd）Files」. As seen below with the TextButton example, structure the Figma items to match the structure and property names of controls to be automatically applied.

---

Layer Structure and Naming Guideline for Controls

In general, it is recommended to keep the PSD layer format close to the standard Controls. Below is a guide on how the layers for some Controls should be formatted and named.

Axure RP Importing example

In this section, explain how to import Axure RP file format using Smart Importer.

You can get the Axure RP file described below at the following location.

"...\cgi-studio-root\cgi_studio_content\Resources\AxureRP\AxureTest.rp"

---

How to import

1. In SceneComposer, open a solution file, and select Import > Smart Importer from the main menu. And select your import target file (.xscil, .xd, .rp and .sketch).
   
   
   
   
   • In case a font used in the Axure file was not imported to Scene Composer, a pop-up message will appear. Click OK to proceed a default font will be used in such a case.
   • Click on the items in layer tree and check the detected controls you want to assign to each in the Controls List. For this sample, the detected controls don’t need any manual assignment.
     
     

2. Click Scene 2 under “Scenes” on the lef side to show page 2.
   

   

   
   

3. Set the desired Import settings. Click OK.
   

   

   
   

4. Run in CGI Player. When the button is clicked, the scene should display page 2.

   

Adobe XD Importing

Description

In this section, explain about Adobe XD file format, its layer structure and naming part and the importing example by using the concrete sample file.

---

Layer Structure and Naming Guideline

As same as PSD file format, the SmartImporter's AI will analyze imported files to detect/propose and create Controls for the solution. Thus, again recommended to keep Adobe XD layer format close to the standard Controls in Scene Composer. That naming guideline is as same as PSD, please refer to the Recommended Layers Structure for Smart Importer in detail. 

Additional naming conventions exist for efficient import of AdobeXD files, such as the below.

Control: Text

Text layer will be set as Text Control as same as AxureRP and Sketch.

Control: Tell Tale

The layer group name has a suffix of "_telltale" and has a child image layer will be set as Tell Tale Control.

Control: TextButton

The layer that has either the below condition will be set as TextButton Control. There is a child text layter in a group layer. A Text layer, that name has a suffix of "_Button".

AdobeXD Features Supported by CGI Studio Smart Importer

The Smart Importer supports importing of following Adobe XD features:

Artboards

Each AdobeXD Artboard is converted into a Scene in SceneComposer.

Components

Adobe XD has a component system, where components can be defined once, and instantiated multiple times. If an artboard references a component, the Adobe XD converter looks up and instantiates components as needed.

Texts

Adobe XD text areas are converted into Text Nodes in SceneComposer.

The Smart Importer will read the configuration of the AdobeXD text and apply the following properties to the SceneComposer Text Node:

Please also see section Text Controls of the Adobe XD import example.

Images

Adobe XD shapes ("type": "shape") with a pattern fill (a fill of "type": "solid") are converted to RenderNodes.

The Smart Importer will apply the following properties to the SceneComposer RenderNode:

Solid Rectangles

Rectangles (shapes of "type": "rect") with a solid fill (a fill of "type": "solid") are converted to SolidColorNodes.

The following properties will be applied to the SceneComposer SolidColorNode:

Please also see section Rectangle of the Adobe XD import example.

Buttons

If the Adobe XD resource contains a group, the name of which ends with _Button, the Smart Importer will create a TextButton.

The Smart Importer will apply the following properties to the SceneComposer TextButton:

Transitions

Adobe XD supports building interactive prototypes with serveral kinds of transitions. A button may trigger a navigation transition to a different artboard, a component may support transitions between different states etc. SceneComposer supports button-triggered scene transitions generated from artboard transitions in the XD file.

Please also see section Transition of the Adobe XD import example.

TellTales

Smart Importer creates a TellTale Control for an Adobe XD group, whose name ends with _TellTale. If this group contains an image with OnState or OffState in its name, this image will be set as the TellTale Control's On State Image or Off State Image respectively.

Please also see section Tell Tale Control of the Adobe XD import example.

---

Adobe XD import example

Please get the mentioned sample Adobe XD file in the below location.

Using this sample, explain about the layer structure and restrictions for Adobe XD.

"...\cgi_studio_content\2D\XD\XD_SampleCluster.xd"

Rectangle

Though there is a polygon in the group "Next_Button" of the sample, that isn't imported into a Solution in Scene Composer. This is because a rectangle shape is only supported for importing.

Text Controls

Text layer will be set as Text Control as same as other file format. In this sample, the following layer are text layers.

Tell Tale Control

Since there is "TellTale" group in the sample file and that group name has a suffix of "_telltale", its child image layers are set as Tell Tale Control.

Transition

The transition setting that is created by Adobe XD is transferred to State Machine editor.

Other options

If necessary, please change the setting on "Import to folder" and its related options. And, mark "Resize Display Resolution" option just in case.

Perform Player

After set the above, press OK button on Smart Importer dialog to proceeding import. Then, press "Play" button with "Generate and Play" option. Player application is run, and uncheck "Scenes#Scene2D" section and then you could get the importing result. If you press "change view" button in the right bottom corner, you can make transition to the other scene accordingly to the transition in Adobe XD.

Figma

Smart Importer can import Figma data. This page explains how to to import Figma data with Smart Importer and how to work with the results. 

Please note that you cannot import Figma data for which you do not have editing privileges.

---

Preparations for Importing Figma Data

Software Environment

The following software is needed in order to perform Figma data imports with Smart Importer:

　Node.js (Supported versions: Only 18.x.x and 19.x.x)

Preparing the URL/Access Token

In order to perform Figma data imports with Smart Importer, a URL and Access Token that corresponds with the Figma Data needs to be acquired in advance. 

The URL and Access Token can be acquired using the Figma desktop application as below.

Please ensure you have access to the Figma REST API (https://api.figma.com). In case of connectivity issue, please contact your IT as it might be blocked by a firewall.

Acquiring the URL

At the topmost bar in the Figma desktop application, right-click the relevant project tab and from the context menu select [Copy  Link]. 

Acquiring the Access Token

1. In the Figma desktop app, select [ Figma Icon > Help and Account > Account Settings ] to open the dialog.
   
   
   
   
2. In the Security tab of the dialog, click [ Generate new token ] under Personal access tokens.
   
   
   
   
3. In the "Generate new token" dialog, set the Token name, Expiration, and Scopes, and then click [ Generate token ].
   
   
   
   
4. The created access token will be displayed under Personal access tokens on the Security tab of the dialog.
   
   

The instructions on how to obtain the URL and access token are for Figma Desktop App version 125.10.8.

---

How to Import Figma Data

1. From the Scene Composer toolbar select [Import] > [Smart Importer] > [From Cloud Resource...], and a new dialog panel titled [Import from cloud resource] will be displayed. 

2. Enter the URL and Access Token in the respective fields and click [OK]. Please refer to「Preparing the URL/Access Token」 for acquiring the URL and Access Token. 

3. The Smart Importer dialog panel will open. Operating Smart Importer here is no different to when importing other filetypes. For details, please see 「3. Scene Composer > Import of Resources > Smart Importer > How to Use the Smart Importer」. After making the necessary setting adjustments and clicking [OK], the data will be imported into the folder designated in [Import to folder: ].

If the URL or Access Token entered in the "Import from cloud resource" dialog is incorrect (or inappropriate), the import will be interrupted, and the following error dialog will appear.

API access limits vary depending on your subscription plan. Therefore, if that limit is exceeded, the import will be interrupted and the following error dialog will be displayed. Please check Figma’s official website for details on each plan.

---

Importing Figma Data - Advanced

Importing as a scene

The topmost item of each page included in the Figma data will be imported into Smart Importer as a scene. For this, use the following naming convention: <Page name>_<Parent item name>

Relationship between Figma items and Scene Composer Nodes 

When importing Figma items with Smart Importer, each item will be imported as a specific type of node, as seen in the table below.

		Scene Composer node type
		Group	Bitmap	Text
Figma item type	Component	✓
	ComponentSet	✓
	Ellipse		✓
	Frame	✓
	Group	✓
	Instance	✓
	Line		✓
	Polygon		✓
	Rectangle		✓
	Section	✓
	Slice		✓
	Star		✓
	Text			✓
	Vector		✓

Bitmaps and texts can only be imported when their render data is made available. For example, should a Figma item be set to "hidden", it cannot be imported. 

Importing as Controls or Bitmaps

It is possible with Smart Importer to import as a control or bitmap any Figma items that can hold the following child items:

• Component
• ComponentSet
• Frame
• Group
• Instance
• Section

Importing as a control

An item can be imported as a control when it is named [SC_<control name>]. Furthermore, property values can also be set when using the names of control properties for the names of child items.

This functionality is only supported with Touchable and Common controls.

Importing as bitmaps

Smart Importer can import group items with child items as bitmaps when the the group item name is prefixed with [SC_Bmp].

---

Import as state machine

Flows (transitions) in Figma are imported as state machines. 

• After import, the flow name will be prefixed with [StateMachine<flow name>].
  
• After import, names of states will be the same as the Figma items that were imported as scenes. 
  

• Transitions will begin from the state that is set to be the Flow Starting Point.
  

• Multiple Flows can be imported as multiple state machines. 
  

Should a transition in one Flow be included in a separate Flow (ie. when a transition is duplicated), the separate Flow will not be imported. 

Although in Figma the type of interaction that triggers a transition can be selected (click, drag, mouse hover, etc.), Scene Composer will upon import set these transition triggers in the following way: Event = "Clicked", Condition = "Check Click".

---

Importing a Layout

Auto layout

If a Figma Frame has an "Auto layout" set, it will be imported as a "Stack Layout" in Scene Composer, and each setting value of the Auto layout will be inherited as a Stack Layout property.

Figma Auto layout settings are inherited as properties of the Stack Layout of Scene Composer:

	Auto layout （Figma）	Stack Layout propertise （Scene Coposer）
1	Direction	Stack Layout [ Layouter > Arrangement ]
	Direction Arrangement Vertical layout Vertical Horizontal layout Horizontal Wrap
2	Gap	The node that is placed second or later in the Stack Layout  [Layout > Margin > Left or Top ]
	Direction Margin Vertical layout Top Horizontal layout Left Wrap
3	Alignment	Nodes included in a Stack Layout [ Layout > VerticalAlignment and HorizontalAlignment ]
4	Padding (Horizontal)	The node to be placed at the leftmost position of the Stack Layout [ Layout > Margin > Left ]
5	Padding (Vertical)	The node to be placed at the most top of the Stack Layout [ Layout > Margin > Top ]

Below is an example of Auto layout (horizontal) from Figma imported into Scene Composer.

Text Layout

When Figma text layer is imported in Scene Composer, a Group node with LayoutType "Overlay" is created, and a text node is created under it. 

Also, the Typography Alignment of the text layer from Figma is inherited as a layout property of the text node in Scene Composer.

---

The example file of Figma

This section describes how to use the instrument cluster as a Figma design file example. The example file is stored in the following location.

<root>/cgi_studio_content/2D/Figma/AI_Cluster_Sample.fig

Due to technical limitations, Figma design files cannot be opened directly in CGI Studio. For this reason, the first step is to import them into your personal Figma account.

1. Log-in your Figma account.
   
   
   
   
   
2. In your Figma account, click on "Import Files" and load the AI_Cluster_Sample.fig file.
   
   
   
   
   
3. The AI_Cluster_Sample.fig will be uploaded to your account.
   
   
   
   
   
4. After uploading, you will see AI_Cluster_Sample in the file.
   
   
   
   
   

To import this sample file using the Smart Importer, select the Import from Cloud option from the menu and follow the settings. See Figma for import instructions.

Automatic Imports

If necessary, it is possible to configure monitored folders for automatic imports - both images and fbx files. To use this feature it is mandatory to enable it. This operation is possible in two different ways:

1. By checking the "Enable automatic import" box in the "Automatic Imports Configuration" panel (see the image below). This window can be opened through the menu "Import" - "Configure Automatic Imports..."
   
   

   Each item in "Automatic Import Configuration" dialog allows you to set the details of automatic import.
   

   Monitored Folder	Set the folder for monitoring
   Import Destination	Set the destination folder for import.
   Include subfolders	Enable this option if you want to monitor files under the sub-folders of the folder you set as the Monitoring Folder.
   Sync on startup	Enable this option allows you that [ Auto Import ] dialog box will appear when the solution is started and when this configuration is performed to synchronize the monitored folders.

   The "configuration is performed" is the following two timming.
   - Enable [ Sync on start ] on "Automatic Imports Configuration" dialog but if any synchronization hasn't been done at a solution startup.
   - If [ Sync on startup ] is changed from disabled to enabled.

   
   
2. By checking the "Enable automatic import" box in the General Configuration section of the "Solution Options" panel (see the image bellow):
   
   

When the content of a folder is modified, SceneComposer notifies that there are pending imports and the user can choose to import the new/modified files with "preview changes" or "without preview changes". "Without preview" means that the import cannot be stopped. With "Preview Changes" the usual import workflow is meant.

The configured paths are specific for each solution and are saved in

	USER_DIR\ AppData\Roaming\SceneComposer\Solutions\

Best practice for using this feature is that the user should configure the folders that will be monitored in such a matter that they only contain image files or fbx files and the images needed by the fbx. If the modified files in the folder on disk contain a fbx file, only a FBX import will be done, so any images files modified that are not needed by the fbx will not be imported.

Image Update

Image Update

This feature allows importing whole folders of images instead of only images. After importing, the imported folder and the subfolders have the same structure in the solution as the source folders that were used for import.

Open "Image Update" dialog via the menu to update the images.

In the "Image Update" dialog the solution's folder containing the images to be updated can be selected using the "Solution Folder" dropdown-menu. The folder that contains the images to update the ones in the solution with can be selected using the "Select Update Folder..." button. By clicking on the "Read Folder" button, the selected folder and its subfolders are recursively scanned for images to import. A warning is shown in case the folder is empty or does not contain any images.

The images can be searched by different criteria selectable from the "Search by" dropdown-menu. The options that are selectable in the dropdown-menu correspond to the column headers of the table below it in which the names of the images are shown. If a text is inserted in the textfield (the search is case-insensitive) to the right of the dropdown-menu, the according search result found in the column defined by the value in the dropdown-menu is shown.

The available options in the "Search by" dropdown-menu are:

The checkbox "Add new images" selects if only existing images should be updated or newfound ones should be added to the solution as well.

The content of the image comparison can be saved in CSV (Comma Separated Values) format by clicking the "Save Report..." button. A "Save Image Update Report" dialog appears which allows selecting the name and the location of the CSV file.

If the folder used to update the solution with contains less images than the solution itself, only the images that are found in that folder are updated. The other images are shown in the report as "Missing images" and are not changed.

---

Summary of the update process

After updating the images, a summary is opened showing the performed actions. The content of the summary can be saved in CSV (Comma Separated Values) format by clicking the "Save Report..." button. A "Image Update Summary" dialog appears which allows selecting the name and the location of the CSV file.

glTF Files

This section provides additional information on the use of glTF files.

Animations

There is a working sample available showing the usage of glTF animations. For this, please refer to Physically Based Rendering Solution

Interpolation animation is available, however Morphing and the channel path "weights" are not available.

Animation of:

Also, the following Interpolation strategies are available:

In glTF rotation angles are specified in quaternions, for usage in CGIStudio, the values are converted to Euler-angles.

For a more detailed description on animations please refer to the Khronos website: animations. For a more detailed description on interpolation types please refer to the Khronos website: animation sampler.

---

SDK version

The glTF importer uses the Microsoft glTF-SDK in version v1.9.1.0. It can be downloaded from Github.

---

Reference models

A reference model that is being used is the boombox. The glTF file is available at the folder cgi_studio_content/3D/glTF/.　Available reference models can be found at: The Khronos website: glTF Sample Models.

Supported glTF Extensions and Multi UV

Scene Composer’s glTF import supports the following glTF 2.0 extensions as well as multiple UV sets (Multi UV).

KHR_lights_punctual	Imports point, spot, and directional lights defined in the glTF file as lights in Scene Composer.
KHR_materials_anisotropy	Reproduce materials with anisotropic highlights, such as brushed metal.
KHR_materials_clearcoat	Reproduces materials that have a clear-coat layer (clear paint).
KHR_materials_ior	Specifies the Index of Refraction (IOR) and improves refraction for materials such as glass.
KHR_materials_iridescence	Represents iridescence effects where the color changes depending on the viewing and incident angles.
KHR_materials_specular	Supports materials that independently control the intensity and color of specular reflection.
KHR_materials_unlit	Supports “unlit” materials that are not affected by lighting calculations.
KHR_texture_transform	Interprets UV transforms such as offset, scale, and rotation per texture.
KHR_materials_emissive_strength	This extension scales the emissive color or texture by a scalar emissiveStrength factor, allowing materials to represent much brighter emission, especially in HDR rendering environments.
KHR_materials_sheen	This extension adds a sheen layer on top of an existing PBR material to simulate soft, fabric-like highlights caused by fine microfibers such as cloth or velvet.

Even when UV sets other than `uv0` are specified in these extensions, Scene Composer imports multiple UV sets (Multi UV) and assigns them to the corresponding textures.

Limitations

• In ES 2.0 environments, due to the limitations of ES 2.0, importing some sample glTF files that use these extensions may not produce the expected visual results.

• Some extensions, such as KHR_materials_anisotropy, KHR_materials_iridescence, KHR_materials_specular, KHR_materials_ior, KHR_materials_emissive_strength and KHR_materials_sheen cannot be used together with KHR_materials_unlit by design.

• Meshes that use KHR_materials_anisotropy must have normal and   tangent attributes, or the base material must have a normal map. If these conditions are not met, the anisotropy effect may not be rendered correctly.

For details on the properties and parameters of each extension, refer to the glTF 2.0 extension specifications provided by Khronos.

---

Pyhsically Based Shading (PBS)

On the imported 3d model the metal roughness material model is applied. If no IBL textures are defined a default material is applied. The shaders are provided for OpenGL ES 2.0 and 3.0.

In SceneComposer the properties are called differently from the glTF standard:

The following properties of the appearance and shader are automatically set by the Importer, but can also be configured manually:

Uniforms:

 Textures:

Details of the imported appearance are shown in the scene tree:

Mesh:

Uniform Setter:

Optimization tips:

For a more detailed description on Pysically Based Rendering please refer to the Khronos website: metallic roughness.

---

Useful links

Khronos References

Khronos Specification

Viewers

Skinning

Since CGI 3.14, skinning animations can be played by importing skinning FBX or glTF files. However, the following limitations exist.

• The maximum number of joints associated with each vertex is 4.
  
• If the number of joints associated with a skinning mesh is 100 or less, skinning is performed using a shader.
  
• If the number of joints associated with the skinning mesh is 101 to a maximum of 255, skinning processing will be performed on the CPU, but performance will decrease.
  
• CGI Studio manages rotation using Euler, so it may not be possible to reproduce the animation.
  
• If SkinningMesh and the SkinningMesh's parent Transform are not identity matrices and the SkinningMesh's posture does not give the expected result, please set the identity matrix for SkinningMesh and the SkinningMesh's parent Transform.
  
• If SkinningMesh and Joint Nodes are placed under a Group, the changes made in the Group's Transform will be applied to the SkinningMesh twice.

In addition to the above, please note the following limitations when importing skinning in FBX file format.

• FBX format FbxSkin::eDualQuaternion and FbxSkin::eBlend are not supported.
  
• FbxCluster::eAdditive in FBX format is not supported.
  

SkinningMesh

Note that you can create a SkinningMesh that can be used on Scene Composer by importing an FBX/glTF file that contains at least one skinning. The properties of a SkinningMesh created by importing is as follows.

Skin (Common Properties)

Line Width	It is only added if the [ Import as wireframe ] option is enabled when importing an FBX file that contains skinning. This specifies the line width of the mesh when it is rendered as wire. The actual line width is determined by rounding the specified width to the nearest integer. If the setting is less than “1”, it is always set to “1”.
Enable CPU Skinning	Specifies if CPU Skinning is enabled or not. If enabled, vertex shaders other than those provided for skin can be used with Skinning Mesh.  Note: CPU skinning calculations are slow and should thus be avoided. If enabled, the shader must be edited or configured so that skinning is not done in the shader.

Other Properies items

The following property items are set at importing and cannot be changed.

Joint Node	Sets a joint node.
Enable Inverse Bind Matrix	Specifies if Inverse Bind Matrix is enabled or not. If enabled, then the joint uses the Inverse Bind Matrix. If disabled, then the joint uses the identity matrix.
Inverse Bind Matrix	Used to bring coordinates being skinned into the same space as joint.

Adding imported scenes

Import of FBX or glTF files, including skinning, is performed using the standard procedure (FBX import procedure, glTF import procedure). After importing, creating new scenes and animations  from the scenes and animations contained in the imported resources.

1. Select a scene contained in the imported resource and choose [ Add Scene From Template... ] from the context menu.
   • The [ Add New Scene 3D ] dialog will appear.
     
   • For more information on  the  [ Add Scene From Template... ]  feature, see here.
     
2. Make the necessary settings on the [ Add New Scene 3D ] dialog and press [ OK ] button.
   • The scene will be added as a new scene in the Solution Explorer panel, in the Solution>Scenes folder.
   • The scene tree panel will display the added scene.
     
     
     

SkinningMesh is added to the imported scene (red frame in the right figure above). 

If the imported scene does not contain any camera or light nodes, add them to the new scene from Node 3D in the Toolbox panel and make the necessary settings.

Add Render Target

Adds the camera of the added scene to the render target.

When a camera node is added

1. Displays the Render Targets panel.
   
   • A camera with the added scene name has already been added in the panel.
     
     
2. Check the checkboxes for the added cameras.

If the imported scene contains a camera

1. In the Render Targets panel, select Render Target and then [ Add Camera to Render Target... ] from the context menu.
   
   • The [ Choose Item ] dialog will appear.
     
     
2. Expand the Scenes folder in the [ Choose Item ] dialog and select the cameras in the scene you added.
   
   
3. Press the [ OK ] button in the dialog.

Add imported animations

To play the skinning animation in Player, add the animation in the imported resource.

1. Select an animation contained in the imported resource and choose [ Add Animation From Template... ] from the context menu.
   • The [ Add New Animations ] dialog will appear.
     
   • For more information on  the  [ Add Animation From Template... ]  feature, see here.
     
     
2. Make the necessary settings on the [ Add New Animations ] dialog and press [ OK ] button.
   • The scene will be added as a new scene in the Solution Explorer panel, in the Solution>Animations folder.
     
     
     

Play skinning animation

Player is used to play back skinning animations in a composed scene.

1. Press the [ Play selected scenario... ] icon on the toolbar to launch Player.
   
   • If you have not saved the solution before this operation, the [ Save Solution ] dialog will appear and you will be asked to save the solution.
   • By pressing the [ OK ] button in the dialog, the asset file will be automatically generated and opened in CGI Player.
     
     
2. In the CGI Panel, check the target scene from the scene list on the left side.
   
   
   
   
   
3. Select the animation to be played from the toolbar pull-down menu.
   
   
   
   
   
4. Press the Play button on the toolbar to execute the animation playback.
   
   • The skinning animation specified in the display panel is played.