Sprite Tool

This tool allows you to create "sprites" that are animated by combining multiple images.
Sprites can be used to create moving effects on the title screen and menu screen, or to change the facial expressions of the cast in conversation scenes.
Please also refer to Resources > Sprites.

SpriteTool.png

Description of Each Function

Sprite List

A list of registered sprite sets and motions is displayed.

SpriteTool_SpriteList.png
 

Sprite Preview

This is the area where the animation being created will be played.
Selecting a motion in the sprite list displays a preview.
The various preview settings are grouped together at the top of the preview field.
Note that the center coordinates of the preview are (0,0).

SpriteTool_SpritePreview.png
 

Timeline

SpriteTool_TimeLine.png
 


Information on Cell Changes

In the Timeline, select a cell under "Screen Flash" to display it on the right side of the Sprite Tool.
You can specify what the layer shows at the keyframe where the selected cell exists.

SpriteTool_Properties.png
 

Mask

Mask is a function that crops and displays layers under the influence of an image registered in a mask layer.
Images of shapes that are easy to use for masks, such as a square or circle, can be found in the reserved folder > Primitive.

Mask_InvertAlphaValue.png
 

How to Create Sprite Data

Example of Creating a Transition to Battle

Let's use the Sprite Tool to create the following animation effect to be used when encounter battles occur and when transitioning from the map to the battle.

Howtocreate_Sprite.gif
 

1. Open the Sprite Tool and press the "Add" button in the sprite tree to open the Asset Picker.
Select "Screen_1280" in the Images > reserved folder > Primitive folder and press OK.
A sprite set and motion will be created, so change the name of the sprite set to "Battle Transitions" and the motion name to "Map to Battle.

Howtocreate_Sprite_1.png
 

2. The Screen_1280 you just opened is registered as an image on Layer 1.
This should be the strip that is placed at the bottom of the screen.
Click on the first frame cell of Layer 1 and specify the following values in the Properties field on the right side of the screen.
(Feel free to change the colors.)|BOLD:Layer 1||h

ColorColor Change Method: No Interpolation, red: 255, green: 87, blue: 51, Transparency: 255
PositionPosition Change Method: No Interpolation, Position X: 1280, Position Y: 270, Position Z: 0
ScaleScale Change Method: No Interpolation, Scale X: 100, Scale Y: 25
RotationRotation Change Method: Maintain
Howtocreate_Sprite_2.png
 

3. Let's add layers to create three more strips.
Press the Layer Add button to add layer 2, 3, and 4.

Howtocreate_Sprite_3.png
 

4. Copy (Ctrl+C) the first frame cell of Layer 1 and paste (Ctrl+V) it into the first frame cell of Layers 2-4.

Howtocreate_Sprite_4.png
 

5. Shift the position of layers 2-4 and change the color of each.
Select the first frame cell on each layer, and change the "Position" setting of the properties as follows.
You do not need to change any other parameters except for color and position.

Layer 2
ColorColor Change Method: No Interpolation, red: 255, green: 141, blue: 0, Transparency: 255
PositionPosition Change Method: No Interpolation, Position X: 1280, Position Y: 90, Position Z: 0
Layer 3
ColorColor Change Method: No Interpolation, red: 255, green: 195, blue: 0, Transparency: 255
PositionPosition Change Method: No Interpolation, Position X: 1280, Position Y: -90, Position Z: 0
Layer 4
ColorColor Change Method: No Interpolation, red: 231, green: 76, blue: 60, Transparency: 255
PositionPosition Change Method: No Interpolation, Position X: 1280, Position Y: -270, Position Z: 0
 

Four different colored strips were created on the right side off the screen.

Howtocreate_Sprite_5.png
 

6. Create an animation to move the strips into the screen.
First, add a new keyframe by pressing the Add Frame button.
Specify "12" for the "Start Frame" of the added keyframe.
This means that you have assigned a "12 frame" animation between the first keyframe and the added keyframe.

Howtocreate_Sprite_6.png
 

