![[PukiWiki]](./skin/BAKIN_logo_92.png "[PukiWiki]"){kind=logo}
SMILE GAME BUILDERにあったエフェクトエディターの機能強化版です。SMILE GAME BUILDERでは魔法エフェクトの作成専用でしたが、BAKINではスプライトエディターで作成したデータを、マップ、会話シーン、バトルシーン、各画面のレイアウトなど、様々な場所で利用できるようになりました。
ここでは、キャラクターの目パチ、口パクアニメの作成方法を例に、アニメーションデータの作成方法を説明します。
１．マスターメニューから「リソース管理」を開く。
２．２Dスタンプ→イメージを選択します。
３．「追加」をクリックし、任意の画像を選択してインポートを完了させます。ここではキャラクター本体、目パーツ、口パーツの３つをインポートします。
アニメーションする画像は、「テクスチャの設定」で「スライス」をCountSliceに設定、縦横をアニメパターンの数に分割します。
この場合は横分割数が２、縦分割数を７と設定します。会話シーンで利用するデータは、テクスチャの設定のSRGBのスイッチをOFFにしてください。
５．「２Dスタンプ」→「スプライト」を選択します。
６．「追加」をクリックすると画像選択画面が開くので、ベース画像を選択します。
7.ベース画像が読み込まれたら、画面右上の「編集」をクリックして、アニメーションツールを起動します。
8.アニメーションツールが起動したら、ベース画像を表示したい位置に移動します。（枠線が画面のサイズになります。）
9.レイヤーを追加して、アニメーションさせたい部位の画像を割り当てます。ここではレイヤー２に「口」、レイヤー３に「目」を設定します。
画像が画面に表示されたら、マウスまたはカーソルキーでアニメーションさせたい位置に合わせます。
プレビュー画像はマウスのセンタースクロールで拡大縮小ができます。レイヤー名横の目のアイコンをクリックすると、選択しているレイヤーを半透明化することができます。
10.「フレーム追加」ボタンをクリックして、フレームをふたつ追加し、フレーム０に設定した「目」と「口」のレイヤーを横にコピーします。
11.真ん中のフレームの「目」と「口」のレイヤーにフォーカスを合わせて、任意の表情のコマに変更します。
12.再生時間（フレーム）を設定します。ここでは、真ん中のフレームは１、最後のフレームを30とします。これで再生すると、以下のようなアニメが完成します。
登録されているアニメーションの一覧が表示されます。
作成中のアニメーションが再生されるエリアです。
アニメーション情報を設定します。設定可能なアニメーションは最大60秒で１秒が60フレームになります。
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.
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.
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.
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.
7. Once the base image is loaded, click "Edit" in the upper right corner of the screen to launch the animation tool.
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.)
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.
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.
11. Focus on the "eyes" and "mouth" layers of the middle frame, and change the frame to the desired expression.
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.
The list of registered animations will be displayed.
This is the area where the animation you are creating will be played.
Set the animation information. The maximum number of animations that can be set is 60 seconds, and 1 second is 60 frames.
