切り札演出を、画像部品の組み合わせで1体1つずつ作った話
開発中の収集RPG「四十秒のオリ図鑑」には、モンスター——オリと呼んでいます——が主を含めて55体（2026年8月18日時点）いて、それぞれ固有の切り札技を持っています。技があるなら演出が要ります。55通り。個人開発でこれは、正直ひるみました。
最初は「部品×動き」の掛け算でごまかした
エフェクト用の小さな画像部品を32個だけ発注しました（2026年8月18日時点の数。以下の数字も同じ）。星砂、波紋、音波、メダル、足あと、クレーンのアーム。これに「降る・突く・弾ける・広がる・のぼる・走る・ゆれる・斬る・回る」の9動作をコードで用意して、1体につき部品1つと動き1つを割り当てる。32×9で理屈のうえでは288通り作れます。足りるはずでした。
実際に足りませんでした。数がではなく、質がです。自分のスマホで図鑑を埋めながら遊んでいると、音波リングを使う技が6体もいて、名前だけ違う同じ光り方が続く。せっかく技名は1体ずつ考えたのに、画面がそれを裏切っていました。
振り付けをデータにする
作り直すにあたって、1体=部品1つではなく、1体=ステップの配列にしました。各ステップは部品・動き・枚数・大きさ・開始遅延を持ちます。
kasabito: [{ p: "amadare", m: "fall", n: 12 },
{ p: "hamon", m: "ring", n: 4, s: 0.8, d: 0.35 }]
// 雨だれが12粒降って、0.35秒おくれて波紋が広がる
こうすると、同じ部品でも順序と間で別の演出になります。メダル落としの澱は「なだれ落ちてから跳ねる」、メダルを押し出す台の澱は「弾けてからこぼれ落ちる」。使っている絵はどちらも同じメダル1枚です。水切りの石の澱は、石が水面を走る動きに波紋を3つ、0.13秒刻みで置きました。技名が「みずきりさんだん」なので、波紋は3つでなければいけません。
55体ぶんの振り付けを書くのは、思ったよりコードの仕事ではなく作詞に近い仕事でした。そのオリが何の澱なのかをもう一度考えて、雨だれなら落ちたあとに何が起こるかを書く。データを書き終えたころには、図鑑のテキストより演出のほうがそのオリに詳しくなっていました。
ポケモンBWのりゅうせいぐんに教わった
枚数を増やしても、ばらまくだけでは迫力が出ませんでした。参考にしたのは携帯機時代のポケモンの大技です。見直して気づいたのは、あれが一枚絵の派手さではなく段構成でできていることでした。画面が暗転する。隕石が尾を引いて落ちる。着弾して閃光が走る。画面が白く明滅する。工程のひとつひとつは地味です。
そっくり真似しました。切り札の再生時はまず舞台に暗いベールを敷き、部品は残像を2枚引いて動かし、降下系は着弾点に閃光を置き、大威力の技だけ最後に画面全体を明滅させる。さらにダメージ表示を着弾の瞬間まで遅らせました。数字が閃光と同時に出るだけで、同じ計算結果がずいぶん痛そうに見えます！
残骸は必ず拾う
ひとつだけ実装の注意を書き残しておくと、この方式は使い捨てのDOM要素を1回の技で最大40個ほど作ります。演出が終わったらレイヤーごと確実に消すこと。消し忘れた透明な要素が画面に積もっていくバグは、目に見えないぶんたちが悪いです。うちでは生成した要素を1つの親レイヤーにまとめて、1.7秒後に親ごと消しています。
55通り書き終えて分かったのは、演出の個性は部品の数ではなく順序と間から生まれる、ということでした。32個の絵は、まだ当分足りそうです。