Smart Importer UI
This page describes the Smart Importer dialog. The Smart Importer dialog consists of the following four parts.
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.
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 value that is automatically set is set as follows.
- Pivot point X value: Image width of the target layer/2
- Pivot point Y value: image height of the target layer/2
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.
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 "image height of the target layer/2".
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.