スプライトツール

スプライトツール†

複数の画像を組み合わせてアニメーションさせる「スプライト」を作成することができるツールです。
スプライトは、タイトル画面やメニュー画面での動く演出や、会話シーンでのキャストの表情変化などに使用できます。
リソース＞スプライトも参考にしてください。

各機能の説明†

スプライトリスト†

登録されているスプライトセット・モーションのリストが表示されます。

• スプライトセット追加ボタン
• モーション追加ボタン
  「スプライトセット」は複数の「モーション」をまとめる”フォルダ”のようなものです。
  「モーション」は画像や音によって構成されるスプライトで表示されるそのものです。
  「スプライトセット」を追加すると自動的に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の影響を受けています。
     

• アルファ値を反転
  「アルファ値を反転」をオンにすると、マスクレイヤーに指定したイメージで影響化のレイヤーがくりぬかれます。

• レイアウトツールでの活用
  レイアウトツールの描画コンテナなどのプロパティー「表示演出」で、マスクレイヤーを持つスプライトを指定すると、スプライトの動きだけでなくマスク情報も活用されます。
  レイアウトパーツの説明を参照してください。

スプライトデータの作成方法†

バトルへのトランジションの作成例†

エンカウントバトルの発生時、マップからバトルへ移行する際に使う下記のアニメーション演出をスプライトツールを使って作成してみます。

• この例ではゲーム画面サイズは1280x720を想定しています。

• この例ではマップからバトルへ移行する際の演出として下記の2つのスプライトを作ります。
  • マップ上からバトルシーンに移行する際のスプライト
  • バトルシーンの冒頭からバトルシーンへ遷移する際のスプライト

---

• マップ上からバトルシーンに移行する際のスプライト
  　4つの長方形（帯）が画面右から時間差をつけて入ってきて画面を覆うスプライトを作ります。

1. スプライトツールを開き、 スプライトツリーで「追加」ボタンを押してアセットピッカーを開いてください。
イメージ＞resservedフォルダ＞Primitiveフォルダの「Screen_1280」を選んでOKを押します。
スプライトセットとモーションが作成されるので、スプライトセットの名前は「バトルトランジション」、モーション名は「マップからバトル」に変えておきましょう。

2. 先ほど開いたScreen_1280はレイヤー1のイメージとして登録されています。
　　これを画面一番下に置く帯にしましょう。
　　レイヤー1の最初のフレームセルをクリックし、画面右側のプロパティ欄で下記の値を設定してください。
　　（色は自由に変えていただいて構いません。）

3. さらに3つの帯を作るためにレイヤーを追加しましょう。
　　レイヤー追加ボタンを押してレイヤー2、3、４を追加してください。

4. レイヤー1の最初のフレームセルをコピー（Ctrl+C）し、レイヤー2～4の最初のフレームセルにペースト（Ctrl+V)します。

5. レイヤー2～4の位置をずらし、それぞれの色を変えましょう。
　　各レイヤーの最初のフレームセルを選択し、プロパティの「位置」の設定を下記のように変更します。
　　色と位置以外の項目は変えなくて構いません。

　4つの色の違う帯が、画面外右側にできました。

6. 帯を画面内に動かすアニメーションを作ります。
　　まずフレーム追加ボタンをおして、新しいキーフレームを追加します。
　　追加したキーフレームの「開始フレーム」に「12」を設定します。
　　これにより、最初のキーフレームから追加したキーフレームまでの間を「12フレーム」でアニメーションするように指定したことになります。

7. 追加したキーフレームのレイヤー1のフレームセルをクリックし、プロパティにて下記の値を設定をしてください。
　　（最初のキーフレームからセルをコピーし、プロパティーを書き換えても構いません。）

　タイムラインの上の再生ボタンを押してみると、レイヤー1の帯が画面の中にスライドしてくるアニメーションができているはずです。
　位置変化方法に「イーズアウト3x(強)」を設定しました。
　変化方法は「アニメーションの終点にあたるフレーム」に設定することに注意してください。

8. レイヤー2～4も同じようにアニメーションをつけていきましょう。
　　それぞれのレイヤーがタイミングずらしながら画面内にスライドしてくるようにします。
　　フレーム追加ボタンを3回押してキーフレームを3つ追加します。

9. 6.で作った先頭から2つ目のキーフレームのレイヤー1のフレームセルをコピーし、下の図の赤丸のフレームにコピーしていきましょう。
　　コピーした先のセルのプロパティで「位置Y」を調整します。

10. それぞれのレイヤーの移動が終わるタイミングを調整しましょう。
　　各キーフレームの「フレーム数」に値を入れていってください。値は自由に変更していただいて構いません。
　　(!)タイミングは「開始フレーム」でも調整可能ですが、入れる値によってキーフレームの順番が前後することに注意してください。
　　　　例えば、キーフレーム5にキーフレーム4より速い開始タイミングの値を入れると、順番が入れ替わります。　

　再生ボタンを押して、4つの帯がタイミングをずらしながら画面を覆うことを確認してください。
　これで「マップ上からバトルシーンに移行する際のスプライト」は完成です。

---

