#author("2021-09-08T06:18:07+00:00;2021-09-08T06:17:10+00:00","","")
*スプライトツール [#b975171f]
#author("2024-05-14T11:26:32+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(spritetool01.jpg)
#ref(./SpriteTool.png,50%)

SMILE GAME BUILDERにあったエフェクトエディターの機能強化版です。SMILE GAME BUILDERでは魔法エフェクトの作成専用でしたが、BAKINではスプライトエディターで作成したデータを、マップ、会話シーン、バトルシーン、各画面のレイアウトなど、様々な場所で利用できるようになりました。
#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.

**アニメーションデータの作成方法 [#be66be9e]
ここでは、キャラクターの目パチ、口パクアニメの作成方法を例に、アニメーションデータの作成方法を説明します。
***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(spritetool02.png)
#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.

２．２Dスタンプ→イメージを選択します。
-''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.

#ref(spritetool03.png)
#ref(spritetool04.png)
　　
-''Position Shift''
You can shift the position of all layers together, up, down, left, or right.

アニメーションする画像は、「テクスチャの設定」で「スライス」をCountSliceに設定、縦横をアニメパターンの数に分割します。

この場合は横分割数が２、縦分割数を７と設定します。''会話シーンで利用するデータは、テクスチャの設定のSRGBのスイッチをOFFにしてください。''
***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.

５．「２Dスタンプ」→「スプライト」を選択します。
--''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.

#ref(spritetool07.jpg)
--''Paste button''
Paste what you have copied.

--''Delete button''
Delete the selected layer/keyframe/cell.

7.ベース画像が読み込まれたら、画面右上の「編集」をクリックして、アニメーションツールを起動します。
--''Play button''
The animation specified on the timeline is played back on the preview.

#ref(spritetool08.jpg)
--''Stop button''
Stop the animation preview.

8.アニメーションツールが起動したら、ベース画像を表示したい位置に移動します。（枠線が画面のサイズになります。）
--''Loop button''
When turned on, the animation is played in a loop.

#ref(spritetool09.jpg)
--''Slider''
By dragging the thumb (knob), the playback position of the animation can be changed.

9.レイヤーを追加して、アニメーションさせたい部位の画像を割り当てます。ここではレイヤー２に「口」、レイヤー３に「目」を設定します。
----
-''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).

#ref(spritetool10.jpg)
--''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.

10.「フレーム追加」ボタンをクリックして、フレームをふたつ追加し、フレーム０に設定した「目」と「口」のレイヤーを横にコピーします。
--''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.

#ref(spritetool11.jpg)
--''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.

11.真ん中のフレームの「目」と「口」のレイヤーにフォーカスを合わせて、任意の表情のコマに変更します。
---''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.

#ref(spritetool12.jpg)

***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

12.再生時間（フレーム）を設定します。ここでは、真ん中のフレームは１、最後のフレームを30とします。これで再生すると、以下のようなアニメが完成します。
-''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.

#ref(spritetool13.gif)
-''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.

**各機能の説明 [#q8712a71]
***アニメーションリスト [#id26eb96]
登録されているアニメーションの一覧が表示されます。
--''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

***アニメーションプレビュー [#e68c0848]
作成中のアニメーションが再生されるエリアです。
-''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.

:ループ|ONにしておくと、アニメーションをループ再生することができます。
-''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.

***タイムライン [#a089e977]
アニメーション情報を設定します。設定可能なアニメーションは最大60秒で１秒が60フレームになります。
-''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.

:対象フラッシュ|指定した色と透明度で、ターゲットをフラッシュさせます。

:効果音|アニメーション時に再生するSEを設定します。

:レイヤー|表示したい画像および表示方法について設定します。レイヤーの数値が小さいほど奥に表示され、最大○まで作成することができます。

:レイヤーの半透明化|アイコンをクリックすると、そのレイヤーを明度を変更/非表示にすることができます。

#ref(spritetool14.png)


***レイヤーの変化情報 [#gd2f9731]
:色変化方法|設定した画像の色の色彩や透明度の変化情報を設定します。

:位置|画像の表示位置や変化方法を設定します。

:スケール|画像のスケールや変化方法を設定します。

:回転|画像の回転変化方法と角度の設定をします。

:イメージ|使用する画像と割り当てるコマの座標を設定します。


*Sprite Tool [#i55e70fe]

This is an enhanced version of the effects editor from SMILE GAME BUILDER.  While SMILE GAME BUILDER was dedicated to the creation of magic effects, now BAKIN allows you to use data created with the Sprite Editor in a variety of places, including maps, conversation scenes, battle scenes, and the layout of each screen.



**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.

#ref(spritetool02.png)

1.  Open "Resource Management" from the master menu.

2.  Select 2D Stamps -> Images.

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.

#ref(spritetool03.png)
#ref(spritetool04.png)


　　

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.

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.



5.  Select "2D Stamps" -> "Sprites".

6.  Click "Add" to open the image selection window, and select a base image.

#ref(spritetool07.jpg)


7.  Once the base image is loaded, click "Edit" in the upper right corner of the screen to launch the animation tool.

#ref(spritetool08.jpg)


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(spritetool09.jpg)


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.

When the image appears on the screen, use the mouse or cursor keys to position it where you want it to animate.

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.

#ref(spritetool10.jpg)




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(spritetool11.jpg)




11.  Focus on the "eyes" and "mouth" layers of the middle frame, and change the frame to the desired expression.

#ref(spritetool12.jpg)




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.

#ref(spritetool13.gif)




**Explanation of Each Function [#kf33141c]
***Animation List [#xe5514a2]
The list of registered animations will be displayed.

***Animation Preview [#pde50ea9]
This is the area where the animation you are creating will be played.

:Play|Play the currently selected animation.

:Scale|Change the scale of the animation preview area. Can also be controlled with the center wheel of the mouse.

:Marker|A frame with the same ratio as the screen size set in Game Definition -> Project Settings -> Runtime Resolution will be displayed.

:Loop|If it is turned on, the animation can be played in a loop.

:Target|Select the base image to be displayed in the preview area.

:Background|Select the background image for the preview area.

***Timeline [#yf9a6482]
Set the animation information. The maximum number of animations that can be set is 60 seconds, and 1 second is 60 frames.

:Seconds|Display the approximate number of seconds that the set number of frames will be played back.

:Frame|Enter the number of frames to play back the set value.

:Screen Flash|Flash the entire screen with the specified color and transparency.

:Target Flash|Flash the target with the specified color and transparency.

:Sound Effect|Set the SE to be played during animation.

:Layer|Set the image you want to display and how you want it to be displayed. The smaller the value of the layer, the farther it will be displayed, and you can create up to ○.

:Semi-transparency of Layers|Click on the icon to change/hide the brightness of the layer.



***Layer Change Information [#o17dd0c9]
:Color Change Method|Set the color hue and transparency change information of the set image.

:Position|Set the display position and change method of the image.

:Scale|Set the scale and change method of the image.

:Rotation|Set the rotation change method and angle of the image.

:Image|Set the image to be used and the coordinates of the frame to be assigned.
Front page   New Page list Search Recent changes   Help   RSS of recent changes