![[PukiWiki]](./skin/BAKIN_logo_92.png "[PukiWiki]"){kind=logo}
#author("2024-05-22T22:06:44+09:00","default:admin","admin") #author("2024-05-24T16:03:57+09:00","default:admin","admin") *スプライトツール [#s1884601] 複数の画像を組み合わせてアニメーションさせる「スプライト」を作成することができるツールです。 スプライトは、タイトル画面やメニュー画面での動く演出や、会話シーンでのキャストの表情変化などに使用できます。 リソース＞[[スプライト]]も参考にしてください。 #ref(./スプライトツール.png,50%) #contents **各機能の説明 [#c9e58e40] ***スプライトリスト [#rd886cfc] 登録されているスプライトセット・モーションのリストが表示されます。 #ref(./スプライトツール_スプライトリスト.png,60%) #br -''スプライトセット追加ボタン'' -''モーション追加ボタン'' 「スプライトセット」は複数の「モーション」をまとめる”フォルダ”のようなものです。 「モーション」は画像や音によって構成されるスプライトで表示されるそのものです。 「スプライトセット」を追加すると自動的に1つ「モーション」が作成されます。 -''コンテキストメニュー'' 項目を選んで右クリックするとコンテキストメニューが表示されます。 項目のコピーや削除、複製などができます。 ***スプライトプレビュー [#e68c0848] 作成中のアニメーションが再生されるエリアです。 スプライトリストでモーションを選択するとプレビューが表示されます。 プレビュー欄の上部にプレビューの各種設定がまとまっています。 なおプレビューの中心座標は(0,0)ですのでご注意ください。 #ref(./スプライトツール_スプライトプレビュー.png,60%) #br -''スケール'' プレビューのスケールを変更します。マウスのセンターホイールでも操作できます。 -''スクリーンマーカー'' ゲーム定義＞プロジェクト設定＞実行時解像度に設定されている画面サイズと同比率の枠が表示されます。 -''レイヤーマーカー'' レイヤー番号を示すマーカーが表示されます。 プレビュー上でレイヤーマーカーをドラッグすることでそのレイヤーの表示位置を変えることができます。 - ''レイヤーマーカー(選択レイヤーのみ）'' タイムラインで選択中のレイヤーのマーカーのみが表示されます。 このボタンをオンにするとレイヤーマーカーボタンはオフに切り替わります。 -''ターゲットイメージ'' プレビュー上にスプライトの位置を決めるための目安となるイメージを表示することができます。 例えばキャストの上にスプライトを表示する場合、ターゲットとしてキャストの画像を置くことで適切な位置調整ができます。 -''背景'' プレビューの背景にイメージを表示することができます。 -''ターゲットからの位置'' ターゲットに指定したイメージに対してどこにスプライトの原点を配置するのかを変更できます。 -''位置シフト'' 全てのレイヤーの位置をまとめて上下左右にシフトさせることができます。 ***タイムライン [#p7c7e2db] #ref(./スプライトツール_タイムライン.png,60%) #br -''タイムライン上部メニュー'' --''レイヤー追加ボタン'' レイヤーを追加します。 --''マスクレイヤー追加ボタン'' マスクレイヤーを追加します。 --''フレーム追加ボタン'' 空のキーフレームをタイムラインの一番最後に追加します。 --''コピーボタン'' 選択しているレイヤー/キーフレーム/セルをコピーします。 タイムラインの一番上の行（秒）の欄をクリックするとキーフレーム全体を選択できます。 --''ペーストボタン'' コピーしたものをペーストします。 --''削除ボタン'' 選択しているレイヤー/キーフレーム/セルを削除します。 --''再生ボタン'' タイムラインで設定しているアニメーションをプレビュー上で再生します。 --''停止ボタン'' アニメーションのプレビューを停止します。 --''ループボタン'' オンにするとアニメーションをループ再生します。 --''スライダー'' サム（つまみ）をドラッグすることでアニメーションの再生位置を変更することができます。 ---- -''コンテキストメニュー'' タイムラインのどこを選択しているか、によってコンテキストメニューの内容が変わります。 --''レイヤー名セル'' レイヤーのコピーや貼り付け、挿入ができます。 レイヤーの順番の入れ替えは+/-ボタンでも行えます。 --''キーフレーム((秒)セルを選択する)'' キーフレームのコピーや貼り付け、挿入ができます。 --''それ以外のセル'' セルの内容のコピーや貼り付けができます。 ---- -''タイムライン'' スプライトの動きのタイミングや表示するイメージを設定します。 アニメーションのキーフレーム（列）のタイミングで、レイヤーに設定した画像がどのような状態になっているかを設定していきます。 --''(秒)'' キーフレームのタイミングを秒単位に変換したものが表示される行です。 --''開始フレーム'' キーフレームが始まるタイミングをフレーム（1/60秒）単位で指定する行です。 --''フレーム数'' このフレームが表示されるフレーム数です。 フレーム数を変更すると、変更したキーフレーム以降のキーフレームの開始フレームも自動的に変化します。 --''画面フラッシュ'' 指定した色と透明度で、画面全体をフラッシュさせます。 --''対象フラッシュ'' 「[[エフェクトの表示:https://rpgbakin.com/pukiwiki/?%E4%BC%9A%E8%A9%B1#m7538332]]」「[[感情マークの表示:https://rpgbakin.com/pukiwiki/?%E4%BC%9A%E8%A9%B1#j2cbc471]]」パネルでこのスプライトを表示する際、「表示位置」で指定したターゲットを指定した色と透明度でフラッシュさせます。 このスプライトをスキルのエフェクトに指定した際はスキルの使用者、アイテムのエフェクトに指定した際はアイテムの使用先がターゲットとなります。 --''効果音'' アニメーション時に再生するSEを設定します。 --''レイヤー'' ---''ロックボタン'' ロックするとプレビュー上でレイヤーマーカーをドラッグしても位置が動かなくなります。 ただしプロパティーでの値の変更は反映されます。 ---''表示/非表示ボタン'' プレビュー上でのレイヤーの表示状態を表示/非表示/半透明で切り替えることができます。 ---''マスク対象/非対象ボタン'' マスクレイヤーが存在する場合にのみ表示されます。 レイヤーがマスクの影響を受けるかどうかを切り替えることができます。 --''マスクレイヤー'' マスクレイヤーはその影響化にあるレイヤーを切り抜くレイヤーです。 [[マスク:https://rpgbakin.com/pukiwiki/?%E3%82%B9%E3%83%97%E3%83%A9%E3%82%A4%E3%83%88%E3%83%84%E3%83%BC%E3%83%AB#v06b132e]]を参照してください。 ***セルの変化情報 [#lf385826] タイムラインにて、「画面フラッシュ」以下のセルを選択すると、スプライトツール右側に表示されます。 ここでは選択したセルが存在するキーフレームの時点での、レイヤーの表示内容を設定することができます。 #ref(./スプライトツール_セルの変化情報.png,60%) #br -''色'' 設定した画像の色の色彩や透明度の変化情報を設定します。 表示するイメージの元の色に対して、指定した色が乗算されます。 マスクレイヤーでは色情報は変更できません。 -''位置'' 画像の表示位置や変化方法を設定します。 ''&color(red){(!)};''Z位置は表示プライオリティを示します。 例えばZ位置「1」のレイヤーは全てのZ位置「0」レイヤーよりも手前に描画されます。 Z位置の変更には補間は効きません。 -''スケール'' 画像のスケールや変化方法を設定します。 スケールにマイナスを入れるとイメージがフリップ（反転）します。 -''回転'' 画像の角度や変化方法を設定をします。 --''補間方法の選択ダイアログ'' 色/位置/スケール/回転の変化方法を指定する際、このダイアログが開きます。 前のキーフレームで設定した値から今設定しているキーフレームの値に変化する動きをどのように補間するかを指定することができます。 「変更しない」を選ぶと、その要素の動きについて影響を与えません。 「補間なし」を選ぶと、つなぎの動きをせずにパッと切り替わります。 ''&color(red){(!)};''キーフレームが2つある場合、最初のキーフレームから次のキーフレームにどう変化するか、を設定していることにご注意ください。 そのため補間方法は''「動きの終わりにあたるキーフレーム」''で指定してください。 #ref(./スプライトツール_補間方法の選択.png,60%) #br -''イメージ'' 使用する画像と割り当てるコマの座標を設定します。 --''コマX/コマY'' 指定するイメージが"CountSlice"に設定されている場合、イメージの中のどのコマを使うかを指定します。 イメージのスライス方法はリソース＞[[イメージ]]で設定できます。 イメージのプレビューをクリックして直接コマを指定することもできます。 --''アルファ値を反転'' マスクに指定したイメージのアルファ値を反転します。 マスクレイヤーでのみ設定できる項目です。 -''その他'' 効果音を設定すること出来ます。 効果音レイヤーでのみ設定できます。 **マスク [#v06b132e] マスクは、マスクレイヤーに登録したイメージでその影響化にあるレイヤーを切り抜いて表示する機能です。 正方形や円といったマスクに使いやすい図形のイメージがreservedフォルダ＞Primitiveにありますのでご活用ください。 -''マスクレイヤーの影響範囲'' タイムライン上「マスクレイヤーより上の行」に設定されたレイヤーがそのマスクの影響を受けます。 マスクレイヤーが2つある場合はそれぞれの上の行に設定されたレイヤーがマスクの影響を受けます。 マスクレイヤーは「影響下にあるレイヤー」に対してのみ有効であることに注意してください。 --''複数マスクレイヤーがある場合の例'' #ref(./マスク_1.png,60%) #br ---緑の画面を覆う長方形（Screen_1280）をイメージに設定したレイヤー2は、円形の画像（Circle）をイメージに設定したマスクレイヤー1の影響を受けています。 ---青の画面を覆う長方形（Screen_1280）をイメージに設定したレイヤー4は、三角形の画像（Triangle）をイメージに設定したマスクレイヤー3の影響を受けています。 #br -''アルファ値を反転'' 「アルファ値を反転」をオンにすると、マスクレイヤーに指定したイメージで影響化のレイヤーがくりぬかれます。 #ref(./マスク_アルファ値を反転.png,60%) #br -''レイアウトツールでの活用'' レイアウトツールの描画コンテナなどのプロパティー「表示演出」で、マスクレイヤーを持つスプライトを指定すると、スプライトの動きだけでなくマスク情報も活用されます。 [[レイアウトパーツ:https://rpgbakin.com/pukiwiki/?%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%83%91%E3%83%BC%E3%83%84%E3%81%AE%E7%A8%AE%E9%A1%9E%E3%81%A8%E8%A8%AD%E5%AE%9A%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E9%A0%85%E7%9B%AE#LayoutTool_Effects]]の説明を参照してください。 **スプライトデータの作成方法 [#be66be9e] ***バトルへのトランジションの作成例 [#fba007e4] エンカウントバトルの発生時、マップからバトルへ移行する際に使う下記のアニメーション演出をスプライトツールを使って作成してみます。 #ref(./スプライトの作り方.gif,40%) #br **アニメーションデータの作成方法 [#be66be9e] ここでは、キャラクターの目パチ、口パクアニメの作成方法を例に、アニメーションデータの作成方法を説明します。 -- この例ではゲーム画面サイズは1280x720を想定しています。 #ref(spritetool-jp.png) -- この例ではマップからバトルへ移行する際の演出として下記の2つのスプライトを作ります。 --- マップ上からバトルシーンに移行する際のスプライト --- バトルシーンの冒頭からバトルシーンへ遷移する際のスプライト ---- - ''&size(16){マップ上からバトルシーンに移行する際のスプライト};'' 4つの長方形（帯）が画面右から時間差をつけて入ってきて画面を覆うスプライトを作ります。 １．マスターメニューから「リソース管理」を開く。 ''&size(16){1.};'' スプライトツールを開き、 スプライトツリーで「追加」ボタンを押してアセットピッカーを開いてください。 イメージ＞resservedフォルダ＞Primitiveフォルダの「Screen_1280」を選んでOKを押します。 スプライトセットとモーションが作成されるので、スプライトセットの名前は「バトルトランジション」、モーション名は「マップからバトル」に変えておきましょう。 ２．２Dスタンプ→イメージを選択します。 #ref(./スプライトの作り方_1.png,40%) #br ３．「追加」をクリックし、任意の画像を選択してインポートを完了させます。ここではキャラクター本体、目パーツ、口パーツの３つをインポートします。 ''&size(16){2.};'' 先ほど開いたScreen_1280はレイヤー1のイメージとして登録されています。 これを画面一番下に置く帯にしましょう。 レイヤー1の最初のフレームセルをクリックし、画面右側のプロパティ欄で下記の値を設定してください。 （色は自由に変えていただいて構いません。） |BOLD:レイヤー1||h |BOLD:色|色変化方法:補間なし、赤:255、緑:87、青:51、透明度:255| |BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:270、位置Z:0| |BOLD:スケール|スケール変化方法:補間なし、スケールX:100、スケールY:25| |BOLD:回転|回転変化方法:変更しない| #ref(./スプライトの作り方_2.png,40%) #br #ref(spritetool03.png) #ref(spritetool04.png) ''&size(16){3.};'' さらに3つの帯を作るためにレイヤーを追加しましょう。 レイヤー追加ボタンを押してレイヤー2、3、４を追加してください。 アニメーションする画像は、「テクスチャの設定」で「スライス」をCountSliceに設定、縦横をアニメパターンの数に分割します。 #ref(./スプライトの作り方_3.png,40%) #br この場合は横分割数が２、縦分割数を７と設定します。''会話シーンで利用するデータは、テクスチャの設定のSRGBのスイッチをOFFにしてください。'' ''&size(16){4.};'' レイヤー1の最初のフレームセルをコピー（Ctrl+C）し、レイヤー2～4の最初のフレームセルにペースト（Ctrl+V)します。 #ref(./スプライトの作り方_4.png,40%) #br ''&size(16){5.};'' レイヤー2～4の位置をずらし、それぞれの色を変えましょう。 各レイヤーの最初のフレームセルを選択し、プロパティの「位置」の設定を下記のように変更します。 色と位置以外の項目は変えなくて構いません。 |BOLD:レイヤー2||h |BOLD:色|色変化方法:補間なし、赤:255、緑:141、青:0、透明度:255| |BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:90、位置Z:0| ５．「２Dスタンプ」→「スプライト」を選択します。 |BOLD:レイヤー3||h |BOLD:色|色変化方法:補間なし、赤:255、緑:195、青:0、透明度:255| |BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:-90、位置Z:0| ６．「追加」をクリックすると画像選択画面が開くので、ベース画像を選択します。 |BOLD:レイヤー4||h |BOLD:色|色変化方法:補間なし、赤:231、緑:76、青:60、透明度:255| |BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:-270、位置Z:0| #br 4つの色の違う帯が、画面外右側にできました。 #ref(spritetool07.jpg) #ref(./スプライトの作り方_5.png,40%) #br ''&size(16){6.};'' 帯を画面内に動かすアニメーションを作ります。 まずフレーム追加ボタンをおして、新しいキーフレームを追加します。 追加したキーフレームの「開始フレーム」に「12」を設定します。 これにより、最初のキーフレームから追加したキーフレームまでの間を「12フレーム」でアニメーションするように指定したことになります。 7.ベース画像が読み込まれたら、画面右上の「編集」をクリックして、アニメーションツールを起動します。 #ref(./スプライトの作り方_6.png,40%) #br #ref(spritetool08.jpg) ''&size(16){7.};'' 追加したキーフレームのレイヤー1のフレームセルをクリックし、プロパティにて下記の値を設定をしてください。 （最初のキーフレームからセルをコピーし、プロパティーを書き換えても構いません。） |BOLD:レイヤー1||h |BOLD:色|色変化方法:変更しない| |BOLD:位置|位置変化方法:イーズアウト3x(強)、位置X:0、位置Y:270、位置Z:0| |BOLD:スケール|スケール変化方法:変更しない| |BOLD:回転|回転変化方法:変更しない| |BOLD:イメージ|使用するイメージ:Screen_1280| 8.アニメーションツールが起動したら、ベース画像を表示したい位置に移動します。（枠線が画面のサイズになります。） タイムラインの上の再生ボタンを押してみると、レイヤー1の帯が画面の中にスライドしてくるアニメーションができているはずです。 位置変化方法に「イーズアウト3x(強)」を設定しました。 変化方法は「アニメーションの終点にあたるフレーム」に設定することに注意してください。 #ref(spritetool09.jpg) #ref(./スプライトの作り方_7.png,40%) #br 9.レイヤーを追加して、アニメーションさせたい部位の画像を割り当てます。ここではレイヤー２に「口」、レイヤー３に「目」を設定します。 ''&size(16){8.};'' レイヤー2～4も同じようにアニメーションをつけていきましょう。 それぞれのレイヤーがタイミングずらしながら画面内にスライドしてくるようにします。 フレーム追加ボタンを3回押してキーフレームを3つ追加します。 画像が画面に表示されたら、マウスまたはカーソルキーでアニメーションさせたい位置に合わせます。 #ref(./スプライトの作り方_8.png,40%) #br プレビュー画像はマウスのセンタースクロールで拡大縮小ができます。レイヤー名横の目のアイコンをクリックすると、選択しているレイヤーを半透明化することができます。 ''&size(16){9.};'' 6.で作った先頭から2つ目のキーフレームのレイヤー1のフレームセルをコピーし、下の図の赤丸のフレームにコピーしていきましょう。 コピーした先のセルのプロパティで「位置Y」を調整します。 |BOLD:レイヤー2|位置Y:90| |BOLD:レイヤー3|位置Y:-90| |BOLD:レイヤー4|位置Y:-270| #ref(./スプライトの作り方_9.png,40%) #br #ref(spritetool10.jpg) ''&size(16){10.};'' それぞれのレイヤーの移動が終わるタイミングを調整しましょう。 各キーフレームの「フレーム数」に値を入れていってください。値は自由に変更していただいて構いません。 ''&color(red){(!)};''タイミングは「開始フレーム」でも調整可能ですが、入れる値によってキーフレームの順番が前後することに注意してください。 例えば、キーフレーム5にキーフレーム4より速い開始タイミングの値を入れると、順番が入れ替わります。 |BOLD:キーフレーム2|12| |BOLD:キーフレーム3|12| |BOLD:キーフレーム4|6| |BOLD:キーフレーム5|1(変更なし)| #ref(./スプライトの作り方_10.png,40%) #br 再生ボタンを押して、4つの帯がタイミングをずらしながら画面を覆うことを確認してください。 ''&size(16){これで「マップ上からバトルシーンに移行する際のスプライト」は完成です。};'' 10.「フレーム追加」ボタンをクリックして、フレームをふたつ追加し、フレーム０に設定した「目」と「口」のレイヤーを横にコピーします。 ---- - ''&size(16){バトルシーンの冒頭からバトルシーンへ遷移する際のスプライト};'' 「マップ上からバトルシーンに移行する際のスプライト」の終わりの状態からスタートし、マスクを使うことで中心から円型の窓が広がっていくスプライトを作ります。 ''&size(16){11.};'' 先ほど作ったモーション「マップからバトル」の最初のキーフレーム（4つの帯が画面外右側にある状態）をコピーしましょう。 Ctrl＋Cでもいいですし、タイムライン上のコピーボタンや、コンテキストメニューからコピーをしても構いません。 コンテキストメニューはキーフレームの（秒）と書かれた一番上のセルを選択し、右クリックしてください。 #ref(spritetool11.jpg) #ref(./スプライトの作り方_11.png,40%) #br ''&size(16){12.};'' スプライトツリーで先ほど作ったスプライトセット「バトルトランジション」を選択し、モーション追加ボタンを押しましょう。 アセットピッカーが開くので、画像は「なし」を選択してOKを押し、モーションを追加します。 モーション名は「冒頭からバトルシーンへ」に変えておきましょう。 11.真ん中のフレームの「目」と「口」のレイヤーにフォーカスを合わせて、任意の表情のコマに変更します。 #ref(./スプライトの作り方_12.png,40%) #br ''&size(16){13.};'' 追加したモーションの最初のキーフレームの一番上のセルを選択し、Ctrl+V（もしくはペーストボタンなど）で先ほどコピーしたキーフレームの内容をペーストします。 コピー元と違う種別のセルにはペーストできないようになっています。 ex.効果音レイヤーのセルをコピーした際は、効果音レイヤーのセルにしかペーストできません。 #ref(spritetool12.jpg) #ref(./スプライトの作り方_13.png,40%) #br ''&size(16){14.};'' 各レイヤーのセルを選択し、''位置X:0''を設定してください。 これで先ほど作ったモーション「マップからバトル」の最後のフレームと同じ状態になります。 12.再生時間（フレーム）を設定します。ここでは、真ん中のフレームは１、最後のフレームを30とします。これで再生すると、以下のようなアニメが完成します。 #ref(./スプライトの作り方_14.png,40%) #br ''&size(16){15.};'' マスクレイヤーを追加します。 レイヤー1の「レイヤー名セル」を選択し、右クリック。コンテキストメニューから「マスクレイヤーを挿入」を選択します。 マスクレイヤー1が挿入され、レイヤー1～4までのレイヤー番号がレイヤー2～5に変化します。 レイヤー2～5は全てマスクレイヤー1の影響を受けるレイヤーになっています。 #ref(./スプライトの作り方_15.png,40%) #br #ref(spritetool13.gif) ''&size(16){16.};'' マスクレイヤーの最初のキーフレームのセルを選択し、プロパティに下記の設定をしてください。 「使用するイメージ」は、イメージ＞resservedフォルダ＞Primitiveフォルダの「Circle」です。 |BOLD:マスクレイヤー1||h |BOLD:位置|位置変化方法:変更しない| |BOLD:スケール|スケール変化方法:補間なし、スケールX:0、スケールY:0| |BOLD:回転|回転変化方法:変更しない| |BOLD:イメージ|使用するイメージ:Circle、アルファ値を反転:オン| #br イメージの「アルファ値を反転」をオンにすることで、指定したイメージのある箇所がくりぬかれるようになります。 #ref(./スプライトの作り方_16.png,40%) #br ''&size(16){17.};'' フレーム追加ボタンを押してキーフレームを追加します。 追加したフレームの開始フレームに「30」を設定してください。 そのうえで、マスクレイヤー1の最初のキーフレームのセルをこのキーフレームのセルにコピーし、プロパティを下記のように変えてください。 スケールのみ変更しています。 |BOLD:マスクレイヤー1||h |BOLD:位置|位置変化方法:変更しない| |BOLD:スケール|スケール変化方法:イーズイン加速、スケールX:150、スケールY15:0| |BOLD:回転|回転変化方法:変更しない| |BOLD:イメージ|使用するイメージ:Circle、アルファ値を反転:オン| #br #ref(./スプライトの作り方_17.png,40%) #br 再生ボタンを押すと、画面中央から円型の窓が広がっていくアニメーションが確認できるはずです。 開始フレームのタイミングや、スケール変化方法してみてください。 また「使用するイメージ」を変えるとくりぬかれる形が変わるので、気に入ったものに変更してみてください。 ''&size(16){これで「バトルシーンの冒頭からバトルシーンへ遷移する際のスプライト」も完成しました。};'' ---- - ''&size(16){作成したスプライトをセットする};'' これまで作成した2つのスプライトを、バトルに入った時に再生されるように設定します。 ''&size(16){18.};'' ゲーム定義＞システムリソースの「バトルに入った時」 からアセットピッカーを開き、先ほど作ったスプライト「マップからバトルへ」を指定します。 ''&color(red){(!)};''Ver.1.9の時点では、スプライトツールで新規作成したスプライトセットがreservedフォルダに入っていることがあります。 これでマップからバトルに移行する際、画面が4色の帯でおおわれる演出が入るようになります。 #ref(./スプライトの作り方_18.png,40%) #br ''&size(16){19.};'' バトルの冒頭からバトルシーンへ移行する演出はバトルイベントで設定します。 [[コモンイベントパレット]]もしくは[[コモンイベントエディタ:https://rpgbakin.com/pukiwiki/?%E3%82%B3%E3%83%A2%E3%83%B3%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88#se53a6ea]]で下記のバトルイベント作成してください。 --- イベント開始条件は「戦闘開始時」 --- [[エフェクトの表示:https://rpgbakin.com/pukiwiki/?%E4%BC%9A%E8%A9%B1#m7538332]]パネルで、先ほど作成した「冒頭からバトルシーンへ」を指定します。 表示位置は「画面の中心に表示する」、「完了するまで待つ」はオンに設定します。 #ref(./スプライトの作り方_19.png,40%) #br ''以上でスプライトを使ったバトルシーンへの遷移が完成しました。'' ***目パチ・口パクの作成方法 [#i30684b1] 会話イベントなどで使うキャストのデータの作成時、、目パチや口パクのレイヤー名は下記のルールに従ってください。 -目パチ用のアニメーションを置くレイヤー名 … eyes -口パク用のアニメーションを置くレイヤー名 … mouth #br このレイヤー名にすることで、[[会話を表示:https://rpgbakin.com/pukiwiki/?%E4%BC%9A%E8%A9%B1#pe61d5c2]]パネルなどで使える下記の[[制御文字:https://rpgbakin.com/pukiwiki/?%E6%96%87%E5%AD%97%E3%81%AE%E8%A3%85%E9%A3%BE%E3%83%BB%E5%88%B6%E5%BE%A1%E6%96%87%E5%AD%97]]の効果が適用されるようになります。 -- まばたきの間隔 \blspd[秒] -- まばたきの確率 \blate[%] -- 口パクの速度 \lipspd[倍率] #br スプライトツールからスプライトセット”chr001”のモーションを開いて、制作の参考にしてください。 #ref(./スプライトツール_目パチ口パク.png,40%) #br //**アニメーションデータの作成方法 [#be66be9e] //ここでは、キャラクターの目パチ、口パクアニメの作成方法を例に、アニメーションデータの作成方法を説明します。 // //#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)
