スプライトツール
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
*スプライトツール [#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%B...
このスプライトをスキルのエフェクトに指定した際はスキルの...
--''効果音''
アニメーション時に再生するSEを設定します。
--''レイヤー''
---''ロックボタン''
ロックするとプレビュー上でレイヤーマーカーをドラッグして...
ただしプロパティーでの値の変更は反映されます。
---''表示/非表示ボタン''
プレビュー上でのレイヤーの表示状態を表示/非表示/半透明で...
---''マスク対象/非対象ボタン''
マスクレイヤーが存在する場合にのみ表示されます。
レイヤーがマスクの影響を受けるかどうかを切り替えることが...
--''マスクレイヤー''
マスクレイヤーはその影響化にあるレイヤーを切り抜くレイヤ...
[[マスク:https://rpgbakin.com/pukiwiki/?%E3%82%B9%E3%83%9...
***セルの変化情報 [#lf385826]
タイムラインにて、「画面フラッシュ」以下のセルを選択する...
ここでは選択したセルが存在するキーフレームの時点での、レ...
#ref(./スプライトツール_セルの変化情報.png,60%)
#br
-''色''
設定した画像の色の色彩や透明度の変化情報を設定します。
表示するイメージの元の色に対して、指定した色が乗算されま...
マスクレイヤーでは色情報は変更できません。
-''位置''
画像の表示位置や変化方法を設定します。
''&color(red){(!)};''Z位置は表示プライオリティを示します。
例えばZ位置「1」のレイヤーは全てのZ位置「0」レイヤーより...
Z位置の変更には補間は効きません。
-''スケール''
画像のスケールや変化方法を設定します。
スケールにマイナスを入れるとイメージがフリップ（反転）し...
-''回転''
画像の角度や変化方法を設定をします。
--''補間方法の選択ダイアログ''
色/位置/スケール/回転の変化方法を指定する際、このダイアロ...
前のキーフレームで設定した値から今設定しているキーフレー...
「変更しない」を選ぶと、その要素の動きについて影響を与え...
「補間なし」を選ぶと、つなぎの動きをせずにパッと切り替わ...
''&color(red){(!)};''キーフレームが2つある場合、最初のキ...
そのため補間方法は''「動きの終わりにあたるキーフレーム...
#ref(./スプライトツール_補間方法の選択.png,60%)
#br
-''イメージ''
使用する画像と割り当てるコマの座標を設定します。
--''コマX/コマY''
指定するイメージが"CountSlice"に設定されている場合、イメ...
イメージのスライス方法はリソース＞[[イメージ]]で設定でき...
イメージのプレビューをクリックして直接コマを指定すること...
--''アルファ値を反転''
マスクに指定したイメージのアルファ値を反転します。
マスクレイヤーでのみ設定できる項目です。
-''その他''
効果音を設定すること出来ます。
効果音レイヤーでのみ設定できます。
**マスク [#v06b132e]
マスクは、マスクレイヤーに登録したイメージでその影響化に...
正方形や円といったマスクに使いやすい図形のイメージがreser...
-''マスクレイヤーの影響範囲''
タイムライン上「マスクレイヤーより上の行」に設定されたレ...
マスクレイヤーが2つある場合はそれぞれの上の行に設定された...
マスクレイヤーは「影響下にあるレイヤー」に対してのみ有効...
--''複数マスクレイヤーがある場合の例''
#ref(./マスク_1.png,60%)
#br
---緑の画面を覆う長方形（Screen_1280）をイメージに設定し...
---青の画面を覆う長方形（Screen_1280）をイメージに設定し...
#br
-''アルファ値を反転''
「アルファ値を反転」をオンにすると、マスクレイヤーに指定...
#ref(./マスク_アルファ値を反転.png,60%)
#br
-''レイアウトツールでの活用''
レイアウトツールの描画コンテナなどのプロパティー「表示演...
[[レイアウトパーツ:https://rpgbakin.com/pukiwiki/?%E3%83%...
**スプライトデータの作成方法 [#be66be9e]
***バトルへのトランジションの作成例 [#fba007e4]
エンカウントバトルの発生時、マップからバトルへ移行する際...
#ref(./スプライトの作り方.gif,40%)
#br
-- この例ではゲーム画面サイズは1280x720を想定しています。
-- この例ではマップからバトルへ移行する際の演出として下記...
--- マップ上からバトルシーンに移行する際のスプライト
--- バトルシーンの冒頭からバトルシーンへ遷移する際のスプ...
----
- ''&size(16){マップ上からバトルシーンに移行する際のスプ...
4つの長方形（帯）が画面右から時間差をつけて入ってきて画...
''&size(16){1.};'' スプライトツールを開き、 スプライトツ...
イメージ＞resservedフォルダ＞Primitiveフォルダの「Screen_...
スプライトセットとモーションが作成されるので、スプライト...
#ref(./スプライトの作り方_1.png,40%)
#br
''&size(16){2.};'' 先ほど開いたScreen_1280はレイヤー1のイ...
これを画面一番下に置く帯にしましょう。
レイヤー1の最初のフレームセルをクリックし、画面右側の...
（色は自由に変えていただいて構いません。）
|BOLD:レイヤー1||h
|BOLD:色|色変化方法:補間なし、赤:255、緑:87、青:51、透明...
|BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:270、...
|BOLD:スケール|スケール変化方法:補間なし、スケールX:100、...
|BOLD:回転|回転変化方法:変更しない|
#ref(./スプライトの作り方_2.png,40%)
#br
''&size(16){3.};'' さらに3つの帯を作るためにレイヤーを追...
レイヤー追加ボタンを押してレイヤー2、3、４を追加して...
#ref(./スプライトの作り方_3.png,40%)
#br
''&size(16){4.};'' レイヤー1の最初のフレームセルをコピー...
#ref(./スプライトの作り方_4.png,40%)
#br
''&size(16){5.};'' レイヤー2～4の位置をずらし、それぞれの...
各レイヤーの最初のフレームセルを選択し、プロパティの...
色と位置以外の項目は変えなくて構いません。
|BOLD:レイヤー2||h
|BOLD:色|色変化方法:補間なし、赤:255、緑:141、青:0、透明...
|BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:90、...
|BOLD:レイヤー3||h
|BOLD:色|色変化方法:補間なし、赤:255、緑:195、青:0、透明...
|BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:-90、...
|BOLD:レイヤー4||h
|BOLD:色|色変化方法:補間なし、赤:231、緑:76、青:60、透明...
|BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:-270...
#br
4つの色の違う帯が、画面外右側にできました。
#ref(./スプライトの作り方_5.png,40%)
#br
''&size(16){6.};'' 帯を画面内に動かすアニメーションを作り...
まずフレーム追加ボタンをおして、新しいキーフレームを...
追加したキーフレームの「開始フレーム」に「12」を設定...
これにより、最初のキーフレームから追加したキーフレー...
#ref(./スプライトの作り方_6.png,40%)
#br
''&size(16){7.};'' 追加したキーフレームのレイヤー1のフレ...
（最初のキーフレームからセルをコピーし、プロパティー...
|BOLD:レイヤー1||h
|BOLD:色|色変化方法:変更しない|
|BOLD:位置|位置変化方法:イーズアウト3x(強)、位置X:0、位置...
|BOLD:スケール|スケール変化方法:変更しない|
|BOLD:回転|回転変化方法:変更しない|
|BOLD:イメージ|使用するイメージ:Screen_1280|
タイムラインの上の再生ボタンを押してみると、レイヤー1の...
位置変化方法に「イーズアウト3x(強)」を設定しました。
変化方法は「アニメーションの終点にあたるフレーム」に設...
#ref(./スプライトの作り方_7.png,40%)
#br
''&size(16){8.};'' レイヤー2～4も同じようにアニメーション...
それぞれのレイヤーがタイミングずらしながら画面内にス...
フレーム追加ボタンを3回押してキーフレームを3つ追加し...
#ref(./スプライトの作り方_8.png,40%)
#br
''&size(16){9.};'' 6.で作った先頭から2つ目のキーフレーム...
コピーした先のセルのプロパティで「位置Y」を調整します。
|BOLD:レイヤー2|位置Y:90|
|BOLD:レイヤー3|位置Y:-90|
|BOLD:レイヤー4|位置Y:-270|
#ref(./スプライトの作り方_9.png,40%)
#br
''&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){これで「マップ上からバトルシーンに移行する...
----
- ''&size(16){バトルシーンの冒頭からバトルシーンへ遷移す...
「マップ上からバトルシーンに移行する際のスプライト」の...
''&size(16){11.};'' 先ほど作ったモーション「マップからバ...
Ctrl＋Cでもいいですし、タイムライン上のコピーボタン...
コンテキストメニューはキーフレームの（秒）と書かれた...
#ref(./スプライトの作り方_11.png,40%)
#br
''&size(16){12.};'' スプライトツリーで先ほど作ったスプラ...
アセットピッカーが開くので、画像は「なし」を選択して...
モーション名は「冒頭からバトルシーンへ」に変えておき...
#ref(./スプライトの作り方_12.png,40%)
#br
''&size(16){13.};'' 追加したモーションの最初のキーフレー...
コピー元と違う種別のセルにはペーストできないようにな...
ex.効果音レイヤーのセルをコピーした際は、効果音レ...
#ref(./スプライトの作り方_13.png,40%)
#br
''&size(16){14.};'' 各レイヤーのセルを選択し、''位置X:0''...
これで先ほど作ったモーション「マップからバトル」の最...
#ref(./スプライトの作り方_14.png,40%)
#br
''&size(16){15.};'' マスクレイヤーを追加します。
レイヤー1の「レイヤー名セル」を選択し、右クリック。コ...
マスクレイヤー1が挿入され、レイヤー1～4までのレイヤー...
レイヤー2～5は全てマスクレイヤー1の影響を受けるレイヤ...
#ref(./スプライトの作り方_15.png,40%)
#br
''&size(16){16.};'' マスクレイヤーの最初のキーフレームの...
「使用するイメージ」は、イメージ＞resservedフォルダ＞...
|BOLD:マスクレイヤー1||h
|BOLD:位置|位置変化方法:変更しない|
|BOLD:スケール|スケール変化方法:補間なし、スケールX:0、ス...
|BOLD:回転|回転変化方法:変更しない|
|BOLD:イメージ|使用するイメージ:Circle、アルファ値を反転:...
#br
イメージの「アルファ値を反転」をオンにすることで、指定...
#ref(./スプライトの作り方_16.png,40%)
#br
''&size(16){17.};'' フレーム追加ボタンを押してキーフレー...
追加したフレームの開始フレームに「30」を設定してく...
そのうえで、マスクレイヤー1の最初のキーフレームのセ...
スケールのみ変更しています。
|BOLD:マスクレイヤー1||h
|BOLD:位置|位置変化方法:変更しない|
|BOLD:スケール|スケール変化方法:イーズイン加速、スケールX...
|BOLD:回転|回転変化方法:変更しない|
|BOLD:イメージ|使用するイメージ:Circle、アルファ値を反転:...
#br
#ref(./スプライトの作り方_17.png,40%)
#br
再生ボタンを押すと、画面中央から円型の窓が広がっていく...
開始フレームのタイミングや、スケール変化方法してみてく...
また「使用するイメージ」を変えるとくりぬかれる形が変わ...
''&size(16){これで「バトルシーンの冒頭からバトルシーン...
----
- ''&size(16){作成したスプライトをセットする};''
これまで作成した2つのスプライトを、バトルに入った時に再生...
''&size(16){18.};'' ゲーム定義＞システムリソースの「バト...
''&color(red){(!)};''Ver.1.9の時点では、スプライトツ...
これでマップからバトルに移行する際、画面が4色の帯で...
#ref(./スプライトの作り方_18.png,40%)
#br
''&size(16){19.};'' バトルの冒頭からバトルシーンへ移行す...
[[コモンイベントパレット]]もしくは[[コモンイベントエディ...
--- イベント開始条件は「戦闘開始時」
--- [[エフェクトの表示:https://rpgbakin.com/pukiwiki/?%E4...
表示位置は「画面の中心に表示する」、「完了するまで待つ...
#ref(./スプライトの作り方_19.png,40%)
#br
''以上でスプライトを使ったバトルシーンへの遷移が完成しま...
***目パチ・口パクの作成方法 [#i30684b1]
会話イベントなどで使うキャストのデータの作成時、、目パチ...
-目パチ用のアニメーションを置くレイヤー名 … eyes
-口パク用のアニメーションを置くレイヤー名 … mouth
#br
このレイヤー名にすることで、[[会話を表示:https://rpgbakin...
-- まばたきの間隔 \blspd[秒]
-- まばたきの確率 \blate[%]
-- 口パクの速度 \lipspd[倍率]
#br
スプライトツールからスプライトセット”chr001”のモーション...
#ref(./スプライトツール_目パチ口パク.png,40%)
#br
//**アニメーションデータの作成方法 [#be66be9e]
//ここでは、キャラクターの目パチ、口パクアニメの作成方法...
//
//#ref(spritetool-jp.png)
//１．マスターメニューから「リソース管理」を開く。
//
//２．２Dスタンプ→イメージを選択します。
//３．「追加」をクリックし、任意の画像を選択してインポー...
//#ref(spritetool03.png)
//#ref(spritetool04.png)
//アニメーションする画像は、「テクスチャの設定」で「スラ...
//この場合は横分割数が２、縦分割数を７と設定します。''会...
//５．「２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.再生時間（フレーム）を設定します。ここでは、真ん中の...
//#ref(spritetool13.gif)
終了行:
*スプライトツール [#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%B...
このスプライトをスキルのエフェクトに指定した際はスキルの...
--''効果音''
アニメーション時に再生するSEを設定します。
--''レイヤー''
---''ロックボタン''
ロックするとプレビュー上でレイヤーマーカーをドラッグして...
ただしプロパティーでの値の変更は反映されます。
---''表示/非表示ボタン''
プレビュー上でのレイヤーの表示状態を表示/非表示/半透明で...
---''マスク対象/非対象ボタン''
マスクレイヤーが存在する場合にのみ表示されます。
レイヤーがマスクの影響を受けるかどうかを切り替えることが...
--''マスクレイヤー''
マスクレイヤーはその影響化にあるレイヤーを切り抜くレイヤ...
[[マスク:https://rpgbakin.com/pukiwiki/?%E3%82%B9%E3%83%9...
***セルの変化情報 [#lf385826]
タイムラインにて、「画面フラッシュ」以下のセルを選択する...
ここでは選択したセルが存在するキーフレームの時点での、レ...
#ref(./スプライトツール_セルの変化情報.png,60%)
#br
-''色''
設定した画像の色の色彩や透明度の変化情報を設定します。
表示するイメージの元の色に対して、指定した色が乗算されま...
マスクレイヤーでは色情報は変更できません。
-''位置''
画像の表示位置や変化方法を設定します。
''&color(red){(!)};''Z位置は表示プライオリティを示します。
例えばZ位置「1」のレイヤーは全てのZ位置「0」レイヤーより...
Z位置の変更には補間は効きません。
-''スケール''
画像のスケールや変化方法を設定します。
スケールにマイナスを入れるとイメージがフリップ（反転）し...
-''回転''
画像の角度や変化方法を設定をします。
--''補間方法の選択ダイアログ''
色/位置/スケール/回転の変化方法を指定する際、このダイアロ...
前のキーフレームで設定した値から今設定しているキーフレー...
「変更しない」を選ぶと、その要素の動きについて影響を与え...
「補間なし」を選ぶと、つなぎの動きをせずにパッと切り替わ...
''&color(red){(!)};''キーフレームが2つある場合、最初のキ...
そのため補間方法は''「動きの終わりにあたるキーフレーム...
#ref(./スプライトツール_補間方法の選択.png,60%)
#br
-''イメージ''
使用する画像と割り当てるコマの座標を設定します。
--''コマX/コマY''
指定するイメージが"CountSlice"に設定されている場合、イメ...
イメージのスライス方法はリソース＞[[イメージ]]で設定でき...
イメージのプレビューをクリックして直接コマを指定すること...
--''アルファ値を反転''
マスクに指定したイメージのアルファ値を反転します。
マスクレイヤーでのみ設定できる項目です。
-''その他''
効果音を設定すること出来ます。
効果音レイヤーでのみ設定できます。
**マスク [#v06b132e]
マスクは、マスクレイヤーに登録したイメージでその影響化に...
正方形や円といったマスクに使いやすい図形のイメージがreser...
-''マスクレイヤーの影響範囲''
タイムライン上「マスクレイヤーより上の行」に設定されたレ...
マスクレイヤーが2つある場合はそれぞれの上の行に設定された...
マスクレイヤーは「影響下にあるレイヤー」に対してのみ有効...
--''複数マスクレイヤーがある場合の例''
#ref(./マスク_1.png,60%)
#br
---緑の画面を覆う長方形（Screen_1280）をイメージに設定し...
---青の画面を覆う長方形（Screen_1280）をイメージに設定し...
#br
-''アルファ値を反転''
「アルファ値を反転」をオンにすると、マスクレイヤーに指定...
#ref(./マスク_アルファ値を反転.png,60%)
#br
-''レイアウトツールでの活用''
レイアウトツールの描画コンテナなどのプロパティー「表示演...
[[レイアウトパーツ:https://rpgbakin.com/pukiwiki/?%E3%83%...
**スプライトデータの作成方法 [#be66be9e]
***バトルへのトランジションの作成例 [#fba007e4]
エンカウントバトルの発生時、マップからバトルへ移行する際...
#ref(./スプライトの作り方.gif,40%)
#br
-- この例ではゲーム画面サイズは1280x720を想定しています。
-- この例ではマップからバトルへ移行する際の演出として下記...
--- マップ上からバトルシーンに移行する際のスプライト
--- バトルシーンの冒頭からバトルシーンへ遷移する際のスプ...
----
- ''&size(16){マップ上からバトルシーンに移行する際のスプ...
4つの長方形（帯）が画面右から時間差をつけて入ってきて画...
''&size(16){1.};'' スプライトツールを開き、 スプライトツ...
イメージ＞resservedフォルダ＞Primitiveフォルダの「Screen_...
スプライトセットとモーションが作成されるので、スプライト...
#ref(./スプライトの作り方_1.png,40%)
#br
''&size(16){2.};'' 先ほど開いたScreen_1280はレイヤー1のイ...
これを画面一番下に置く帯にしましょう。
レイヤー1の最初のフレームセルをクリックし、画面右側の...
（色は自由に変えていただいて構いません。）
|BOLD:レイヤー1||h
|BOLD:色|色変化方法:補間なし、赤:255、緑:87、青:51、透明...
|BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:270、...
|BOLD:スケール|スケール変化方法:補間なし、スケールX:100、...
|BOLD:回転|回転変化方法:変更しない|
#ref(./スプライトの作り方_2.png,40%)
#br
''&size(16){3.};'' さらに3つの帯を作るためにレイヤーを追...
レイヤー追加ボタンを押してレイヤー2、3、４を追加して...
#ref(./スプライトの作り方_3.png,40%)
#br
''&size(16){4.};'' レイヤー1の最初のフレームセルをコピー...
#ref(./スプライトの作り方_4.png,40%)
#br
''&size(16){5.};'' レイヤー2～4の位置をずらし、それぞれの...
各レイヤーの最初のフレームセルを選択し、プロパティの...
色と位置以外の項目は変えなくて構いません。
|BOLD:レイヤー2||h
|BOLD:色|色変化方法:補間なし、赤:255、緑:141、青:0、透明...
|BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:90、...
|BOLD:レイヤー3||h
|BOLD:色|色変化方法:補間なし、赤:255、緑:195、青:0、透明...
|BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:-90、...
|BOLD:レイヤー4||h
|BOLD:色|色変化方法:補間なし、赤:231、緑:76、青:60、透明...
|BOLD:位置|位置変化方法:補間なし、位置X:1280、位置Y:-270...
#br
4つの色の違う帯が、画面外右側にできました。
#ref(./スプライトの作り方_5.png,40%)
#br
''&size(16){6.};'' 帯を画面内に動かすアニメーションを作り...
まずフレーム追加ボタンをおして、新しいキーフレームを...
追加したキーフレームの「開始フレーム」に「12」を設定...
これにより、最初のキーフレームから追加したキーフレー...
#ref(./スプライトの作り方_6.png,40%)
#br
''&size(16){7.};'' 追加したキーフレームのレイヤー1のフレ...
（最初のキーフレームからセルをコピーし、プロパティー...
|BOLD:レイヤー1||h
|BOLD:色|色変化方法:変更しない|
|BOLD:位置|位置変化方法:イーズアウト3x(強)、位置X:0、位置...
|BOLD:スケール|スケール変化方法:変更しない|
|BOLD:回転|回転変化方法:変更しない|
|BOLD:イメージ|使用するイメージ:Screen_1280|
タイムラインの上の再生ボタンを押してみると、レイヤー1の...
位置変化方法に「イーズアウト3x(強)」を設定しました。
変化方法は「アニメーションの終点にあたるフレーム」に設...
#ref(./スプライトの作り方_7.png,40%)
#br
''&size(16){8.};'' レイヤー2～4も同じようにアニメーション...
それぞれのレイヤーがタイミングずらしながら画面内にス...
フレーム追加ボタンを3回押してキーフレームを3つ追加し...
#ref(./スプライトの作り方_8.png,40%)
#br
''&size(16){9.};'' 6.で作った先頭から2つ目のキーフレーム...
コピーした先のセルのプロパティで「位置Y」を調整します。
|BOLD:レイヤー2|位置Y:90|
|BOLD:レイヤー3|位置Y:-90|
|BOLD:レイヤー4|位置Y:-270|
#ref(./スプライトの作り方_9.png,40%)
#br
''&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){これで「マップ上からバトルシーンに移行する...
----
- ''&size(16){バトルシーンの冒頭からバトルシーンへ遷移す...
「マップ上からバトルシーンに移行する際のスプライト」の...
''&size(16){11.};'' 先ほど作ったモーション「マップからバ...
Ctrl＋Cでもいいですし、タイムライン上のコピーボタン...
コンテキストメニューはキーフレームの（秒）と書かれた...
#ref(./スプライトの作り方_11.png,40%)
#br
''&size(16){12.};'' スプライトツリーで先ほど作ったスプラ...
アセットピッカーが開くので、画像は「なし」を選択して...
モーション名は「冒頭からバトルシーンへ」に変えておき...
#ref(./スプライトの作り方_12.png,40%)
#br
''&size(16){13.};'' 追加したモーションの最初のキーフレー...
コピー元と違う種別のセルにはペーストできないようにな...
ex.効果音レイヤーのセルをコピーした際は、効果音レ...
#ref(./スプライトの作り方_13.png,40%)
#br
''&size(16){14.};'' 各レイヤーのセルを選択し、''位置X:0''...
これで先ほど作ったモーション「マップからバトル」の最...
#ref(./スプライトの作り方_14.png,40%)
#br
''&size(16){15.};'' マスクレイヤーを追加します。
レイヤー1の「レイヤー名セル」を選択し、右クリック。コ...
マスクレイヤー1が挿入され、レイヤー1～4までのレイヤー...
レイヤー2～5は全てマスクレイヤー1の影響を受けるレイヤ...
#ref(./スプライトの作り方_15.png,40%)
#br
''&size(16){16.};'' マスクレイヤーの最初のキーフレームの...
「使用するイメージ」は、イメージ＞resservedフォルダ＞...
|BOLD:マスクレイヤー1||h
|BOLD:位置|位置変化方法:変更しない|
|BOLD:スケール|スケール変化方法:補間なし、スケールX:0、ス...
|BOLD:回転|回転変化方法:変更しない|
|BOLD:イメージ|使用するイメージ:Circle、アルファ値を反転:...
#br
イメージの「アルファ値を反転」をオンにすることで、指定...
#ref(./スプライトの作り方_16.png,40%)
#br
''&size(16){17.};'' フレーム追加ボタンを押してキーフレー...
追加したフレームの開始フレームに「30」を設定してく...
そのうえで、マスクレイヤー1の最初のキーフレームのセ...
スケールのみ変更しています。
|BOLD:マスクレイヤー1||h
|BOLD:位置|位置変化方法:変更しない|
|BOLD:スケール|スケール変化方法:イーズイン加速、スケールX...
|BOLD:回転|回転変化方法:変更しない|
|BOLD:イメージ|使用するイメージ:Circle、アルファ値を反転:...
#br
#ref(./スプライトの作り方_17.png,40%)
#br
再生ボタンを押すと、画面中央から円型の窓が広がっていく...
開始フレームのタイミングや、スケール変化方法してみてく...
また「使用するイメージ」を変えるとくりぬかれる形が変わ...
''&size(16){これで「バトルシーンの冒頭からバトルシーン...
----
- ''&size(16){作成したスプライトをセットする};''
これまで作成した2つのスプライトを、バトルに入った時に再生...
''&size(16){18.};'' ゲーム定義＞システムリソースの「バト...
''&color(red){(!)};''Ver.1.9の時点では、スプライトツ...
これでマップからバトルに移行する際、画面が4色の帯で...
#ref(./スプライトの作り方_18.png,40%)
#br
''&size(16){19.};'' バトルの冒頭からバトルシーンへ移行す...
[[コモンイベントパレット]]もしくは[[コモンイベントエディ...
--- イベント開始条件は「戦闘開始時」
--- [[エフェクトの表示:https://rpgbakin.com/pukiwiki/?%E4...
表示位置は「画面の中心に表示する」、「完了するまで待つ...
#ref(./スプライトの作り方_19.png,40%)
#br
''以上でスプライトを使ったバトルシーンへの遷移が完成しま...
***目パチ・口パクの作成方法 [#i30684b1]
会話イベントなどで使うキャストのデータの作成時、、目パチ...
-目パチ用のアニメーションを置くレイヤー名 … eyes
-口パク用のアニメーションを置くレイヤー名 … mouth
#br
このレイヤー名にすることで、[[会話を表示:https://rpgbakin...
-- まばたきの間隔 \blspd[秒]
-- まばたきの確率 \blate[%]
-- 口パクの速度 \lipspd[倍率]
#br
スプライトツールからスプライトセット”chr001”のモーション...
#ref(./スプライトツール_目パチ口パク.png,40%)
#br
//**アニメーションデータの作成方法 [#be66be9e]
//ここでは、キャラクターの目パチ、口パクアニメの作成方法...
//
//#ref(spritetool-jp.png)
//１．マスターメニューから「リソース管理」を開く。
//
//２．２Dスタンプ→イメージを選択します。
//３．「追加」をクリックし、任意の画像を選択してインポー...
//#ref(spritetool03.png)
//#ref(spritetool04.png)
//アニメーションする画像は、「テクスチャの設定」で「スラ...
//この場合は横分割数が２、縦分割数を７と設定します。''会...
//５．「２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.再生時間（フレーム）を設定します。ここでは、真ん中の...
//#ref(spritetool13.gif)
ページ名:
![[PukiWiki]](./skin/BAKIN_logo_92.png "[PukiWiki]"){kind=logo}
