スプライトツール の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• スプライトツール へ行く。
• スプライトツール の差分を削除

#author("2023-03-09T10:30:52+00:00","default:admin","admin")
#author("2024-04-24T10:18:11+09:00","default:admin","admin")
*スプライトツール [#s1884601]

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

#ref(./スプライトツール.png,50%)

#contents
**アニメーションデータの作成方法 [#be66be9e]
ここでは、キャラクターの目パチ、口パクアニメの作成方法を例に、アニメーションデータの作成方法を説明します。

#ref(spritetool02.png)
#ref(spritetool-jp.png)


１．マスターメニューから「リソース管理」を開く。

２．２Dスタンプ→イメージを選択します。

３．「追加」をクリックし、任意の画像を選択してインポートを完了させます。ここではキャラクター本体、目パーツ、口パーツの３つをインポートします。


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

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

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



５．「２Dスタンプ」→「スプライト」を選択します。

６．「追加」をクリックすると画像選択画面が開くので、ベース画像を選択します。

#ref(spritetool07.jpg)


7.ベース画像が読み込まれたら、画面右上の「編集」をクリックして、アニメーションツールを起動します。

#ref(spritetool08.jpg)

8.アニメーションツールが起動したら、ベース画像を表示したい位置に移動します。（枠線が画面のサイズになります。）

#ref(spritetool09.jpg)

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

画像が画面に表示されたら、マウスまたはカーソルキーでアニメーションさせたい位置に合わせます。

プレビュー画像はマウスのセンタースクロールで拡大縮小ができます。レイヤー名横の目のアイコンをクリックすると、選択しているレイヤーを半透明化することができます。


#ref(spritetool10.jpg)


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


#ref(spritetool11.jpg)


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


#ref(spritetool12.jpg)


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


#ref(spritetool13.gif)


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

***アニメーションプレビュー [#e68c0848]
作成中のアニメーションが再生されるエリアです。

:再生|選択中のアニメーションを再生します。

:スケール|アニメーションプレビューエリアのスケールを変更します。マウスのセンターホイールでも操作可能です。

:マーカー|ゲーム定義→プロジェクト設定→実行時解像度に設定されている画面サイズと同比率の枠が表示されます。

:ループ|ONにしておくと、アニメーションをループ再生することができます。

:ターゲット|プレビューエリアに表示する基準画像の選択を行います。

:背景|プレビューエリアの背景画像の選択を行います。

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

:秒|設定されたフレーム数がおよそ何秒で再生されるかを表示します。

:フレーム|設定値を何フレームで再生するかを入力します。

:画面フラッシュ|指定した色と透明度で、画面全体をフラッシュさせます。

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

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

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

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

#ref(spritetool14.png)


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

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

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

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

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