7. Click on the frame cell of layer 1 of the added keyframe and specify the following values in the properties.
(You may copy the cells from the first keyframe and rewrite the properties.)

Layer 1
ColorColor Change Method: Maintain
PositionPosition Change Method: Ease-out 3x (Strong), Position X: 0, Position Y: 270, Position Z: 0
ScaleScale Change Method: Maintain
RotationRotation Change Method: Maintain
ImageImage to be used: Screen_1280

If you press the play button above the timeline, you should see an animation of the Layer 1 strip sliding across the screen.
"Ease-out 3x (Strong)" is specified for Position Change Method.
Note that the change method should be specified for the "frame that marks the end of the animation".

Howtocreate_Sprite_7.png
 

8. Layer 2 to 4 should be animated in the same way.
Each layer should slide into the screen with different timing.
Press the Add Frame button three times to add three key frames.

Howtocreate_Sprite_8.png
 

9. Copy the frame cell in layer 1 of the second keyframe from the beginning created in step 6, and copy it to the frame circled in red in the figure below.
Adjust "Position Y" in the properties of the destination cell.

Layer 2Position Y: 90
Layer 3Position Y: -90
Layer 4Position Y: -270
Howtocreate_Sprite_9.png
 

10. Adjust the timing of when each layer is finished moving.
Enter a value for the "Number of Frames" for each keyframe. You may change the value freely.
(!)Timing can also be adjusted with "Start Frame," but note that the order of the keyframes will change back and forth depending on the value you put in.
For example, if keyframe 5 has a faster start timing value than keyframe 4, the order is switched.

Keyframe 212
Keyframe 312
Keyframe 46
Keyframe 51 (No change)
Howtocreate_Sprite_10.png
 

Press the playback button and watch the four strips cover the screen with different timing.
The "Sprite when Transitioning from the Map to the Battle Scene" is now complete.


11. Copy the first keyframe of the "Map to Battle" motion you just created (with the four strips off-screen on the right side).
You can use Ctrl+C, or you can copy from the copy button on the timeline or from the context menu.
For the context menu, select the top cell labeled keyframe (sec) and right-click.

Howtocreate_Sprite_11.png
 

12. Select the "Battle Transitions" sprite set you just created in the sprite tree and press the Add Motion button.
The Asset Picker will open, select "None" for the image, press OK, and add the motion.
The motion name should be changed to "From the Beginning to the Battle Scene".

Howtocreate_Sprite_12.png
 

13. Select the top cell of the first keyframe in the motion you added and paste the contents of the keyframe you just copied using Ctrl+V (or the paste button, etc.).
It is not possible to paste into a cell of a different type than the source cell.
ex.When you copy a cell in the sound effect layer, you can only paste it into a cell in the sound effect layer.

Howtocreate_Sprite_13.png
 

14. Select the cells in each layer and specify Position X: 0.
This will be the same as the last frame of the "Map to Battle" motion you just created.

Howtocreate_Sprite_14.png
 

15. Add a mask layer.
Select the "layer name cell" in Layer 1 and right-click. Select "Insert Mask Layer" from the context menu.
Mask Layer 1 is inserted and the layer numbers from Layer 1 to 4 change to Layer 2 to 5.
Layers 2 through 5 are all affected by mask layer 1.

Howtocreate_Sprite_15.png
 

16. Select the first keyframe cell in the mask layer and specify the following in its properties.
"Image to be Used" is "Circle" in the Images > reserved folder > Primitive folder.

Mask Layer 1
PositionPosition Change Method: Maintain
ScaleScale Change Method: No Interpolation, Scale X: 0, Scale Y: 0
RotationRotation Change Method: Maintain
ImageImage to be Used: Circle, Invert Alpha Value: On
 

By turning on "Invert Alpha Value" for an image, certain areas of the assigned image will be cropped.

Howtocreate_Sprite_16.png
 

17. Press the Add Frame button to add a keyframe.
Specify "30" for the start frame of the added frame.
Then copy the first keyframe cell of mask layer 1 to this keyframe cell and change its properties as follows.
Only the scale is changed.

