Spine Editor - Tuorial
Regarding the translation
This document was translated by ChatGPT-4, and the content may contain inaccuracies.
Basics¶
Loading or Creating Configuration Files¶
Loading Configuration Files¶
- Open EX Studio, click on Spine Editor.
-
Select a Json file, or select the model folder and click on the Json file in the file list.
Tip
You can load a new configuration file through the File Explorer.
Creating Configuration Files¶
- Open EX Studio, click on Spine Editor, and select the folder containing the model.
- Click Create Configuration File, enter a file name, select the skeleton, add texture atlases and images, and click Confirm.
- Go to the Configuration File tab, where you can view the contents of the newly created Json configuration file.
Adjusting Model Size and Display¶
- Open the Json Editor.
- Select Options, then adjust the model's initial position using Position X/Position Y.
- Select Options, then adjust the Scale Factor. The default value is 1. If the loaded model appears too large, lower this value; if it appears too small, increase it.
-
Select Options, then adjust the Anisotropic Filtering Level. The default value is 1. If the loaded model exhibits display issues (e.g., black edges at the mouth corners), increase this value. Note that higher values increase performance costs, and it is recommended not to exceed 4.
Note
The above properties are only meant as a troubleshooting method if the model is too large, too small, or has display issues. Generally, no adjustment is required.
Adding Expression Files¶
- Open the Json Editor.
-
Select Expression and click in the list to select the expression file you want to add.
Note
Only expressions added here can be correctly recognized in Motions.
Adding Idle Motions¶
- Open the Json Editor.
- Create a New Motion Group: Select Motions, click in the Motion Group list, and in the pop-up dialog, choose Idle under the predefined options. Click Confirm.
- Create a New Motion: Click in the Motions list, then locate File in the newly created motion content page. Click the icon on the right and select a motion as the idle motion.
- If you want to add multiple idle motions, repeat the previous step.
- Click Confirm, then check the effect in the Spine Editor.
Adding Global Click Events¶
- Open the Json Editor.
- Create a New Motion Group: Select Motions, click the icon in the Motion Group list, and in the pop-up dialog, choose Tap under the predefined options. Click Confirm.
- Create a New Motion: Click the icon in the Motions list, then locate File in the newly created motion content page. Click the button on the right and select a motion as the click motion.
- If you want to add multiple click motions, repeat the previous step.
-
Click Confirm, then check the effect in the Spine Editor.
Tip
If the click event includes audio or text, you can find Sound in the motion content page, click the button on the right to select an audio file, and input the desired text in the Text field.
Adding Local Click Events¶
- Go to the Artmesh tab, click on a list item to display the corresponding artmesh area (highlighted in green), and find the area where you want to set the click event. Note down the artmesh name.
- Open the Json Editor.
- Create a New Hit Area: Select Hit Area, click in the list, and in the newly created project page, locate ID, click the icon on the right, and select the previously noted artmesh name. If needed, enter a Hit Area name in the Name field.
- Create a New Motion Group: Select Motions, click in the Motion Group list, and in the pop-up dialog, choose TapArea under the predefined options. Select the Hit Area name created in the previous step and click Confirm.
- Create a New Motion: Click in the Motions list, then locate File in the newly created motion content page. Click the icon on the right and select a motion as the click motion.
- If you want to add multiple click motions, repeat the previous step.
-
Click Confirm, then check the effect in the Spine Editor.
Note
If both Local Click Events and Global Click Events are set, Local Click Events will take priority. Clicking outside the trigger area will activate the Global Click Event.
Advanced¶
Simultaneous Playback of Multiple Motion Groups¶
Simultaneously Playing Multiple Idle Motions¶
- Create Idle Motion Group 1, keep the Layer default (leave it blank), and add an idle motion.
- Create Idle Motion Group 2, enter a number greater than 0 for the Layer, and add an idle motion.
- For additional idle motions, ensure that the Layer for each motion group is unique.
Simultaneously Playing Multiple Motions / Executing Motions Across Layers¶
- Create Motion Group 1, keep the Layer default (leave it blank), and add Motion A.
- Create Motion Group 2, enter a number greater than 0 for the Layer, and add Motion B.
-
Add the command start_mtn to Motion A, specifying Motion B. When Motion A executes, it will trigger Motion B. Since Motion B is on a different layer, both motions will play simultaneously.
Note
- Parameter values from higher-layer motions will override the same parameter values from lower-layer motions.
- Regardless of the layer, if no Idle Motion is set, the motion will stop at the last frame after playback.
Application of Floating-Point Variables - Toggle¶
- Create New Motion: Click in the Motions list to create two motion events and give each motion event a Name.
-
Add Floating-Point Variable Var (the name can be customized) to Motion 1:
- Condition: Set to Var equals 0, meaning this motion can only be executed when the value of Var equals 0.
-
Operation: Set to Var assigned to 1, meaning after the motion event is executed, the value of Var will be set to 1. In the next evaluation, since Var equals 1, the condition is not met, and this motion cannot be executed. Since the motion group only contains two motions, Motion 2 will be executed.
-
Add Floating-Point Variable Var (the name must be the same as in Motion 1) to Motion 2:
- Condition: Set to Var equals 1, meaning this motion can only be executed when the value of Var equals 1.
-
Operation: Set to Var assigned to 0, meaning after the motion event is executed, the value of Var will be set to 0. In the next evaluation, since Var equals 0, the condition is not met, and this motion cannot be executed. Since the motion group only contains two motions, Motion 1 will be executed.
Application Scenarios
- Expression Toggle: Add a facial expression to the first motion event and use the command clear_exp in the second motion event to clear the expression.
- Parameter Value Toggle: Use the command parameter set/lock in the first motion event to set a parameter value, and use the same command in the second motion event to restore the original value.
Application of Dialogue Options¶
- Create a Click Event as described in the tutorial above.
- Fill in the content to be displayed in the Text field of the motion properties.
- Go to the Options tab and click to create several options.
-
Fill in the Text for the options and assign the Motion to be executed after clicking each option.
Application Scenarios
Costume Change: Use the Motion property of the option to execute a change_cos related command.
Affection System¶
- Select Controller > Affection System and check the list item to activate the affection system.
- Fill in the relevant options according to the Affection System Properties, and it is recommended to at least fill out Initial Value, Minimum Value, and Maximum Value.
- Affection levels can be used to control the triggering of motion events. In the motion options, check Advanced > Affection Level and refer to the Motion Event Properties to fill in the relevant options.
Video Tutorials¶
Frequently Asked Questions¶
Model Display Issues¶
Go to Json Editor > Options > Shader and select a different shader.
Model Not Displayed / Incomplete Display¶
- The model might be positioned outside the preview window. Try scaling down and moving the model to locate it.
- Select an available Skin.
How to Set a Skin When the Model Loads / How to Switch Skins¶
Create a Start motion group, and add the command set_skins with the desired skin in the motion.
Missing Textures or Abnormal Display (Appears Pink)¶
The atlas file of the model might have an incorrect text format (possibly UTF-8 BOM, which adds unnecessary data). It should be in UTF-8. Convert the text format to UTF-8.