![[PukiWiki]](./skin/BAKIN_logo_92.png "[PukiWiki]"){kind=logo}
#author("2024-05-14T11:26:32+09:00","default:admin","admin") #author("2024-05-24T16:55:52+09:00","default:admin","admin") *Sprite Tool [#i55e70fe] 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]]. #ref(./SpriteTool.png,50%) #contents **Description of Each Function [#nbfb04bc] ***Sprite List [#nb1bc424] A list of registered sprite sets and motions is displayed. #ref(./SpriteTool_SpriteList.png,60%) #br -''Sprite Set Add button'' -''Motion Add button'' A "sprite set" is like a folder that contains multiple "motions". "Motion" is that which is displayed in a sprite composed of images and sounds. When a "sprite set" is added, one "motion" is automatically created. -''Context Menu'' Select an entry and right-click to display a context menu. You can copy, delete, or duplicate entries. ***Sprite Preview [#lf56e101] 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). #ref(./SpriteTool_SpritePreview.png,60%) #br -''Scale'' Changing the scale of the preview. It can also be operated with the center wheel of the mouse. -''Screen Marker'' A frame with the same ratio as the screen size specified in Game Definition > Project Settings > Run-Time Resolution will be displayed. -''Layer Marker'' A marker indicating the layer number appears. By dragging a layer marker on the preview, you can change the display position of that layer. - ''Layer Marker (selected layer only)'' Only the markers of the currently selected layer on the timeline are displayed. When this button is turned on, the Layer Marker button is toggled off. -''Target Image'' An image can be displayed on the preview as a guide to determine the position of the sprite. For example, when displaying a sprite over a cast, proper positioning can be achieved by placing an image of the cast as the target. -''Background'' An image can be displayed in the background of the preview. -''Position from Target'' You can change where the sprite origin is placed in relation to the image you have assigned as the target. -''Position Shift'' You can shift the position of all layers together, up, down, left, or right. ***Timeline [#m0ccf80e] #ref(./SpriteTool_TimeLine.png,60%) #br -''Timeline Top Menu'' --''Layer Add button'' Add a layer. --''Mask Layer Add button'' Add a mask layer. --''Frame Add button'' Add an empty keyframe to the very end of the timeline. --''Copy button'' Copy the selected layer/keyframe/cell. Click on the top row (seconds) field of the timeline to select the entire keyframe. --''Paste button'' Paste what you have copied. --''Delete button'' Delete the selected layer/keyframe/cell. --''Play button'' The animation specified on the timeline is played back on the preview. --''Stop button'' Stop the animation preview. --''Loop button'' When turned on, the animation is played in a loop. --''Slider'' By dragging the thumb (knob), the playback position of the animation can be changed. ---- -''Context Menu'' The content of the context menu changes depending on where in the timeline is selected. --''Layer Name Cell'' You can copy, paste, and insert layers. The order of layers can also be rearranged using the +/- buttons. --''Select Keyframe (sec) Cell'' You can copy, paste, and insert keyframes. --''Other Cells'' You can copy and paste cell contents. ---- -''Timeline'' Specify the timing of the sprite's movement and the image to be displayed. Specify the state of the image set on the layer at the timing of the animation keyframes (columns). --''(sec)'' This line displays the keyframe timing converted to seconds. --''Start Frame'' This row assigns the timing of the start of the key frame in frames (1/60 second). --''Number of Frames'' This is the number of frames that will be displayed. When the number of frames is changed, the start frame of keyframes after the changed keyframe is also automatically changed. --''Screen Flash'' Flash the entire screen with the color and transparency you assign. --''Target Flash'' When displaying this sprite in the "[[Display Effect:https://rpgbakin.com/pukiwiki_en/?Conversation#q215e2a1]]" and the "[[Display Emoticon:https://rpgbakin.com/pukiwiki_en/?Conversation#o21dbd58]]" panels, the target assigned by "Display Position" is flashed with the assigned color and transparency. When this sprite is assigned to the effect of a skill, the target is the user of the skill, and when the sprite is assigned to the effect of an item, the target is the destination of the item. --''Sound Effect'' Specify the sound effect to be played during animation. --''Layer'' ---''Lock button'' Once locked, dragging the layer marker on the preview will not move its position. However, changes to values in properties are reflected. ---''Show/Hide button'' You can toggle the visibility of layers on the preview by showing/hiding/transparency. ---''Masked/Unmasked button'' It is displayed only when a mask layer exists. You can toggle whether the layer is affected by the mask. --''Mask Layer'' A mask layer is a layer that crops the layers in its influence. See the [[Mask:https://rpgbakin.com/pukiwiki_en/?Sprite+Tool#o0c3cb83]] section for more information. ***Information on Cell Changes [#abfe04fe] 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. #ref(./SpriteTool_Properties.png,60%) #br -''Color'' Specify the color hue and transparency change information for the set image. The assigned color is multiplied by the original color of the image to be displayed. Color information cannot be changed in the mask layer. -''Position'' Specify where the image will be displayed and how it will change. ''&color(red){(!)};'' The Z position indicates the display priority. For example, a layer with Z-position "1" will be rendered forward of all Z-position "0" layers. Interpolation does not work for Z-position changes. -''Scale'' Specify the scale of the image and how it will change. A minus sign in the scale flips the image. -''Rotation'' Specify the angle of the image and how it will change. --''Interpolation Method Selection Dialog'' This dialog box opens when assigning how to change color/position/scale/rotation. You can assign how to interpolate the movement from the value specified in the previous keyframe to the value in the current keyframe. If "Maintain" is selected, it has no effect on the movement of that element. When "No Interpolation" is selected, the image switches instantly without any connecting movement. ''&color(red){(!)};'' Note that if there are two keyframes, you are specifying how the keyframe changes from the first keyframe to the next. Therefore, the interpolation method should be assigned to ''the keyframe at the end of the movement''. #br #ref(./SpriteTool_Easing.png,60%) #br -''Image'' Specify the image to be used and the coordinates of the slice to be assigned. --''Slice X / Slice Y'' If the image specified is set to "CountSlice," assigns which of the slices in the image will be used. The image slicing method can be set in Resources > [[Images]]. You can also click on the image preview to directly assign a slice. --''Invert Alpha Value'' Invert the alpha value of the image assigned to the mask. This option can be set only on the mask layers. -''Other'' You can specify a sound effect. Only sound effects can be set in the sound effect layer. **Mask [#o0c3cb83] 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 Layer Influence Range'' Layers specified in the "row above the mask layer" on the timeline will be affected by the mask. If there are two mask layers, the layer specified on the row above each is affected by the mask. Note that the mask layer is only valid for the "layer under influence". --''Example of Multiple Mask Layers'' #ref(./Mask_1.png,60%) #br ---Layer 2, which specifies a rectangle (Screen_1280) as the image covering the green screen, is affected by mask layer 1, which specifies a circular image (Circle) as the image. ---Layer 4, which specifies a rectangle (Screen_1280) as the image covering the blue screen, is affected by mask layer 3, which specifies a triangle (Triangle) as the image. -''Invert Alpha Value'' When "Invert Alpha Value" is turned on, the layer of influence is cropped with the image assigned to the mask layer. #ref(./Mask_InvertAlphaValue.png,60%) #br -''Use in Layout Tool'' If a sprite with a mask layer is assigned in the Layout Tool's Rendering Container and Other Properties > "Effects," not only the sprite's movement but also its mask information will be utilized. Please read the [[layout parts:https://rpgbakin.com/pukiwiki_en/?Types+of+Layout+Parts+and+Properties#LayoutTool_Effects]] for more information. **How to Create Animation Data [#ne24b0b2] In this section, we will explain how to create animation data, taking as an example how to create a character's eye blink and lip-sync animation. **How to Create Sprite Data[#ne24b0b2] ***Example of Creating a Transition to Battle [#a6eb302f] 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. #ref(./Howtocreate_Sprite.gif,40%) #br #ref(spritetool02.png) -- In this example, the game screen size is assumed to be 1280x720. 1. Open "Resource Management" from the master menu. -- In this example, the following two sprites are created for the transition from map to battle. --- Sprite when Transitioning from the Map to the Battle Scene --- Sprite when Transitioning from the Beginning of the Battle Scene to the Battle Scene 2. Select 2D Stamps -> Images. ---- - ''&size(16){Sprite when Transitioning from the Map to the Battle Scene};'' Four rectangles (strips) come in from the right side of the screen at different time intervals to create a sprite that covers the screen. 3. Click "Add" and select the desired images to complete the import. In this section, we will import the character body, eye parts, and mouth parts. ''&size(16){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. #ref(spritetool03.png) #ref(spritetool04.png) #ref(./Howtocreate_Sprite_1.png,40%) #br For the image to be animated, set "Slice" to CountSlice in "Texture Settings," and divide the height and width into the number of animated patterns. ''&size(16){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 |BOLD:Color|Color Change Method: No Interpolation, red: 255, green: 87, blue: 51, Transparency: 255| |BOLD:Position|Position Change Method: No Interpolation, Position X: 1280, Position Y: 270, Position Z: 0| |BOLD:Scale|Scale Change Method: No Interpolation, Scale X: 100, Scale Y: 25| |BOLD:Rotation|Rotation Change Method: Maintain| In this case, set the number of horizontal divisions to 2 and the number of vertical divisions to 7. For data used in conversation scenes, please turn off the SRGB switch in the texture settings. #ref(./Howtocreate_Sprite_2.png,40%) #br ''&size(16){3.};'' Let's add layers to create three more strips. Press the Layer Add button to add layer 2, 3, and 4. #ref(./Howtocreate_Sprite_3.png,40%) #br 5. Select "2D Stamps" -> "Sprites". ''&size(16){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. 6. Click "Add" to open the image selection window, and select a base image. #ref(./Howtocreate_Sprite_4.png,40%) #br #ref(spritetool07.jpg) ''&size(16){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. |BOLD:Layer 2||h |BOLD:Color|Color Change Method: No Interpolation, red: 255, green: 141, blue: 0, Transparency: 255| |BOLD:Position|Position Change Method: No Interpolation, Position X: 1280, Position Y: 90, Position Z: 0| 7. Once the base image is loaded, click "Edit" in the upper right corner of the screen to launch the animation tool. |BOLD:Layer 3||h |BOLD:Color|Color Change Method: No Interpolation, red: 255, green: 195, blue: 0, Transparency: 255| |BOLD:Position|Position Change Method: No Interpolation, Position X: 1280, Position Y: -90, Position Z: 0| #ref(spritetool08.jpg) |BOLD:Layer 4||h |BOLD:Color|Color Change Method: No Interpolation, red: 231, green: 76, blue: 60, Transparency: 255| |BOLD:Position|Position Change Method: No Interpolation, Position X: 1280, Position Y: -270, Position Z: 0| #br Four different colored strips were created on the right side off the screen. 8. Once the animation tool is activated, move the base image to the position where you want it to appear. (The border will be the size of your screen.) #ref(./Howtocreate_Sprite_5.png,40%) #br #ref(spritetool09.jpg) ''&size(16){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. 9. Add a layer and assign the image of the part you want to animate. Here, we will assign "mouth" to layer 2 and "eyes" to layer 3. #ref(./Howtocreate_Sprite_6.png,40%) #br When the image appears on the screen, use the mouse or cursor keys to position it where you want it to animate. ''&size(16){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.) The preview image can be zoomed in and out by scrolling the center of the mouse. Click on the eye icon next to the layer name to make the selected layer semi-transparent. |BOLD:Layer 1||h |BOLD:Color|Color Change Method: Maintain| |BOLD:Position|Position Change Method: Ease-out 3x (Strong), Position X: 0, Position Y: 270, Position Z: 0| |BOLD:Scale|Scale Change Method: Maintain| |BOLD:Rotation|Rotation Change Method: Maintain| |BOLD:Image|Image to be used: Screen_1280| #ref(spritetool10.jpg) 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". #ref(./Howtocreate_Sprite_7.png,40%) #br ''&size(16){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. 10. Click on the "Add Frame" button to add two frames, and copy the "Eyes" and "Mouth" layers set to frame 0 to the side. #ref(./Howtocreate_Sprite_8.png,40%) #br #ref(spritetool11.jpg) ''&size(16){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. |BOLD:Layer 2|Position Y: 90| |BOLD:Layer 3|Position Y: -90| |BOLD:Layer 4|Position Y: -270| #ref(./Howtocreate_Sprite_9.png,40%) #br 11. Focus on the "eyes" and "mouth" layers of the middle frame, and change the frame to the desired expression. ''&size(16){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. ''&color(red){(!)};''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. #ref(spritetool12.jpg) |BOLD:Keyframe 2|12| |BOLD:Keyframe 3|12| |BOLD:Keyframe 4|6| |BOLD:Keyframe 5|1 (No change)| #ref(./Howtocreate_Sprite_10.png,40%) #br Press the playback button and watch the four strips cover the screen with different timing. ''&size(16){The "Sprite when Transitioning from the Map to the Battle Scene" is now complete.};'' ---- - ''&size(16){Sprite when Transitioning from the Beginning of the Battle Scene to the Battle Scene};'' Starting at the end of "Sprite when Transitioning from the Map to the Battle Scene," a mask is used to create a sprite with a circular window expanding from the center. 12. Set the playback time (frames). In this example, the middle frame is set to 1 and the last frame to 30. When you play it back, you will get an animation like the one below. ''&size(16){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. #ref(spritetool13.gif) #ref(./Howtocreate_Sprite_11.png,40%) #br ''&size(16){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". #ref(./Howtocreate_Sprite_12.png,40%) #br ''&size(16){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. #ref(./Howtocreate_Sprite_13.png,40%) #br ''&size(16){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. #ref(./Howtocreate_Sprite_14.png,40%) #br ''&size(16){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. #ref(./Howtocreate_Sprite_15.png,40%) #br ''&size(16){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. |BOLD:Mask Layer 1||h |BOLD:Position|Position Change Method: Maintain| |BOLD:Scale|Scale Change Method: No Interpolation, Scale X: 0, Scale Y: 0| |BOLD:Rotation|Rotation Change Method: Maintain| |BOLD:Image|Image to be Used: Circle, Invert Alpha Value: On| #br By turning on "Invert Alpha Value" for an image, certain areas of the assigned image will be cropped. #ref(./Howtocreate_Sprite_16.png,40%) #br ''&size(16){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. |BOLD:Mask Layer 1||h |BOLD:Position|Position Change Method: Maintain| |BOLD:Scale|Scale Change Method: Ease-in (Acc.), Scale X: 150, Scale Y: 150| |BOLD:Rotation|Rotation Change Method: Maintain| |BOLD:Image|Image to be Used: Circle, Invert Alpha Value: On| #br #ref(./Howtocreate_Sprite_17.png,40%) #br 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. ''&size(16){Now "Sprite when Transitioning from the Beginning of the Battle Scene to the Battle Scene" is also complete.};'' ---- - ''&size(16){Specify the Created Sprites};'' Specify the two sprites you have created so far to be played when entering a battle. ''&size(16){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. ''&color(red){(!)};''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. #ref(./Howtocreate_Sprite_18.png,40%) #br ''&size(16){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:https://rpgbakin.com/pukiwiki_en/?Common+Events]]. --- Event start condition is "At the Beginning of Battle". --- In the [[Display Effect:https://rpgbakin.com/pukiwiki_en/?Conversation#q215e2a1]] panel, assign the "From the beginning to the battle scene" that you just created. "Display in Center of Screen" is specified for the Display Position, and "Wait to Complete" is set to On. #ref(./Howtocreate_Sprite_19.png,40%) #br ''This completes the transition to the battle scene using sprites.'' ***How to Create Eye Blinks and Lip Synch [#df9a9c6c] 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. -Layer name to place the animation for eye blinks: eyes -Layer name to place the animation for lip synch: mouth #br By naming these layers, the following [[Input Support:https://rpgbakin.com/pukiwiki_en/?Text+Decoration/Command+Input+Support]]effects, which can be used in the [[Display Conversation:https://rpgbakin.com/pukiwiki_en/?Conversation#k7420ba8]] panel, etc., will be applied. -- Blink Speed \blspd[sec] -- Blink Rate \blate[%] -- Lip-synch Speed \lipspd[%] #br Open the motion of the "chr001" sprite set from the Sprite Tool and use it as a reference for your creation. #ref(./SpriteTool_eye_mouth.png,40%) #br
