DynamicAnimation&Motion サンプル技(セルの部分描画)【RPGツクールMZ&MVプラグイン】

2022年04月30日

 このページはDynamicAnimation(MZMV)および、DynamicMotion(MZMV)プラグインの解説の一部です。

 NRP_DynamicAnimationMZ.js(ver1.19)およびNRP_DynamicAnimation.js(ver1.261)で実装したセルの部分描画機能を使ったサンプルです。
 少し扱いが難しい機能なので、順序立てて説明しています。

 なお、MVアニメにしか対応していませんので、MZの場合はDynamicAnimationMZからMVアニメを呼び出すプラグインが必要です。

目次



地面から突き出す槍1(2022/04/28)


 セルを上側から徐々に描画することで地面から突き出す槍のような演出を行います。


 まず前提として突き出す槍のアニメーションが必要です。
 縦長の槍のような画像なら何でも構いませんが、この例では『Ice2』の10番目のパターンを5フレームほど貼りつけています。合成方法は『通常』のほうがいいかも。
 作成したアニメをスキルに設定してください。


<D-Animation>
repeat = 5 // 繰り返し回数
interval = 2 // 間隔
sy = b.y // 対象の足元座標
ey = sy - (192 / 2) // 終点
cellEndY = t/et // 終了部位(時間経過で0->1に変化)

sxRandom = 100 // X座標のバラツキ
syRandom = 20 // Y座標のバラツキ
</D-Animation>

// 座標を保持
<D-Animation:keep>
opacity = 255 * (1 - t/et) // 徐々に透明化
</D-Animation>

 『cellEndY』がセルの描画範囲(縦)の終点です。
 例えば、値が『0.5』ならば、セルの上端から半分までの範囲を描画します。
 この値が最初は『0』から始まり、最後は『1』になるという数式が『cellEndY = t/et』です。これにより、セルを上側から徐々に描画しています。

 『ey = sy - (192 / 2)』は槍が突き出す位置を調整するための数式です。
 『192』はセルの縦幅を意味する固定値です。
 通常、セルの描画範囲が伸びるに従って、セルの下端も下へと移動していってしまいます。そこでアニメーションを逆方向へ移動させることで下端が移動しないように調整しています。

 keep型テンプレートはアニメーションの全体が現れた後に停止状態を表示するためのものです。keepについては説明済みなのでリンク先をご覧ください。
 なお、効果音やフレーム長などの演出を別々にしたい場合は、上と下の<D-Animation>で別のアニメを指定してください。これは説明用のサンプルなので手抜きです。

地面から突き出す槍2(2022/04/28)


 しかしながら、上のサンプルには若干の問題があります。
 地面から氷の槍全体が突き出た後、さらに少し上に移動してから停止します。全体が表示された段階で停止して欲しいところですが、若干のズレがあります。

 なぜ、そうなるかというとセルの大きさが192ピクセルだからです。


 上記の画像の通り、赤線部分の空白が実際には存在します。上のサンプルでは空白部分を含めた192ピクセル全体が表示されるまで、処理が続いていたというわけですね。

 192ピクセル全体が埋まるような画像なら問題ないのですが、現実には空白がある場合がほとんどです。そんなわけで、その空白を考慮したサンプルが次になります。


<D-Animation>
repeat = 5 // 繰り返し回数
interval = 2 // 間隔
sy = b.y // 対象の足元座標
ey = sy - (192 * 0.7 / 2) // 描画Y座標の調整
cellStartY = 0.15 // 開始部位
cellEndY = 0.15 + 0.7 * t/et // 終了部位(0.15->0.85に変化)

sxRandom = 100 // X座標のバラツキ
syRandom = 20 // Y座標のバラツキ
</D-Animation>

// 座標を保持
<D-Animation:keep>
cellStartY = 0.15
cellEndY = 0.85

opacity = 255 * (1 - t/et) // 徐々に透明化
</D-Animation>

 まず空白部分を除いた描画範囲を決める必要があります。
 今回の氷画像については、上下それぞれ15%をカットします。従って描画範囲は15〜85%としました。
 ※試してみておかしかったら、描画範囲は適当に調整してください。

 『cellStartY = 0.15』『cellEndY = 0.85』という記述が描画範囲の開始〜終了です。これにより余計な部分を除去しています。
 最初の<D-Animation>については、上のサンプルと同様に時間変化を取り入れる必要があります。それが『cellEndY = 0.15 + 0.7 * t/et』の記述に相当します。15〜85%に変化するため、その差分の0.7(70%)ですね。

 忘れてはいけないのが『ey = sy - (192 * 0.7 / 2)』の部分です。
 全体の70%だけを切り取ったため、移動の変化量も元の70%になります。

地面から射出する槍(2022/04/29)


 今度は突き出すだけでなく発射します。
 さらには煙を付加しました。セルを切り取った断面を目立たなくする効果もあるのでオススメです。

 煙についてはなんでもよいですが、今回は『Ice1』のパターンで作っています。岩の槍なら『Earth1~3』とかも使えますしお好みで。


// 煙
<D-Animation>
id = 1 // 煙のアニメーション番号
repeat = 10 // 繰り返し回数
interval = 2 // 間隔
sy = b.y // 対象の足元座標
sxRandom = 100 // X座標のバラツキ
syRandom = 20 // Y座標のバラツキ
</D-Animation>