Mask Layer 1
PositionPosition Change Method: Maintain
ScaleScale Change Method: Ease-in (Acc.), Scale X: 150, Scale Y: 150
RotationRotation Change Method: Maintain
ImageImage to be Used: Circle, Invert Alpha Value: On
 
Howtocreate_Sprite_17.png
 

Press the play button and you should see an animation of a circular window expanding from the center of the screen.
Try the Start Frame Timing and Scale Change Method.
Also, changing the "Image to be Used" will change the shape of the cropped image, so change it to something you like.

 Now "Sprite when Transitioning from the Beginning of the Battle Scene to the Battle Scene" is also complete.


18. Open the Asset Picker from "When Starting Battles" in the Game Definition > System Resources and assign the sprite "Map to Battle" that you just created.
(!)As of Ver. 1.9, a new sprite set created with the Sprite Tool may be in the reserved folder.
This will enable the screen to be covered with four colored strips when transitioning from the map to the battle.

Howtocreate_Sprite_18.png
 

19. The transition from the beginning of the battle to the battle scene is specified in the Battle Event.
Create the following battle event in the Common Event Palette or Common Event Editor.

"Display in Center of Screen" is specified for the Display Position, and "Wait to Complete" is set to On.

Howtocreate_Sprite_19.png
 

This completes the transition to the battle scene using sprites.

How to Create Eye Blinks and Lip Synch

When creating cast data to be used in conversation events, etc., please follow the rules below for the layer names of eye blinks and lip synch.

SpriteTool_eye_mouth.png
 

Attach file: fileSpriteTool_Properties.png 14 download [Information] fileSpriteTool_SpritePreview.png 16 download [Information] fileSpriteTool.png 17 download [Information] fileSpriteTool_eye_mouth.png 17 download [Information] fileHowtocreate_Sprite_19.png 14 download [Information] fileHowtocreate_Sprite_18.png 14 download [Information] fileHowtocreate_Sprite_17.png 12 download [Information] fileHowtocreate_Sprite_16.png 13 download [Information] fileHowtocreate_Sprite_15.png 14 download [Information] fileHowtocreate_Sprite_14.png 15 download [Information] fileHowtocreate_Sprite_13.png 14 download [Information] fileHowtocreate_Sprite_12.png 16 download [Information] fileHowtocreate_Sprite_11.png 13 download [Information] fileHowtocreate_Sprite_10.png 16 download [Information] fileHowtocreate_Sprite_9.png 13 download [Information] fileHowtocreate_Sprite_8.png 15 download [Information] fileHowtocreate_Sprite_7.png 15 download [Information] fileHowtocreate_Sprite_6.png 14 download [Information] fileHowtocreate_Sprite_5.png 15 download [Information] fileHowtocreate_Sprite_4.png 17 download [Information] fileHowtocreate_Sprite_3.png 16 download [Information] fileHowtocreate_Sprite_2.png 15 download [Information] fileHowtocreate_Sprite_1.png 15 download [Information] fileHowtocreate_Sprite.gif 16 download [Information] fileMask_1.png 17 download [Information] fileMask_InvertAlphaValue.png 15 download [Information] fileSpriteTool_Easing.png 18 download [Information] fileSpriteTool_TimeLine.png 18 download [Information] fileSpriteTool_SpriteList.png 20 download [Information] filespritetool02.png 18 download [Information] filespritetool03.png 166 download [Information] filespritetool01.jpg 150 download [Information] filespritetool09.jpg 181 download [Information] filespritetool13.gif 148 download [Information] filespritetool08.jpg 156 download [Information] filespritetool12.jpg 164 download [Information] filespritetool04.png 171 download [Information] filespritetool10.jpg 145 download [Information] filespritetool07.jpg 164 download [Information] filespritetool14.png 159 download [Information] filespritetool11.jpg 177 download [Information]

Front page   Edit Freeze Diff History Attach Copy Rename Reload   New Page list Search Recent changes   Help   RSS of recent changes
Last-modified: 2024-05-24 (Fri) 07:55:52