スプライトツール†
複数の画像を組み合わせてアニメーションさせる「スプライト」を作成することができるツールです。
スプライトは、タイトル画面やメニュー画面での動く演出や、会話シーンでのキャストの表情変化などに使用できます。
リソース＞スプライトも参考にしてください。
各機能の説明†
スプライトリスト†
登録されているスプライトセット・モーションのリストが表示されます。
- スプライトセット追加ボタン
- モーション追加ボタン
「スプライトセット」は複数の「モーション」をまとめる”フォルダ”のようなものです。
「モーション」は画像や音によって構成されるスプライトで表示されるそのものです。
「スプライトセット」を追加すると自動的に1つ「モーション」が作成されます。
- コンテキストメニュー
項目を選んで右クリックするとコンテキストメニューが表示されます。
項目のコピーや削除、複製などができます。
スプライトプレビュー†
作成中のアニメーションが再生されるエリアです。
スプライトリストでモーションを選択するとプレビューが表示されます。
プレビュー欄の上部にプレビューの各種設定がまとまっています。
なおプレビューの中心座標は(0,0)ですのでご注意ください。
- スケール
プレビューのスケールを変更します。マウスのセンターホイールでも操作できます。
- スクリーンマーカー
ゲーム定義＞プロジェクト設定＞実行時解像度に設定されている画面サイズと同比率の枠が表示されます。
- レイヤーマーカー
レイヤー番号を示すマーカーが表示されます。
プレビュー上でレイヤーマーカーをドラッグすることでそのレイヤーの表示位置を変えることができます。
- レイヤーマーカー(選択レイヤーのみ）
タイムラインで選択中のレイヤーのマーカーのみが表示されます。
このボタンをオンにするとレイヤーマーカーボタンはオフに切り替わります。
- ターゲットイメージ
プレビュー上にスプライトの位置を決めるための目安となるイメージを表示することができます。
例えばキャストの上にスプライトを表示する場合、ターゲットとしてキャストの画像を置くことで適切な位置調整ができます。
- 背景
プレビューの背景にイメージを表示することができます。
- ターゲットからの位置
ターゲットに指定したイメージに対してどこにスプライトの原点を配置するのかを変更できます。
- 位置シフト
全てのレイヤーの位置をまとめて上下左右にシフトさせることができます。
タイムライン†
- タイムライン上部メニュー
- レイヤー追加ボタン
レイヤーを追加します。
- マスクレイヤー追加ボタン
マスクレイヤーを追加します。
- フレーム追加ボタン
空のキーフレームをタイムラインの一番最後に追加します。
- コピーボタン
選択しているレイヤー/キーフレーム/セルをコピーします。
タイムラインの一番上の行（秒）の欄をクリックするとキーフレーム全体を選択できます。
- ペーストボタン
コピーしたものをペーストします。
- 削除ボタン
選択しているレイヤー/キーフレーム/セルを削除します。
- 再生ボタン
タイムラインで設定しているアニメーションをプレビュー上で再生します。
- 停止ボタン
アニメーションのプレビューを停止します。
- ループボタン
オンにするとアニメーションをループ再生します。
- スライダー
サム（つまみ）をドラッグすることでアニメーションの再生位置を変更することができます。
- コンテキストメニュー
タイムラインのどこを選択しているか、によってコンテキストメニューの内容が変わります。
- レイヤー名セル
レイヤーのコピーや貼り付け、挿入ができます。
レイヤーの順番の入れ替えは+/-ボタンでも行えます。
- キーフレーム((秒)セルを選択する)
キーフレームのコピーや貼り付け、挿入ができます。
- それ以外のセル
セルの内容のコピーや貼り付けができます。
- タイムライン
スプライトの動きのタイミングや表示するイメージを設定します。
アニメーションのキーフレーム（列）のタイミングで、レイヤーに設定した画像がどのような状態になっているかを設定していきます。
- (秒)
キーフレームのタイミングを秒単位に変換したものが表示される行です。
- 開始フレーム
キーフレームが始まるタイミングをフレーム（1/60秒）単位で指定する行です。
- フレーム数
このフレームが表示されるフレーム数です。
フレーム数を変更すると、変更したキーフレーム以降のキーフレームの開始フレームも自動的に変化します。
- 画面フラッシュ
指定した色と透明度で、画面全体をフラッシュさせます。
- 対象フラッシュ
「エフェクトの表示」「感情マークの表示」パネルでこのスプライトを表示する際、「表示位置」で指定したターゲットを指定した色と透明度でフラッシュさせます。
このスプライトをスキルのエフェクトに指定した際はスキルの使用者、アイテムのエフェクトに指定した際はアイテムの使用先がターゲットとなります。
- 効果音
アニメーション時に再生するSEを設定します。
- レイヤー
- ロックボタン
ロックするとプレビュー上でレイヤーマーカーをドラッグしても位置が動かなくなります。
ただしプロパティーでの値の変更は反映されます。
- 表示/非表示ボタン
プレビュー上でのレイヤーの表示状態を表示/非表示/半透明で切り替えることができます。
- マスク対象/非対象ボタン
マスクレイヤーが存在する場合にのみ表示されます。
レイヤーがマスクの影響を受けるかどうかを切り替えることができます。
- マスクレイヤー
マスクレイヤーはその影響化にあるレイヤーを切り抜くレイヤーです。
マスクを参照してください。
セルの変化情報†
タイムラインにて、「画面フラッシュ」以下のセルを選択すると、スプライトツール右側に表示されます。
ここでは選択したセルが存在するキーフレームの時点での、レイヤーの表示内容を設定することができます。
- 色
設定した画像の色の色彩や透明度の変化情報を設定します。
表示するイメージの元の色に対して、指定した色が乗算されます。
マスクレイヤーでは色情報は変更できません。
- 位置
画像の表示位置や変化方法を設定します。
(!)Z位置は表示プライオリティを示します。
例えばZ位置「1」のレイヤーは全てのZ位置「0」レイヤーよりも手前に描画されます。
Z位置の変更には補間は効きません。
- スケール
画像のスケールや変化方法を設定します。
スケールにマイナスを入れるとイメージがフリップ（反転）します。
- 補間方法の選択ダイアログ
色/位置/スケール/回転の変化方法を指定する際、このダイアログが開きます。
前のキーフレームで設定した値から今設定しているキーフレームの値に変化する動きをどのように補間するかを指定することができます。
「変更しない」を選ぶと、その要素の動きについて影響を与えません。
「補間なし」を選ぶと、つなぎの動きをせずにパッと切り替わります。
(!)キーフレームが2つある場合、最初のキーフレームから次のキーフレームにどう変化するか、を設定していることにご注意ください。
そのため補間方法は「動きの終わりにあたるキーフレーム」で指定してください。
- イメージ
使用する画像と割り当てるコマの座標を設定します。
- コマX/コマY
指定するイメージが"CountSlice"に設定されている場合、イメージの中のどのコマを使うかを指定します。
イメージのスライス方法はリソース＞イメージで設定できます。
イメージのプレビューをクリックして直接コマを指定することもできます。
- アルファ値を反転
マスクに指定したイメージのアルファ値を反転します。
マスクレイヤーでのみ設定できる項目です。
- その他
効果音を設定すること出来ます。
効果音レイヤーでのみ設定できます。
マスク†
マスクは、マスクレイヤーに登録したイメージでその影響化にあるレイヤーを切り抜いて表示する機能です。
正方形や円といったマスクに使いやすい図形のイメージがreservedフォルダ＞Primitiveにありますのでご活用ください。
- マスクレイヤーの影響範囲
タイムライン上「マスクレイヤーより上の行」に設定されたレイヤーがそのマスクの影響を受けます。
マスクレイヤーが2つある場合はそれぞれの上の行に設定されたレイヤーがマスクの影響を受けます。
マスクレイヤーは「影響下にあるレイヤー」に対してのみ有効であることに注意してください。
- 複数マスクレイヤーがある場合の例
- 緑の画面を覆う長方形（Screen_1280）をイメージに設定したレイヤー2は、円形の画像（Circle）をイメージに設定したマスクレイヤー1の影響を受けています。
- 青の画面を覆う長方形（Screen_1280）をイメージに設定したレイヤー4は、三角形の画像（Triangle）をイメージに設定したマスクレイヤー3の影響を受けています。
- アルファ値を反転
「アルファ値を反転」をオンにすると、マスクレイヤーに指定したイメージで影響化のレイヤーがくりぬかれます。
- レイアウトツールでの活用
レイアウトツールの描画コンテナなどのプロパティー「表示演出」で、マスクレイヤーを持つスプライトを指定すると、スプライトの動きだけでなくマスク情報も活用されます。
レイアウトパーツの説明を参照してください。
アニメーションデータの作成方法†
ここでは、キャラクターの目パチ、口パクアニメの作成方法を例に、アニメーションデータの作成方法を説明します。
１．マスターメニューから「リソース管理」を開く。
２．２Dスタンプ→イメージを選択します。
３．「追加」をクリックし、任意の画像を選択してインポートを完了させます。ここではキャラクター本体、目パーツ、口パーツの３つをインポートします。
アニメーションする画像は、「テクスチャの設定」で「スライス」をCountSliceに設定、縦横をアニメパターンの数に分割します。
この場合は横分割数が２、縦分割数を７と設定します。会話シーンで利用するデータは、テクスチャの設定のSRGBのスイッチをOFFにしてください。
５．「２Dスタンプ」→「スプライト」を選択します。
６．「追加」をクリックすると画像選択画面が開くので、ベース画像を選択します。
7.ベース画像が読み込まれたら、画面右上の「編集」をクリックして、アニメーションツールを起動します。
8.アニメーションツールが起動したら、ベース画像を表示したい位置に移動します。（枠線が画面のサイズになります。）
9.レイヤーを追加して、アニメーションさせたい部位の画像を割り当てます。ここではレイヤー２に「口」、レイヤー３に「目」を設定します。
画像が画面に表示されたら、マウスまたはカーソルキーでアニメーションさせたい位置に合わせます。
プレビュー画像はマウスのセンタースクロールで拡大縮小ができます。レイヤー名横の目のアイコンをクリックすると、選択しているレイヤーを半透明化することができます。
10.「フレーム追加」ボタンをクリックして、フレームをふたつ追加し、フレーム０に設定した「目」と「口」のレイヤーを横にコピーします。
11.真ん中のフレームの「目」と「口」のレイヤーにフォーカスを合わせて、任意の表情のコマに変更します。
12.再生時間（フレーム）を設定します。ここでは、真ん中のフレームは１、最後のフレームを30とします。これで再生すると、以下のようなアニメが完成します。
![[PukiWiki]](./skin/BAKIN_logo_92.png "[PukiWiki]"){kind=logo}