• バトルシーンの冒頭からバトルシーンへ遷移する際のスプライト
  　「マップ上からバトルシーンに移行する際のスプライト」の終わりの状態からスタートし、マスクを使うことで中心から円型の窓が広がっていくスプライトを作ります。

11. 先ほど作ったモーション「マップからバトル」の最初のキーフレーム（4つの帯が画面外右側にある状態）をコピーしましょう。
　　 Ctrl＋Cでもいいですし、タイムライン上のコピーボタンや、コンテキストメニューからコピーをしても構いません。
　　 コンテキストメニューはキーフレームの（秒）と書かれた一番上のセルを選択し、右クリックしてください。

12. スプライトツリーで先ほど作ったスプライトセット「バトルトランジション」を選択し、モーション追加ボタンを押しましょう。
　　 アセットピッカーが開くので、画像は「なし」を選択してOKを押し、モーションを追加します。
　　 モーション名は「冒頭からバトルシーンへ」に変えておきましょう。

13. 追加したモーションの最初のキーフレームの一番上のセルを選択し、Ctrl+V（もしくはペーストボタンなど）で先ほどコピーしたキーフレームの内容をペーストします。
　　 コピー元と違う種別のセルにはペーストできないようになっています。
　　 　ex.効果音レイヤーのセルをコピーした際は、効果音レイヤーのセルにしかペーストできません。

14. 各レイヤーのセルを選択し、位置X:0を設定してください。
　　これで先ほど作ったモーション「マップからバトル」の最後のフレームと同じ状態になります。

15. マスクレイヤーを追加します。
　　レイヤー1の「レイヤー名セル」を選択し、右クリック。コンテキストメニューから「マスクレイヤーを挿入」を選択します。
　　マスクレイヤー1が挿入され、レイヤー1～4までのレイヤー番号がレイヤー2～5に変化します。
　　レイヤー2～5は全てマスクレイヤー1の影響を受けるレイヤーになっています。

16. マスクレイヤーの最初のキーフレームのセルを選択し、プロパティに下記の設定をしてください。
　　「使用するイメージ」は、イメージ＞resservedフォルダ＞Primitiveフォルダの「Circle」です。

　イメージの「アルファ値を反転」をオンにすることで、指定したイメージのある箇所がくりぬかれるようになります。

17. フレーム追加ボタンを押してキーフレームを追加します。
　　　追加したフレームの開始フレームに「30」を設定してください。
　　　そのうえで、マスクレイヤー1の最初のキーフレームのセルをこのキーフレームのセルにコピーし、プロパティを下記のように変えてください。
　　　スケールのみ変更しています。

　再生ボタンを押すと、画面中央から円型の窓が広がっていくアニメーションが確認できるはずです。
　開始フレームのタイミングや、スケール変化方法してみてください。
　また「使用するイメージ」を変えるとくりぬかれる形が変わるので、気に入ったものに変更してみてください。

　これで「バトルシーンの冒頭からバトルシーンへ遷移する際のスプライト」も完成しました。

---

• 作成したスプライトをセットする
  これまで作成した2つのスプライトを、バトルに入った時に再生されるように設定します。

18. ゲーム定義＞システムリソースの「バトルに入った時」 からアセットピッカーを開き、先ほど作ったスプライト「マップからバトルへ」を指定します。
　　(!)Ver.1.9の時点では、スプライトツールで新規作成したスプライトセットがreservedフォルダに入っていることがあります。
　　　これでマップからバトルに移行する際、画面が4色の帯でおおわれる演出が入るようになります。

19. バトルの冒頭からバトルシーンへ移行する演出はバトルイベントで設定します。
コモンイベントパレットもしくはコモンイベントエディタで下記のバトルイベント作成してください。

• イベント開始条件は「戦闘開始時」
• エフェクトの表示パネルで、先ほど作成した「冒頭からバトルシーンへ」を指定します。
  　表示位置は「画面の中心に表示する」、「完了するまで待つ」はオンに設定します。

以上でスプライトを使ったバトルシーンへの遷移が完成しました。

目パチ・口パクの作成方法†

会話イベントなどで使うキャストのデータの作成時、、目パチや口パクのレイヤー名は下記のルールに従ってください。

• 目パチ用のアニメーションを置くレイヤー名 … eyes
• 口パク用のアニメーションを置くレイヤー名 … mouth
   
  このレイヤー名にすることで、会話を表示パネルなどで使える下記の制御文字の効果が適用されるようになります。
  • まばたきの間隔 \blspd[秒]
  • まばたきの確率 \blate[%]
  • 口パクの速度 \lipspd[倍率]
     
    スプライトツールからスプライトセット”chr001”のモーションを開いて、制作の参考にしてください。

RPG Developer Bakin

• トップ
• はじめに
• FAQ
• 制作Tips
• トップメニュー
• マップエディター
• エディット画面で使用する各種パレット
• イベント（イベントシート/イベントパネル）
• リソース
• データベース
• ゲーム定義
• レイアウトツール
• カメラツール
• 変数使用箇所
• コモンイベント
• スプライトツール
• プラグイン
• ユーティリティ
• 各種素材の仕様
• 使用許諾契約書
   
  English page

最新の20件