// 煙の位置を引き継いで氷槍登場
<D-Animation:keep>
id = 2 // 槍のアニメーション番号
delay = 1 // 時間差
ey = sy - (192 * 0.7 / 2) // 描画Y座標の調整
cellStartY = 0.15 // 開始部位
cellEndY = 0.15 + 0.7 * t/et // 終了部位(0.15->0.85に変化)
</D-Animation>

// 氷槍を上に移動
<D-Animation:keep>
ey = sy - 500
cellStartY = 0.15
cellEndY = 0.85
</D-Animation>

 idの部分には自分で作成したアニメーションを設定してください。
 先に煙のアニメーションから入って、その位置を槍に継承したほうがスムーズです。

突き刺さる槍(2022/04/30)


 発射した槍が対象に突き刺さります。


 槍についてはこれまでと同じ『Ice2』の固定パターンですが、今回はさらにアニメーションエディタ上で−90度回転させて左向きにしています。
 ただし、セルの切り取りは、あくまで元の素材の向きが基準であることに注意してください。この例では元の素材が上向きなので、やはり上から下に向かって切り取っています。
 ※左向きの素材を用いる場合は項目名が『cellStartX』『cellEndX』となります。

 着弾については上で使用した煙をそのまま流用しています。

// 槍(投げる)
<D-Animation:shotRandom>
id = 1// 槍のアニメーション番号
repeat= 5
interval = 2
sx = a.x - 48 * mirroring
sy = a.y - a.height
cellStartY = 0.15
cellEndY = 0.85
</D-Animation>

// 槍(刺さった状態)
<D-Animation:keep>
addX = 192 * 0.35 / 2 // X座標微調整
cellStartY = 0.5 // 開始部位

cellEndY = 0.85 // 終了部位
opacity = 255 * (1 - t/et) // 徐々に透明化
</D-Animation>

// 着弾アニメ
<D-Animation:keep>
id = 2 // 着弾のアニメーション
</D-Animation>

 idの部分には自分で作成したアニメーションを設定してください。

 『cellStartY = 0.5』は刺さった状態を表現するため、セルを半分だけ表示しているという意味です。
 セルを削ったことによってX座標がズレるので『addX = 192 * 0.35 / 2』で調整しています。この『0.35』はcellStartY同士(0.5 - 0.15)の差分です。

横穴から射出する槍(2022/04/30)


 横穴から現れた槍を発射します。
 さらにスキルの範囲拡張プラグインとの組み合わせで横列に攻撃します。


 『槍』の他にも『穴』と『着弾』のアニメーションが必要です。

 槍については『Darkness2』の固定パターンを使用し、さらにアニメーションエディタ上で−90度回転させて左向きにしています。今回は比較的大きな素材画像だったため、cellStartY は指定していません。

 穴については『Darkness4』の固定パターンを使用していますが、黒い丸なら何でもOKです。DynamicAnimation側で縦に引き伸ばしています。開始時の拡大および終了時の縮小については、普通にアニメーションエディタ側で設定しています。

 着弾についても『Darkness4』で作成していますが、爆発っぽいアニメーションなら何でも構いません。手っ取り早くやりたいなら『107: 無属性/単体2』をそのまんま指定してもOK。

// 横列攻撃
<RangeEx:horizontal>

// 穴
<D-Animation>
id = 1 // 穴のアニメーション番号
position = 3 // 全体表示
sx = defaultX + 200 * mirroring // 全体表示位置より右に表示

sy = b.y - b.height/2 // 縦の中央
scaleX = 0.5 // 横に縮める
scaleY = 3 // 縦に伸ばす
z = 7 // 槍より下に表示
</D-Animation>

// 槍(出現)
<D-Animation>
id = 2 // 槍のアニメーション番号
delay = 3 // 時間差
repeat = 10 // 繰り返し回数
interval = 2 // 間隔
position = 3 // 全体表示
sx = defaultX + 200 * mirroring
sy = b.y - b.height/2
ex = sx - (192 / 2) * mirroring // 描画X座標の調整
syRandom = 60 // Y座標のバラツキ
cellEndY = t/et // 終了部位
</D-Animation>

// 槍(発射)
<D-Animation:keep>
ex = sx - 500 * mirroring
</D-Animation>

// 着弾エフェクト
<D-Animation:random>
id = 3 // 着弾のアニメーション番号
delay = 7 // 時間差
repeat = 10
interval = 2
</D-Animation>

 idの部分には自分で作成したアニメーションを設定してください。

 『position = 3』を指定することによってアニメーション(穴と槍)が敵全体に対して一つだけ表示されるようになります。
 この際、『sx = defaultX + 200 * mirroring』にある『defaultX』という値が敵全体の中央となるX座標です。その200ピクセル右から、穴と槍が出現するという仕組みですね。

 一方で着弾に関しては対象毎に表示しています。

 なお、mirroring指定によって、敵が使用した場合も自動で左右反転されます。

 >DynamicAnimationMZプラグインに戻る
 >DynamicAnimationプラグインに戻る
 >DynamicMotionMZプラグインに戻る
 >DynamicMotionプラグインに戻る
 >RPGツクールMZ&MV目次に戻る
posted by 砂川赳 at 10:55 | RPGツクールMZ&MV | このブログの読者になる | 更新情報をチェックする