ドット絵 攻撃モーション作り方|RPG風4〜8コマ
ドット絵 攻撃モーション作り方|RPG風4〜8コマ
RPG風の剣攻撃は、感覚でコマを増やすよりも、待機から構え、攻撃、フォロースルー、戻りまでを主要ポーズに分けて設計したほうが、32x32でも64x64でも破綻なく組めます。
RPG風の剣攻撃は、感覚でコマを増やすよりも、待機から構え、攻撃、フォロースルー、戻りまでを主要ポーズに分けて設計したほうが、32x32でも64x64でも破綻なく組めます。
この記事では、横向きや3/4見下ろしのRPG系キャラを前提に、まず4〜6コマで形にし、必要な場面だけ6〜8フレームへ拡張する基準を整理します。
実制作では、32x32だと1pxの差分が埋もれて見えず、2px動かした瞬間に剣筋や体重移動が読めることがよくあります。
構えも長く取りすぎると操作が鈍く感じるので、前振りは1フレーム前後に絞り、武器軌道やスマーフレームで速度感を補う設計が結果として強く出ます。
重心移動の幅、残像の置き方、8〜12FPSと15〜24FPSの使い分け、入力遅延感を避けるタイミング、さらにPNG連番、GIF、スプライトシート運用まで含めて、実装にそのまま持ち込める形でまとめます。
ドット絵の攻撃モーションは何を作れば成立するのか
最小の4ポーズで成り立つ条件
攻撃モーションは、まず「待機・構え・攻撃・フォロースルー」の4段階に分けると設計が崩れません。
ここでいう待機は、他の歩きや待機アニメと接続する基準ポーズです。
重心、足の接地、頭の高さ、武器の持ち位置をここで固定しておくと、攻撃だけが浮いて見える事故を防げます。
RPG風アクションでは、1コマごとの情報量より「今どの段階か」が読めることのほうが優先されます。
対人の読み合いを前提にした格ゲー風は、細かな駆け引きのために前振りや差し返しの時間も意味を持ちますが、見下ろしや横アクション寄りのRPGでは、入力してから何が起きたかが即座に伝わることのほうが価値になります。
構えは、前振りを見せるコマです。
ただし長く取りすぎると、押したのに出ない感触が残ります。
32x32のような小さなスプライトでは、構えの差分を1pxだけ動かしても埋もれがちなので、腰を2px後ろへ引き、頭を1px下げるくらいの差を出すと意図が見えます。
剣を持つ腕は少し後ろに畳み、肩もわずかに引くと「次に前へ出る」準備ができます。
攻撃は、もっとも情報を絞るコマです。
ここでは腕と武器を3〜4px前方へ出し、体幹も同方向へ乗せます。
32x32では、腕だけを動かすと振った感じが弱くなりやすいので、肩・胸・腰のどこか1か所でも前進させると当たりの強さが出ます。
横向きなら武器の先端位置、3/4見下ろしなら剣筋の角度と胴体の向きが、読める攻撃かどうかを分けます。
フォロースルーは、振り切ったあとの余韻です。
ここを省くと、攻撃が紙芝居のように見えます。
反対に長くしすぎると、操作に対して戻りが重く感じられます。
4ポーズ構成では、このフォロースルーを「振り切り」と「戻りの入口」を兼ねる1コマとして設計するのが基本です。
武器だけ先に止めず、腕と胴体が少し前へ流れた形にすると、打撃でも斬撃でも力の抜け方が自然になります。
自分の作業でも、最初の攻撃モーションはこの4ポーズだけで組みます。
Asepriteのタイムラインで主要ポーズだけ並べて確認すると、どこで読めなくなるかがすぐ見えます。
4コマで成立しないものは、先にコマ数を増やしても整いません。
まずは基準点をそろえ、構えで後ろに引き、攻撃で前へ出し、フォロースルーで抜く。
この骨組みが見えてから中割りを足すほうが、修正量も少なく収まります。
5ポーズ化で増す“迫力”の正体
4ポーズで形になったあと、もっとも効果が高い追加は「攻撃直後のつなぎ」1コマです。
増やす場所を前振り側にするか、振り切り側にするかで印象は変わりますが、RPG風アクションでは攻撃の直後に1枚置くほうが、迫力と操作感が両立します。
理由は単純で、入力に対する反応はそのまま保ちつつ、「当たって抜けた」感触だけを濃くできるからです。
この1コマは、攻撃ポーズとフォロースルーのあいだを埋める役目です。
攻撃で武器が最前に出たあと、次のコマで少しだけ軌道を流し、胴体の重心を追いつかせると、ヒットの余圧が生まれます。
剣なら刃先をそのまま止めずに少し下げる、槍なら突き切ったあとに肩が前へ残る、斧なら刃の重さに引かれて腕が半歩遅れる、といった処理です。
ここでスマーフレームや短い残像を混ぜると、速さの印象も補えます。
実際に4ポーズの剣振りへこの「攻撃直後のつなぎ」を1コマ足したとき、見た目の変化は枚数以上に大きく出ました。
4コマ版では、構えから振ってそのまま止まるため、当たり判定だけ先に出たような硬い印象が残っていました。
そこへ、剣先だけ少し先に抜け、胴体が半拍遅れて追いつくコマを入れると、打った瞬間の反発が見えるようになります。
入力した直後に攻撃が出る気持ちよさはそのままなのに、効いた感じだけが増すので、少ない工数で最も見返りが大きい追加でした。
32x32なら、このつなぎコマでも差分は小さく設計したほうがまとまります。
攻撃コマで腕と武器を3〜4px出したあと、つなぎでは武器先端を1〜2px流し、腰は攻撃位置のまま、頭だけ1px戻すと、振り抜きの途中に見えます。
フォロースルーではそこから胴体全体を少し引き戻す形にすると、前へ出た力が回収されます。
5ポーズ構成が効くのは、動きを増やすからではなく、最速の瞬間と止まる瞬間のあいだに「抜け」を作れるからです。
見下ろしRPGでは、敵との距離感や向きの都合で、攻撃が斜めに見えることも多くあります。
その場合も考え方は同じで、最前の1枚のあとに、武器の軌道をわずかに曲げたつなぎを入れると、空間の奥行きが見えます。
格ゲー風のように何フレーム目で当たるかを精密に読ませる設計とは少し違い、RPG風では「いま振った」「ちゃんと届いた」が一目で伝わることが先です。
5ポーズ化は、その読ませ方を崩さずに演出密度だけ上げられる手法です。
6〜8フレーム拡張の判断基準
6〜8フレームへ広げる価値が出るのは、スプライトが大きいときか、武器の重さや身体の慣性を見せたいときです。
64x64になると、32x32では1コマでまとめていた差分を、前振り、加速、命中、抜け、戻りに分解しても情報が潰れません。
大剣、槍、ハンマーのように軌道が長い武器では、重心移動と武器遅れを別コマにしたほうが、重量感がはっきり出ます。
逆に、短剣の素早い一閃や雑魚敵の基本攻撃は、6〜8フレームに広げるとテンポを削りやすく、見返りが薄くなります。
制作コストもここで一段上がります。
4〜5ポーズなら主要ポーズの設計が仕事の中心ですが、6〜8フレームでは中間の意味づけが必要になります。
たとえば64x64の剣攻撃なら、待機、構え、加速、攻撃、攻撃直後の抜け、フォロースルー、戻り入口、待機復帰という分解になります。
どのコマも輪郭、重心、武器角度、接地足の位置がつながっていないと、枚数だけ増えても滑らかには見えません。
作業時間も、単純に4コマの倍にはならず、整合性を取るぶん修正回数が増えます。
標準的なピクセルアニメの再生速度は8〜12FPSに収めるとコマの差が読み取りやすく、攻撃エフェクトや高速動作だけを15〜24FPS寄りにすると速度感が立ちます。
6〜8フレーム構成では、この速度設計も一緒に考える必要があります。
全部を速く流すと中割りの意味が消え、全部を均等に見せると重く感じます。
そこで、前振りを短く、攻撃とその直後を速く、フォロースルーを少しだけ見せる配分にすると、入力感と演出の両方が整います。
Asepriteのオニオンスキンで前後フレームを透かして確認すると、6〜8フレーム構成でも基準点のズレを抑えやすくなります。
Aseprite はエクスポート周りのドキュメントに CLI や自動化に関する記述があるため、スクリプトや CI で PNG 連番やスプライトシートの書き出しを自動化できる可能性があります。
ただし、コマンドの可否や挙動、ライセンス条件は配布形態やバージョンで異なることがあるので、CI 等へ組み込む際は公式ドキュメント、。
EDGEは GIF 出力で素早く試作するのに向きますが、タイムラインやオニオンスキン相当の細かなフレーム管理が必要な場合は現行版の機能を確認してから選定してください。
準備:32x32か64x64か、何コマで始めるか
最初に決めるべきなのは、キャンバスを32x32か64x64かのどちらにするかです。
ここが曖昧なまま描き始めると、あとで差分の設計もフレーム数も全部揺れます。
加えて、立ち絵と攻撃の全コマで、足裏か腰のどちらかを基準点として固定しておく前提を先に作ります。
横向きなら接地している足裏、3/4見下ろしなら骨盤の中心や接地足の位置を固定すると、他モーションと並べたときにキャラだけ上下左右へ跳ねる事故を防げます。
32x32の向き不向き
32x32は、最初の攻撃モーションを組むサイズとして扱いやすい部類です。
画面内での視認性を優先しやすく、どのコマで何を読ませるかを絞り込めるからです。
待機、構え、攻撃、フォロースルーという主要ポーズの骨組みを確認するには、この密度がちょうどいいことが多いです。
その代わり、差分は小さく刻むより大きめに切るほうが伝わります。
32x32では1pxだけ腰を下げても、再生すると変化が埋もれる場面がよくあります。
自分の作業でも、腰を1px落とした構えは「少し位置がズレた」程度にしか見えず、2px下げた瞬間に初めて溜めが読める差になりました。
小さいサイズほど、情報量を増やすよりも、意味のある差分をはっきり置くほうが効きます。
腕、腰、武器を全部同時に細かく動かすより、どこを見せ場にするかを先に決めたほうがまとまります。
たとえば剣攻撃なら、構えで腰を2pxほど引き、攻撃で腕と剣先を前へ出す、フォロースルーで頭か肩だけ少し遅らせる、といった設計です。
輪郭の変化がはっきり見えるので、少ないコマでも「振った」ことが伝わります。
32x32が向くのは、雑魚敵の基本攻撃、プレイヤーの通常斬り、短剣のような短い軌道のアクションです。
逆に、大剣の重さ、槍の伸び、腕と胴体の捻りを別々に読ませたいモーションは窮屈になりやすく、1コマに詰め込んだ情報が潰れます。
小さいサイズは省略が前提で、描けるものが少ないのではなく、何を捨てるかを決めやすいサイズだと考えると設計が安定します。
64x64の向き不向き
64x64は、32x32で一体化していた動きを分解して見せたいときに力を発揮します。
腕、腰、武器の関係を別々に設計できるので、重心移動や溜め、振り抜き後の余韻まで段階的に置けます。
32x32では2px単位で見せていた差分も、64x64なら1px刻みの変化が表情として残ります。
このサイズでは、腕だけを先に出して、腰は半拍遅らせる、武器だけさらに遅らせる、といった分離が効きます。
剣より大きい武器や、布・マント・髪の追従まで見せたい場合も、64x64なら1コマごとの役割がはっきりします。
特にRPG風の斬撃でも、武器の軌道、肩の開き、腰の戻りを別コマで拾えるので、重さや勢いが出しやすくなります。
ただし、広いから描き込めば良いわけではありません。
64x64で破綻しやすいのは、動かせる場所が増えた結果、全部を少しずつ動かしてしまうパターンです。
そうなると輪郭の焦点がぼやけて、何が起きたのか読み取りにくくなります。
64x64でも基準点は固定し、主役になる差分を腕なのか腰なのか武器なのかで決めてから、中間コマを足す流れが崩れません。
サイズ選びの目安を表にすると、最初の判断が整理しやすくなります。
| 項目 | 32x32 | 64x64 |
|---|---|---|
| 視認性 | 差分は大きめに置くと読める | 1px刻みの差も活きる |
| 差分設計 | 情報を絞り、輪郭中心で見せる | 腕・腰・武器を分けて設計できる |
| 向くコマ数 | 4〜5コマから始めて必要なら拡張 | 5コマ以上で分解すると密度が出る |
フレーム数とFPSの初期設定
最初の試作段階では、4〜5コマで組むのがちょうどいい出発点です。
待機、構え、攻撃、フォロースルーに、必要ならつなぎを1コマ足すだけで、骨組みの良し悪しが見えます。
この段階で読めない動きは、コマ数だけ増やしても改善しません。
そこから、武器の重さや加速感、戻りの余韻を見せたくなったら6〜8フレームへ広げます。
攻撃モーションは6〜8フレーム前後にすると扱いやすく、構えから加速、命中、抜け、戻りまでを無理なく分解できます。
32x32でも6〜8フレームが成立する場面はありますが、まずは4〜5コマで芯を作り、足りない情報だけを追加していくほうが描き直しが減ります。
再生速度の初期値も先に置いておくと、体感が揺れません。
通常のピクセルアニメなら8〜12FPSが基準になります。
ここなら各コマの差分を読ませつつ、動きが止まりすぎません。
速い攻撃演出やエフェクト寄りの一閃は15〜24FPSまで上げる余地があります。
ただし、構えのコマまで長く見せると入力が鈍く感じるので、前振りは短めに置き、速さは攻撃コマとその前後で作るほうがゲーム向きです。
実作業では、最初に4〜5コマ、8〜12FPSで再生してみると、どこに不足があるかが見えます。
重く見せたいのに軽いなら、枚数不足というより、構えと攻撃の差が浅いことが多いです。
速く見せたいのに鈍いなら、前振りを長くしたことが原因になりやすいのが利点です。
枚数とFPSは別々に考えるより、1コマごとの役割と再生速度をセットで決めたほうが、修正の方向が明確になります。
💡 Tip
攻撃アニメの初期設定は、4〜5コマ、8〜12FPS、構えは短め、攻撃直後を速めに置くと崩れにくくなります。ここから6〜8フレームへ増やすかどうかを判断すると、不要な中割りを描かずに済みます。
PNG/GIF/スプライトシートの前提
保存形式も最初に決めておくと、あとで管理が乱れません。
制作データや中間書き出しはPNGを基準にします。
透過を保ったまま扱えますし、1コマごとの差分確認や差し替えにも向いています。
連番PNGで持っておけば、エンジン側での読み込みや差し替えも整理しやすくなります。
動きの確認や共有にはGIFが便利です。
短いループで見た目を確認できるので、構えが長いか、振り抜きが弱いかといった判断が早くなります。
ただし、GIFは確認用として考え、管理の本体はPNGに置くほうが安全です。
色や透過の扱いを含めて、実装に持ち込む基準データはPNGのほうが整えやすいからです。
Asepriteではタイムラインでフレームを整えたあと、PNG 連番やスプライトシートへまとめて書き出せます。
書き出し時のレイヤー/タグの切り分けやオフセット指定は便利ですが、項目名や挙動はバージョンで差が出ることがあるため、最終書き出し前に書き出しダイアログや公式ドキュメントで設定を必ず確認してください。
RPG系の実装では、外部フォーマットの都合で1行5セルのような並び方を前提にする場面もあります。
こうした規格へ寄せるかどうかにかかわらず、考え方は同じです。
1コマずつ気持ちよく見えることより、並べたときに腰や足裏の位置が揃っていることのほうが優先順位は上です。
準備段階でサイズ、コマ数、FPS、保存形式まで一度決めておくと、途中で「このコマだけ位置が違う」「GIFでは良かったのに実装で跳ねる」といった破綻を抑えられます。
ステップ1:ベースポーズと重心を決める
足位置と基準点の決め方
攻撃モーションの作業は、まず待機絵からそのまま地続きに見えるベースポーズを1枚作るところから始まります。
ここで先に決めるのは剣の角度ではなく、足位置を動かさないことです。
左右の足裏が置かれているドットを固定し、その上に腰、頭、肩、武器の基準点を載せていくと、構えに入った瞬間だけキャラが上下に跳ねる事故を防げます。
RPG風の剣攻撃は、派手な振りよりも「立っている位置が信用できるか」で見え方が変わります。
待機から構えへ移る最初の1コマで足裏の位置が合っていれば、上半身を少し傾けるだけでも攻撃の予感が出ます。
逆に、足元が1pxずれただけで全身がその場で泳いでいるように見え、重心移動ではなく作画ブレとして読まれます。
実制作ではこのズレがいちばん厄介なので、私は足裏のラインにガイド線を引くか、キャンバスの端に補助ドットを置いて、全コマで同じ高さに合わせる運用をよく使います。
見た目には地味ですが、これだけで待機、構え、攻撃、戻りを並べたときの安定感が一段上がります。
基準点は多く置きすぎると管理が散るので、最初は足裏と腰で十分です。
そこから頭頂、肩の外側、武器の持ち手側を確認点として追加します。
剣先まで毎回ぴったり固定する必要はありませんが、手元の位置と武器の根元は揃えておかないと、腕だけ後から貼り替えたような違和感が出ます。
ほかのモーションと並べる前提なら、アイドル、被弾、歩き出しの起点とも腰の高さを揃えておくと、実装後にキャラがコマごと沈んだり浮いたりしません。
陰影もこの段階で基準を決めておきます。
光源を左上固定にするなら、構えポーズでも攻撃ポーズでも、同じ面に同じ影が乗るように整理します。
向きが変わらない攻撃なら、剣を振ったからといって影の位置まで動かす必要はありません。
ポーズ差分とライティング差分が混ざると、動いたのが体なのか光なのか判別しづらくなるからです。
腰・頭・肩の1〜2px調整
ベースポーズで作るべきなのは、大きな動きではなく「これから振る」という予備動作です。
32x32では情報量が限られるので、腰を1px下げるだけでも待機との差が出ます。
そこに肩を左右へ1pxぶん回転させると、静止立ちではなく、重さを溜めた姿勢として読めるようになります。
ここで腕まで大きく引くと輪郭が崩れやすいので、まずは腰と肩で体幹の向きを変えるほうが芯が通ります。
頭は動かしすぎないほうがまとまります。
腰を落としたのに頭まで同じ量だけ下げると、ただ全身を沈めただけに見えます。
頭は据え気味にして、首元と肩の角度で前傾を出すと、重心だけが前に乗った印象になります。
実際の作業では、腰を1px下げ、肩線を傾け、頭の位置は据え置きか1pxだけ追従させるくらいで十分です。
この差分だけで、待機から攻撃へつながる最初の呼吸が生まれます。
64x64では分解できる場所が増えるので、同じ考え方をもう少し細かく設計できます。
腰を1〜2px動かし、肩を1px、手首も1pxずらすように分担すると、上半身全体を一度に曲げなくても力の流れが作れます。
ここで便利なのが、Asepriteのオニオンスキンです。
前後フレームを透かして見ると、腰だけが落ちたのか、肩まで同じ量で落ちているのかがすぐ見えます。
フレーム単位で微調整を繰り返す作業では、こうしたアニメ向けのUIがそのまま時短につながります。
ℹ️ Note
32x32では腰1pxと肩1pxで予備動作を見せ、64x64では腰、肩、手首を別々に1px単位で設計すると、描き込み量ではなく重心の流れで差が出ます。
この段階で意識したいのは、単体で格好いい1枚を作ることではなく、他モーションとの位置合わせです。
待機、構え、攻撃を横に並べたとき、足裏と腰の基準ドットが揃っていれば、再生したときの違和感はぐっと減ります。
逆にベースポーズだけ少し上へ置いてしまうと、次の攻撃コマで自然に見せるために全フレームを巻き込んで調整することになります。
1〜2pxの修正で済む段階で止めることが、その先の工程を軽くします。
武器と手の一体化
剣攻撃で破綻しやすいのは、武器だけが先に動いて見える状態です。
ベースポーズでは、剣を持つ手と武器を別々の部品として考えるより、持ち手から前腕、肩までを一本の流れとして置くほうが安定します。
手のドットが残ったまま剣だけ角度を変えると、握っているのではなく貼り付いているように見えます。
まず手元の基準点を決め、その点を軸に武器の角度を少しだけ変えると、一体感が出ます。
32x32では、武器の存在感を出そうとして剣先を大きく振りたくなりますが、ベースポーズではそこまで動かしません。
見せるべきなのは「振った後」ではなく「振る前」の圧です。
柄の位置を固定し、剣身の傾きを少し変えるだけで十分に構えとして機能します。
手首を無理に折るより、肩と肘の角度で武器の向きを作ったほうが、少ないドットでも自然につながります。
64x64では、手首1pxの差が効いてきます。
腰と肩の向きが変わっているのに、手元だけ待機絵のままだと武器が浮きます。
そこで、手首だけを1pxずらして柄の傾きを合わせると、上半身のひねりが武器まで伝わります。
剣の輪郭を描き込みすぎるより、持ち手の接続を先に整えたほうが、攻撃コマへ移ったときの説得力が残ります。
他モーションとの整合もここで取っておきます。
待機で持っている剣の手元位置と、攻撃ベースで持っている手元位置が揃っていれば、実装時に武器だけ跳ねることがありません。
スプライトシートへ並べたときも、基準が揃っていればタグごとの書き出しや差し替えで崩れにくくなります。
Asepriteはフレーム管理とスプライトシート出力をそのままつなげやすいので、ベースポーズの段階で原点意識を持っておくと後工程が素直に流れます。
EDGEで試作する場合も考え方は同じで、武器の見栄えより先に、手元と腰の位置を揃えておくと全体の重さがぶれません。
ステップ2:構えと初動で予告を作る
構えの移動量
攻撃の前に入れる“予告”は、待機との差が目で読めることが前提です。
静止絵の延長にしか見えないと、次の攻撃コマが唐突に出てきます。
そこで構えでは、ひざや腰を後方または下方へ2ドット前後ずらし、武器をいったん背側へ引きます。
体が少し縮み、次に解放される圧が見えるだけで、攻撃の読みやすさと気持ちよさが両立します。
32x32では、差分を遠慮すると埋もれます。
実制作では、腰を2px後ろへ引き、頭を1px下げ、剣や槍のような武器を背中側へ2〜3px戻すくらいで、ようやく「これから振る」が伝わります。
ひざも同時に1〜2pxたたむと、単に腕だけ引いた絵ではなく、全身で力を溜めた構えになります。
ここで武器だけ大きく動かして体幹が残ると、腕パーツだけ別レイヤーで引いたように見えるので、腰の後退と武器の引きはセットで考えるのが基本です。
64x64では、同じ2px移動でも見え方が変わります。
大きくずらすより、胸郭を1pxだけ回旋させ、肘を1〜2px後ろへ引き、手首を1px回すほうが、溜めの密度が出ます。
腰を強く引かなくても、上半身のねじれと前腕の後退で予告が成立します。
大きいサイズは情報量を増やせるぶん、移動量そのものより、どの関節で力を受けているかを分解して見せるとまとまります。
自分の作業では、構えを2フレームに分けたとき、たしかに重さは増しましたが、通常攻撃まで鈍く見えることがありました。
1発ごとの手応えを優先したい場面では有効でも、歩きや連打とつながる基本攻撃ではキビキビ感が落ちます。
そのため、通常攻撃の前振りは1フレーム基準で置き、強攻撃やチャージ系だけ2フレームへ拡張する設計に落ち着いています。
“入力遅延感”を避けるタイミング設計
構えは長いほど丁寧に見えるわけではありません。
プレイヤーがボタンを押してから反応するまでに間があると、絵としては良くても操作感は鈍くなります。
攻撃の予告は見せる必要がありますが、見せすぎると“溜め”ではなく“反応の遅さ”として受け取られます。
ここで基準になるのが、構えを1フレーム、長くても2フレームまでに収める設計です。
標準的なピクセルアニメの再生速度である8〜12FPSの中でも、攻撃は12FPS前後で組むと扱いやすく、1フレームは約83msです。
この長さなら、視認できる差分を入れつつ、入力直後に止まった印象を残しません。
待機、構え、攻撃、フォロースルーの基本構成を崩さず、構えだけを短く切ると、予告はあるのに反応は速いという状態を作れます。
32x32の通常攻撃なら、待機から1フレームで腰を2px引き、次フレームで一気に振る流れが素直です。
64x64でも考え方は同じですが、構え1フレームの中に胸郭1px回旋、肘1〜2px後退、手首1px回転を同時に入れると、短時間でも情報が足ります。
フレーム数を増やして説明するのではなく、1枚の中に予告の要素を圧縮する感覚です。
Asepriteで詰めるときは、タイムライン上で構えフレームを複製しながら長さだけ変えると、重さと反応速度の差がすぐ見えます。
オニオンスキンを併用すると、構えを1フレームにしたときも差分が足りているか確認しやすく、腰だけが動いて武器が置いていかれていないかも拾えます。
アニメ専用のUIが効くのは、こういう数十ミリ秒単位の調整です。
ℹ️ Note
通常攻撃の構えは1フレームで成立させ、強く見せたい攻撃だけ2フレームへ広げると、操作感を保ったまま重さを足せます。
光源と影の再配置ポイント
構えでポーズを変えたら、光と影もその姿勢に合わせて置き直します。
前のセクションで触れた通り、光源の向きそのものは固定で構いませんが、腕や脚の位置が変わったのに影が待機のままだと、体ではなく照明が動いたように見えます。
攻撃前の1フレームは短いからこそ、影の差分は少数精鋭で入れるほうが効きます。
わかりやすいのは、引いた側の腕です。
武器を背側へ2〜3px引いたなら、その腕の内側や胴体との境目に0〜1pxの影を足します。
たった1pxでも、腕が奥へ入った情報になります。
32x32では影を増やしすぎると輪郭が潰れるので、肩下かひじの付け根のどちらか一箇所で十分です。
64x64では、前腕と胸の重なりに細い影を入れると、胸郭の回旋と連動して見えます。
踏ん張りを見せるなら、前脚の接地影も動かします。
構えで重心が乗る足の下に1pxだけ影を広げると、床を押している感覚が出ます。
ひざをたたみ、腰を後ろへ引いたのに足元の影が変わらないと、上半身だけが演技しているように見えます。
逆に接地影が1px広がるだけで、体重がそこへ落ちたと読めます。
武器の影も、角度変更に合わせて整理します。
剣を背側へ引いたなら、刃の明るい面が減り、柄まわりか腕との接点に暗部が寄る形になります。
ここでも全部を描き替える必要はありません。
32x32は明部を1px削る、64x64は暗部を1px足す、その程度で十分です。
構えの役割は“見せ場”ではなく“予告”なので、光と影も一瞬で読める量に抑えると、次の加速フレームがいちばん映えます。
ステップ3:攻撃フレームで速度を出す
武器軌道の設計
攻撃の速さは、フレーム数を増やすよりも、どの線をどこへ通すかで決まります。
見せたい一撃は1〜2フレームに圧縮し、その前後で武器が通る弧をはっきり設計すると、短いアニメでも振り抜きが読めます。
剣なら手元から先端までを同じ角度で回すのではなく、支点に近い柄元は控えめ、先端ほど大きく走る形にすると、回転速度が視覚化されます。
静止画として見たときに、刃先だけが遠くへ飛んでいる配置になっていれば成功です。
32x32では、軌道を細かく刻むより、開始位置と通過位置の差を大きく取ったほうが伝わります。
刃が右上から左下へ落ちるなら、中間を丁寧に埋めるより、構えで背側に引いた位置と、攻撃フレームで相手前まで出た位置の落差を優先します。
1px単位で迷うより、弧の向きが読めるかどうかで判断したほうが、画面上では強く見えます。
64x64では、同じ弧でも密度を足せます。
刃先の軌道を先に決め、そのあとで手首、ひじ、肩、腰の順に追いかけると、武器だけが滑らず、体の回転で振っている絵になります。
ここで効くのが体側の連動です。
腰を攻撃方向へ1pxスライドし、反対肩を1px上げると、上半身にねじれが生まれ、武器の加速が腕だけの動きではなくなります。
斬る方向に腰が乗り、肩が開くことで、同じ1フレームでも打点に体重が入って見えます。
自分の作業では、先に剣の残像だけを派手に置いてしまい、あとからキャラを合わせる進め方をした時期がありました。
ただ、その描き方だと主役が剣筋のエフェクトになり、キャラ本体の回転や踏み込みが埋もれます。
反省してからは、まず本体のシルエットと武器軌道を決め、そのあとで補助として残像を足す順番に変えています。
この順序にすると、一撃の説得力が体から生まれます。
スマーフレーム/残像の入れ方
速度感を一気に押し上げるのが、モーションブラーやスマーフレームです。
ピクセルアニメでは滑らかなブラーを塗り込むより、1フレームだけ形を崩して伸ばすほうが効きます。
見せ場を長く居座らせるのではなく、一瞬だけ異常な形を通すから、目が「速い」と認識します。
先端ほどブラーを強めると、武器が回転しながら走った印象も乗ります。
32x32なら、刃の残像は2px幅前後、長さは3〜4pxを目安にするとちょうどよく収まります。
しかも入れるのは1フレームだけで十分です。
ここを太く描きたくなるのですが、何度も試した結果、幅を出しすぎると斬撃エフェクトの塊に見えてしまい、キャラの腕の向きや剣の実体が負けます。
小さいスプライトでは、残像は「動きを補足する線」であって、主役の面積を奪うものではありません。
2px程度に制限すると、刃の実体と補助線の境界が保てます。
64x64では、残像よりスマーフレームのほうが効く場面が増えます。
刃先だけを細く引き伸ばすのではなく、刀身そのものを一瞬だけ極端に伸ばした形に変え、次フレームで通常の形へ戻すと、加速のピークが作れます。
これは単なる作画の崩れではなく、速度のために形を誇張する発想です。
大きいサイズは情報量が多いぶん、通常形のままでは速さが散りやすいので、1フレームだけルールを崩す価値があります。
Asepriteのようにタイムラインとオニオンスキンがある環境では、通常の武器形状レイヤーを複製し、スマーフレームだけ別パターンで差し替えると調整が早く進みます。
前後フレームを透かして見ると、伸ばしすぎて軌道から外れていないか、残像の向きが本体の弧と食い違っていないかをすぐ拾えます。
こういう1フレームだけの異形は、静止画で見ると大げさでも、再生するとちょうどよく収まります。
💡 Tip
残像やスマーフレームは「足す」より「一瞬だけ通す」と考えると、速さが立ちながら本体の存在感も残せます。
接触を短く見せるコツ
当たった瞬間を長く見せると、重さではなく停止に見えます。
攻撃アニメの山場は、命中フレームを引き伸ばすことではなく、接触を短く切って前後差を大きくすることです。
命中は1フレームで置き、その前に加速、後ろに抜けを置くと、ヒットの鋭さが出ます。
止まって見える時間が短いほど、直前の速さが際立ちます。
この1フレームには、衝突の情報だけを濃く入れます。
武器を1〜2pxだけつぶし、まっすぐな刃をわずかに圧縮すると、素材が当たった瞬間の反力が見えます。
剣そのものを大きく曲げる必要はありません。
1〜2pxの圧縮でも、前後フレームがしっかり走っていれば衝撃として読めます。
あわせて手首やひじを止めるより、腰のスライドと肩の上がりを維持したまま接触させたほうが、体重を乗せた打点になります。
32x32では、命中フレームに情報を盛り込みすぎると潰れます。
火花、残像、つぶれ、のけぞりを同時に入れるより、武器の接触と体の捻りだけに絞ったほうが見やすくなります。
64x64では、同じ1フレームでも余白があるので、刃先のつぶれと腕の反動、腰の1px前進を併記できます。
ただし、接触点を長く見せない原則は変わりません。
密度は増やせても、滞在時間は増やさないほうが斬撃の気持ちよさが残ります。
実制作では、当たった瞬間を目立たせたいあまり、命中フレームを2フレーム続けて置いたことがありました。
静止画では迫力が出たのに、再生すると剣が相手に引っかかったように見え、抜けの鋭さが消えました。
そこからは、ヒットは1フレームに固定し、見せたい場合は停止時間ではなく前後の差分で強調する方針にしています。
接触を短く、通過を大きく。
この設計にすると、一撃が軽くならず、それでいて速さも失われません。
ステップ4:フォロースルーと戻りで重さを出す
行き過ぎ(オーバーシュート)の設計
攻撃フレームで打点を通したあと、そのまま待機へ戻すと、動きが途中で切れたように見えます。
そこで入れたいのが、腕や体が少しだけ行き過ぎるフォロースルーです。
剣を振り抜いた方向へ武器を2〜3px進め、腕、肩、上半身もそれに引っ張られる形で1〜2フレームだけ遅れて流すと、当たったあとに慣性が残った絵になります。
ここで止まらず抜けるから、ヒットの鋭さと重量感が同時に立ちます。
フォロースルーは、武器だけを先へ飛ばすのでは足りません。
肘が伸び切る、肩が少し開く、腰が半歩ぶん残る、といった反動を一緒に置くと、体全体で振った印象になります。
32x32では全部を細かく描き分ける余裕がないので、武器の先端と前腕の角度を優先し、胴体はシルエットの傾きで反動を見せると収まりがいいです。
64x64では肩と腰のズレも拾えるので、振り抜いたあとに胸が少し先へ出る形まで入れると、重心移動が読めます。
重い攻撃では、この余韻を削らないほうが効きます。
フォロースルーと戻りをそれぞれ1フレーム長めに取るだけで、武器の質量と反動が画面に残ります。
逆に、素早い短剣やテンポ優先の通常攻撃では、フォロースルーは残しつつ戻りを早めたほうが操作感と噛み合います。
同じ振り抜きでも、余韻を長く置くか、素早く回収するかでキャラクターの性格まで変わります。
1pxバウンスで締める
フォロースルーの次に効くのが、戻り側の小さな反発です。
振り抜き方向へ2〜3px行き過ぎたあと、そのまま待機へ吸い込むのではなく、逆方向へ1pxだけバウンスさせると、衝撃を受け止めて収束した動きになります。
この1pxがあると、止まり方に芯が通ります。
とくに剣や槍のような長物は、抜けたあとにそのまま無音で戻るより、反動を一度受けてから納まるほうが「手に重さが乗っている」絵になります。
自分も以前、戻りを急ぎすぎてテンポだけを優先したことがありました。
そのときは再生速度自体に問題がないのに、なぜか空を切ったような軽さが残りました。
原因は、打点のあとに衝撃を受け止める間がなかったことです。
そこに1pxの逆方向バウンスを1フレーム差し込むと、武器が反動を受けてから手元へ戻る流れが生まれ、同じ枚数でも納まりが一段よくなります。
見た目の差は小さいのに、再生した瞬間の説得力ははっきり変わります。
この1pxは、ただ位置を戻すだけでは弱くなります。
武器を1px返すなら、手首や肘の角度もほんの少しだけ戻し、胴体はすでに収束へ向かっている形にすると、局所的な震えではなく全身の反動に見えます。
32x32では、武器先端か手元のどちらか一方を基準にして差分を明確にすると読みやすく、64x64では先端1px、手首1px、肩は据え置きといった分配が効きます。
細かい差でも、前後の流れが整っていれば重さの印象は十分に立ちます。
💡 Tip
打点のあとに「行き過ぎる」「1pxだけ返す」の順番を守ると、停止ではなく反動として読まれます。
待機へ滑らかに戻す手順
バウンスのあとに必要なのは、待機ポーズへ雑に戻すことではなく、攻撃の余韻を残したまま1〜2フレームで収束させることです。
手順としては、まずフォロースルーで武器を振り抜き方向へ流し、次のフレームで1px逆方向へ返して反動を作ります。
そのあと、腕、肩、腰の順に待機へ近づけていくと、戻りがほどけるようにつながります。
武器だけ先に待機位置へ戻すと、体から切り離されたように見えるので、手元より胴体の収束をわずかに先行させると自然です。
待機へ戻すフレームでは、攻撃前と同じ姿勢をそのまま貼り戻さないほうが安定します。
直前まで強く振っていた体は、すぐには完全な左右対称に戻りません。
肩の開きや腰の傾きを少しだけ残した中間姿勢を1フレーム挟み、そこから待機へ着地させると、アニメ全体に流れが残ります。
待機アニメが別にある場合も、最初の待機1コマへ急に接続するのではなく、攻撃後専用の「半分戻った姿勢」を置くとループが綺麗につながります。
Asepriteで作るなら、タイムライン上で攻撃、フォロースルー、戻りをタグで区切っておくと調整が速いです。
オニオンスキンを重ねると、戻りフレームだけ武器先端が跳ねすぎていないか、肩と腰の収束順が逆転していないかが見えます。
自分はこの工程で、待機ポーズを複製してそのまま後ろに置くのをやめました。
攻撃後の1フレームだけ別物として設計したほうが、入力の切れ味を残したまま、武器に重さを感じる終わり方になります。
RPG風アクションらしく見せる応用
3/4トップダウンの奥行き表現
RPG風の見た目に寄せるなら、真上からの俯瞰ではなく、3/4トップダウンとして体の前後関係を整理すると一気にそれらしくなります。
ポイントは、奥行きを大きなパースで描くのではなく、脚と肩の前後差をわずかなピクセル差で見せることです。
前側の脚を1〜2pxだけ下側、あるいは手前側へ出し、後ろ脚は少し引っ込めます。
肩も同じで、前肩をほんの少し張り、後ろ肩を控えめにすると、平面的な立ち姿から抜け出せます。
自分はこの調整を入れる前、正面寄りの2D感が強く残っていました。
ところが3/4視点として前脚を2pxだけ手前に出した途端、キャラが床の上に立っている感じが出て、平板さが消えました。
図にすると小さな差なのに、再生したときの説得力は別物になります。
とくに剣を振る動きでは、足の前後が曖昧だと、その場で腕だけを回している印象になりがちです。
攻撃の軌道も、3/4視点では見せ方を少し変えると読み取りやすくなります。
剣筋の残像や弧を入れるなら、手前側をやや太く、奥へ回る側を細くすると、画面の中でどちらに振っているかが伝わります。
これは線の太さそのものより、手前側に1px多く面積を残す感覚に近いです。
残像を均一な太さで描くと記号的にはまとまりますが、RPGらしい斜め俯瞰の気配が薄れます。
手前に来る部分だけ存在感を強めると、武器がプレイヤー側へ振り抜かれた感触が出ます。
32x32では胴体の立体感を細かく描き込む余地が少ないので、前脚、前肩、武器の弧の3か所に差分を集中させるとまとまります。
64x64ではこれに加えて、腰のひねりや後ろ腕の遅れも入れられます。
いずれのサイズでも、奥行き表現は「全部に少しずつ」ではなく、「前後が読める場所だけをずらす」ほうがRPGの実用画として強く出ます。
4方向/8方向の設計と反転ルール
方向対応を始めるときは、絵を描く前に基準点と武器角度のテーブルを決めておくと破綻しません。
基準点は足元の接地位置、あるいは胴体中心のどちらかに固定し、方向ごとに持ち替えないことが前提です。
剣先の軌道だけを合わせても、柄の位置や手首の支点が方向ごとに揺れると、ゲーム内でキャラが跳ねて見えます。
先に「この方向では手元がどこに来るか」「剣が何度ぶん傾くか」を並べると、差分の管理が一気に楽になります。
4方向なら、上、下、左、右で武器の見え方を整理し、左右は反転で共用する設計が基本になります。
ただし、反転で済ませてよい範囲と、専用差分を作るべき範囲は分けたほうがいいです。
たとえば真横の斬撃は左右反転で成立しやすい一方、盾持ち、片側だけの肩当て、マントの流れ、利き手の強調が入るキャラは、反転した瞬間に重心まで逆転して見えます。
RPGの量産では反転を使わないと工数が膨らみますが、武器の持ち手と体重移動の向きまで反転して不自然になる絵は、専用差分に切り替えたほうが結果的に整います。
8方向になると、斜め方向の扱いが肝になります。
ここで真横と真上を単純補間すると、北東や南西が「どっちつかず」の角度になります。
斜めは専用差分として、肩の見え方、前腕の長さ、剣の弧の潰れ方を描き分けるのが定石です。
とくに3/4トップダウンでは、南東と北東で見える前脚が変わるので、同じ反転では足元の説得力が崩れます。
斜め専用差分を少なくとも攻撃ポーズだけでも持っておくと、移動時は反転主体でも、戦闘時の見栄えが一段上がります。
フレーム配分も方向数に合わせて切り替えると扱いやすくなります。
テンポ優先のスナッピーな攻撃なら、構え・攻撃・フォロースルーを短くまとめ、見た瞬間に切れる印象を優先します。
重い攻撃なら、構えを長めに取り、打点のあとにも余韻を残します。
自分がよく使う配分は、軽い通常斬りでは構え1フレーム、攻撃2フレーム、フォロースルー1フレーム、重い大剣では構え2フレーム、攻撃2フレーム、フォロースルー2フレームです。
合計としては攻撃アニメを6〜8フレームに収めると扱いやすく、64x64で重さやためを細かく見せたい場合は8〜12フレームまで増やす余地があります。
Aseprite のタイムラインで方向別タグを切っておくと、同じ配分ルールを複数方向へ横展開するときに崩れません。
💡 Tip
方向対応は「絵を増やす作業」ではなく「基準点と角度を固定する作業」と考えると、4方向でも8方向でも見た目が安定します。
ヒットエフェクト/砂埃の最小構成
RPGらしさを補う仕上げとして、ヒットエフェクトと足元の砂埃は効果が大きいです。
キャラ本体の枚数を増やさなくても、接触の瞬間に小さなスパークが入るだけで「当たった」と読めます。
ヒットエフェクトは大げさな爆発である必要はありません。
剣先の接触点に、短い十字や斜め線を組んだ小さなスパークを1フレーム、必要なら次の1フレームで少し散らす程度で十分です。
キャラのシルエットを隠さず、当たり判定の位置だけを示せるので、RPG戦闘の読みやすさと相性がいいです。
足元の砂埃も、動きに地面との接触を与える役目です。
踏み込みや振り抜きの瞬間に、接地した足の近くへ1px粒子を3〜4個だけ置くと、体重が乗った感じが出ます。
1フレームだけでも成立しますし、次のフレームで1個か2個を少し外へ散らすと、踏み込みの強さが伝わります。
これがない状態だと、キャラが床の上を滑っているように見えることがあります。
逆に粒子を増やしすぎると、サイズの小さいスプライトでは本体より砂埃のほうが目立ってしまいます。
ヒット時のスパークと足元の粒子は、役割を分けると整理しやすいのが利点です。
スパークは「接触点の通知」、砂埃は「重心移動の通知」です。
剣が速いのに軽く見えるケースでは、武器側だけにエフェクトを足すより、踏み込み足に小さな粒子を置いたほうが効く場面が多いです。
逆に、立ち位置を大きく変えないその場斬りでは、砂埃を控えめにしてヒットスパークを少し強めたほうが収まりがよくなります。
この種の補助エフェクトは、本体アニメの不足を隠すためではなく、ゲーム画面での情報整理として使うと上手くまとまります。
MV系のセルアニメのように1行5セル、各セル192x192pxの大きめエフェクト運用へ発展させることもできますが、まずはキャラ本体に添える最小構成から始めるほうが、攻撃の読みやすさとRPGらしい手触りの両方を確保できます。
小さなスパークと足元の1px粒子だけでも、剣の一撃がただのポーズ変化ではなく、地面と敵に干渉したアクションとして立ち上がります。
書き出しとスプライトシート管理
PNG/GIFの使い分け
納品データは各フレームを透過つきのPNGで保持し、実装用にはスプライトシートへまとめる形が基本です。
PNG はアルファ付きで輪郭を崩さず保存できるため、1コマごとの差分確認や差し替えに向いています。
Aseprite の書き出しや自動化に関しては公式ドキュメントを参照してください、エクスポート関連: やスクリプトで書き出しを自動化する際は、対応コマンド・パラメータおよびライセンス条件を事前に確認することを推奨します。
スプライトシートは、ゲーム内で位置がぶれないことを最優先にしてください。
各コマは一定グリッドで整列し、足裏か腰のどちらかを原点(pivot)として全フレームで同じ座標に揃える運用が堅実です。
実務では「原点を固定するテンプレート」を用意し、全フレームをそのテンプレートに合わせて配置するのが手戻りを減らします。
Aseprite の書き出し設定にはフレーム範囲やレイヤー/タグ選択、オフセット指定などがあり、これらを利用してシート出力できますが、“原点を自動で固定する専用のオプション”が常に存在するとは限りません。
ツールやバージョンによって設定項目名が異なるため、書き出す前にエクスポート設定を確認し、必要ならテンプレートへ流し込む工程を明示してください。
命名規則は早めに決めておくと管理が楽になります(例: キャラ名_方向_アクション_000.png)。
レイヤー分けは「本体」「武器」「影」「補助エフェクト」など役割で整理すると、差し替えや部分修正がしやすくなります。
ゲームエンジンへ取り込む段階では、ピクセルスナップとフィルタ設定にも触れておきたいところです。
補間が有効のままだと輪郭がにじみ、原点を揃えていても動きがぼやけて見えます。
等倍描画を前提に作ったドット絵は、まず補間なしで表示し、座標を整数で扱うのが基本です。
原点を固定したシートと、整数座標での描画が揃って、はじめてゲーム内の動きが締まります。
⚠️ Warning
原点は「あとで合わせる」ではなく、作業開始時点で基準を決めておくことを強く推奨します。足裏や腰のガイドをテンプレート化し、全フレームをそのテンプレートに合わせる運用にしておくと手戻りが減ります。Aseprite の書き出し設定ではオフセット調整が可能ですが、原点を自動で固定する専用オプションの有無や表記はバージョンによって異なるため、書き出し前にダイアログと公式ドキュメントで確認してください。
RPG Maker MV規格の要点
小さな素体をこの規格へ載せるときは、32x32や64x64の絵をそのまま左上へ置かず、セル中央へ基準を合わせて余白を管理します。
MV系のセルはエフェクト運用も前提にした大きさなので、素材が小さいほど余白の置き方で見え方が変わります。
中心位置が毎コマで動くと、実際にはキャラを動かしていないのに画面上で跳ねて見えます。
ここでも足元か腰の基準を決めて、各セル内の同じ位置へ置くことが効きます。
攻撃アニメの構成としては、実用上は10〜25セル前後に収めると扱いやすい場面が多いです。
もちろん上限まで使えますが、細かく刻みすぎるとRPGのテンポに対して情報過多になりやすく、管理コストも上がります。
待機系なら3〜4フレーム、攻撃なら6〜8フレーム前後を出発点にして、必要な技だけセル数を増やす組み方だと、MV規格のシートでも整理がつきます。
Asepriteで書き出す場合は、スプライトシート出力時にフレーム範囲やレイヤーを切り分けられるので、MV用のエフェクトだけを別シート化する流れも作れます。
制作段階では自由に組み、最終段階で「5セル区切りのMV規格」に合わせて並べ替える形にすると、作業中の窮屈さを減らせます。
規格に合わせるのは仕上げ工程でよく、モーション設計そのものまで窮屈にする必要はありません。
よくある失敗と対策
設計チェックリスト
攻撃モーションが弱く見える原因は、描き込み不足よりも設計の抜けで起きることが多いです。
とくに初心者の段階では、1コマずつ頑張って描くほど全体の流れを見失いやすく、気づくと「動いてはいるのに気持ちよくない」状態に入りがちです。
実際につまずきやすい失敗を設計段階で潰すための確認項目を絞って整理します。
32x32の通常攻撃でまず多いのが、予備動作である構えを長く取りすぎることです。
見栄えを出そうとして構えを2フレーム以上置くと、入力後に一度止まる印象が出て、斬るまでのテンポが鈍ります。
自分も最初は「予告があったほうが攻撃らしい」と考えて2フレーム構えを入れていましたが、1フレームへ縮めた途端にヒット確認が取りやすくなり、当たった感触と絵のタイミングが噛み合いました。
32x32の通常攻撃なら、構えは1フレーム、長くても約83msの感覚に収めると反応の鈍さが出にくくなります。
逆に、攻撃後の戻りが速すぎて軽く見える失敗もよくあります。
剣を振り切ったあと、すぐ待機へ戻すと「当てて終わり」の絵になり、重さや余韻が抜けます。
こういうときはフォロースルーのあとに1pxの小さなバウンスを1フレーム挟み、さらに最後の戻りを1フレーム追加すると、止まり方に粘りが出ます。
枚数を増やしたというより、減速の段階を見せたことで武器の重さが読める状態です。
見た目の違和感として多いのが、武器だけ動いて体が止まる状態です。
剣の軌道は大きく動いているのに、胴体が待機のままだと、腕から先だけを別の絵の上で滑らせたように見えます。
最低限連動させたいのは、腰を1px、反対側の肩を1px、前脚の接地影を1pxずらすセットです。
自分でも「武器だけ滑る」と感じた比較を何度も見返しましたが、腰を1px入れただけで、同じ剣筋でも体が振った絵として成立し始めました。
小さい差分でも、どの部位に配るかで印象は変わります。
フレームごとに位置がずれる問題も、序盤で直しておかないと後から崩れます。
剣先や頭頂部を見ながらコマを進めると、足元の基準が少しずつ流れ、ゲーム内ではキャラ全体が震えて見えます。
足裏の基準ドットをひとつ決めて、全コマでXとYを照合し、±1pxのズレでもその場で戻す運用が必要です。
勢いを優先してずれを残すと、攻撃そのものより立ち位置のブレが先に目へ入ります。
サイズに対して差分が小さすぎるのも、よくある見落としです。
32x32では1px差分だけだと埋もれる場面が多く、動いたつもりでも静止画に見えます。
基本は2px差分で輪郭を変え、何が起きたかを一目で読ませる設計が軸になります。
64x64になると1px刻みでも情報が通るので、腕、腰、武器を分けて段階的に動かし、部位ごとの時間差で密度を出すほうが合います。
サイズが上がったから差分を大きくするのではなく、サイズに応じて情報の置き方を変える発想が必要です。
確認用としては、次の5点を毎回同じ順番で見ると迷いません。
- 構えが長すぎず、通常攻撃なら1フレームで読める長さに収まっているかを確認する
- フォロースルーのあとに小さな反動があり、戻りが一瞬で終わっていないかを確認する
- 武器だけでなく、腰・反対肩・前脚の接地影が連動しているかどうかを確認する
- 足裏の基準ドットが全コマで固定され、X/Yのズレが残っていないかを確認する
- 32x32では2px差分、64x64では1px刻みと部位分離で情報量を確保できているか
ℹ️ Note
「動かした量」より「読める差分」を優先すると、少ない枚数でも失敗が減ります。とくに32x32は、遠慮した1pxより、意図のある2pxのほうが攻撃として伝わります。
デバッグの見方
修正の場面では、完成形を眺めて違和感を探すより、どのコマで何が止まっているかを切り分けて見るほうが早く進みます。
自分はAsepriteでオニオンスキンを重ねた状態と、等倍の再生結果を往復しながら確認しますが、見る順番を固定すると判断がぶれません。
先に武器の軌道を見たくなっても、足元、腰、肩、武器の順に見るだけで原因の切り分けが進みます。
構えが長いかどうかは、コマ単体ではなく「入力後に何フレーム止まって見えるか」で判断します。
構えポーズ自体が良い絵でも、通常攻撃でそこで足踏みして見えるなら長すぎます。
2フレーム構えた版と1フレームへ縮めた版を並べると、短いほうは斬撃の到達が早いだけでなく、当たり判定の発生位置を目で追いやすくなります。
テンポの問題は枚数の多さではなく、どこに時間を置いたかで決まります。
戻りが軽いときは、終点のポーズではなく、攻撃直後の減速が消えていないかを見ます。
振り切りから待機へ直線で戻していると、剣が紙のように軽く見えます。
フォロースルー後に1pxだけ逆方向へ跳ねるコマを挟み、そのあとで戻すと、止まる前に慣性が残った印象になります。
ここは描き込みよりタイミングの問題なので、1コマ足すだけで改善する場面が多いです。
武器だけ滑る印象は、体の中心線を表示して追うと見抜きやすくなります。
胴体の中心が待機位置に貼り付いたまま剣だけ移動しているなら、原因は明確です。
腰1px、反対肩1px、前脚の接地影1pxの最低セットを入れてから再生すると、剣の移動量は同じでも「腕だけ別レイヤーで流れている感じ」が消えます。
自分が比較用に作ったデータでも、腰の1pxを入れた版は、派手な中割りを増やした版より先に違和感が消えました。
フレームごとの位置ずれは、再生で見ると勢いに紛れますが、コマ送りするとすぐ見えます。
足裏の基準ドットを同じ場所に置き、各フレームのX/Yを確認すると、1pxのズレでも立ち位置の揺れとして拾えます。
ここを放置すると、攻撃が悪いのではなく原点が崩れているだけなのに、ポーズ全体を描き直す流れに入りやすいのが利点です。
まず基準点を直し、そのうえでモーションの質を見る順番が崩せません。
サイズに対して差分が足りないときは、全体をぼかして見たときに形が変わっているかで判断できます。
32x32で1px差分ばかり積むと、描いている本人には変化が見えても、再生では待機と攻撃の輪郭がほとんど同じに見えます。
その場合は細部を足すより、腕や剣先の位置を2px単位で置き直したほうが効きます。
64x64では逆に、大きな差分だけで押すと荒く見えやすいので、1px刻みで部位をずらし、情報を分散させたほうが滑らかにつながります。
デバッグでは「気になるところを直す」より、「どの失敗の型に入っているか」を先に決めると修正量が減ります。
構えの長さ、戻りの軽さ、体の連動不足、原点のズレ、サイズ不相応の差分不足。
この5つに分類して見るだけで、直す場所はほぼ特定できます。
初心者のうちは全部を同時に良くしようとしがちですが、失敗の名前が付くだけで、修正は一気に具体的になります。
まとめと次のステップ
次に作るべきモーションの順序
通常攻撃の作り方が見えたら、次は枚数を増やす前に、まず最小構成で一本仕上げる流れが安定します。
基準になるのは4ポーズです。
待機から構え、攻撃、フォロースルーまでを先に固め、そこへつなぎを1コマ入れて5コマ化すると、少ない枚数でも「当たった感触」が出ます。
32x32の段階では、この5コマがひとつの完成形になります。
ここで無理に中割りを増やすより、各コマの役割が読めるか、基準点が揃っているか、体の連動が入っているかを詰めたほうが、その後の発展が崩れません。
順序としては、通常攻撃の次に待機、回避、被弾を同じ基準点で揃えるのが自然です。
攻撃だけ単体で良くても、待機に戻った瞬間に足元がずれたり、回避だけ頭身が変わったりすると、セットとして見たときの統一感が崩れます。
通常攻撃で作った基準点、重心の置き方、頭と肩の比率をそのまま流用すると、1体分のスプライトセットとして管理しやすくなります。
待機は短い枚数で呼吸や揺れを作り、回避は重心移動を優先し、被弾は反応の向きと戻り先を明確にする。
この3つが揃うと、キャラクターが「動く駒」ではなく「操作対象」に変わります。
スケールアップ時の再設計ポイント
32x32から64x64へ広げるときは、単純な拡大ではなく、見せる情報の分解が必要になります。
輪郭の強い差分だけで成立していた32x32に対して、64x64では武器の軌道、手首の返し、肩の遅れ、振り切り後の反動といった細かな時間差が画面に残ります。
そこで通常攻撃の5コマを土台にしつつ、武器軌道の途中コマと、反動を受け止めるコマを1〜2枚追加して6〜7コマ化すると、サイズを上げた意味がきちんと出ます。
枚数を増やしたのに迫力が変わらないケースは、追加コマが単なる中間姿勢になっていて、役割が増えていないことが原因です。
再設計で見るべきポイントは、描き込み量よりも、どの部位を独立して動かすかです。
64x64では腕だけでなく、腰と肩のズレ、前脚の踏ん張り、剣先の軌道変化を分けて設計したほうが、斬撃の重さが出ます。
ここで32x32と同じ感覚で全部を一斉に動かすと、情報量が増えたぶんだけ輪郭が散って見えます。
逆に、待機・回避・被弾も同じ基準点で揃えておくと、サイズが上がっても管理は乱れません。
Asepriteのタイムラインやオニオンスキンで前後関係を見ながら揃えると、個別モーションではなくセット全体の整合が取りやすくなります。
図版案とalt text候補
図版は、本文で説明した「差分の置き方」と「原点管理」をひと目で確認できる内容に絞ると、読者が作例をそのまま手元で再現できます。
静止画として見せる図と、シート管理の図を分けておくと、AsepriteやEDGEでの作業時にも参照先が明確になります。
1つ目は、32x32の横向き剣士を5コマで並べたスプライト列です。
待機、構え、攻撃、フォロー、戻りの順に並べ、各コマの腰位置と足裏を同一座標に揃えた状態を見せます。
32x32では細部より輪郭変化が効くので、腕と剣先の移動が読み取れる配置にすると意図が伝わります。
alt text候補: 32x32キャラの通常攻撃を5コマで示した例。
各コマの腰位置と足裏が同一座標で揃っている
2つ目は、64x64の刀攻撃を7コマで見せる図です。
構えで腰が2px沈み、攻撃で刃の残像が2px幅で入り、フォロースルー後に1pxのバウンスが入る流れまで描くと、64x64で増えた情報量の使い道がはっきりします。
本文で触れた「追加コマは中間姿勢ではなく役割を持たせる」という考え方を、最も視覚化しやすい図です。
alt text候補: 64x64キャラの刀攻撃。
構えで腰が2px沈み、攻撃で刃の残像が2px幅で描かれ、フォロースルー後に1pxバウンスが入る
比較表の一例として、32x32と64x64の差分設計を並べた表を用意します。
32x32では差分を2px前後に大きく置くと読めること、64x64では部位ごとの1px刻みが効くことを、文章だけでなく一覧で整理します。
制作途中に「このサイズでどこまで細かく割るべきか」を判断するときの早見表として機能します。
alt text候補: 32x32は差分を2px前後に大きく、64x64は部位ごとに1px刻みが活きる旨をまとめた表
4つ目は、3/4トップダウン視点の4方向作例です。
前脚を2px手前に出して奥行きを示し、斜め方向では武器角度が4種に分かれている状態を並べると、横向き作例だけでは拾えないRPGらしい見せ方まで補えます。
方向ごとに同じ攻撃でも読み方が変わることが一目で分かるため、見下ろし型ゲームを作る読者には特に効く図になります。
alt text候補: 前脚を2px手前に出して奥行きを示し、斜め方向では武器角度が4種に分かれている例
5つ目は、RPGツクールMV互換を意識した1行5セルの192x192pxシートです。
各セル中央に32x32キャラを置き、全セルで原点を統一した例にすると、モーション単体の出来とシート運用を切り分けて理解できます。
ゲーム実装段階で崩れやすいのは描き込みより座標管理なので、ここは完成イメージより管理基準が伝わるレイアウトが向いています。
alt text候補: 192x192セル中央に32x32キャラを配置し、原点を統一したスプライトシート例
💡 Tip
図版の順番は、単体モーションの理解からシート管理へ進む流れにすると、読む側の視線が止まりません。5コマ作例、7コマ作例、差分比較、4方向応用、シート配置の順に並べると、制作と実装の両方がつながって見えます。
関連記事(サイト内で公開次第リンクしてください):
- パレットの選び方(制作入門)
- Asepriteで始めるアニメ制作(ツール入門)
ゲーム会社でドット絵グラフィッカーとして10年以上の経験を持つ。ファミコン・スーファミ時代のレトロゲームに影響を受け、現在はインディーゲームのアート制作を手がける。制作テクニックの体系化に情熱を持つ。
関連記事
ドット絵 描き方|初心者が最短で上達する5ステップ
ドット絵はピクセル単位で組み立てる表現だからこそ、最初の1作は条件を先に固定したほうが迷いません。この記事では、32x32のキャンバスに8〜16色を置き、1キャラクターまたは1アイコンを完成させることをゴールに、アウトライン、ベース塗り、影、ハイライト、微調整の5ステップで最短距離の進め方を整理します。
ドット絵 キャラクター描き方|32x32で魅力的に見せるコツ
拡大表示では整って見えたのに、等倍へ戻した瞬間に目を1pxずらしただけで表情が別人になる。32x32のドット絵は、その1pxがキャラクターの魅力も読みにくさも決めます。黒ベタのシルエットにして「誰かわかるか」を先に確かめると、足すべき情報と削るべき情報がすっと見えてきます。
16x16ドット絵の描き方|少ないドットで伝える設計術
16x16のキャラは、目をたった1pxだけ左右にずらしただけで「無表情」にも「いたずらっぽい顔」にも読めます。256pxしかない世界では、その1pxがただの点ではなく、印象そのものを決める記号になるからです。
ドット絵 背景の描き方|空・木・建物のコツ
64x64で背景を組むと、雲も葉も窓もつい置きすぎてしまい、その瞬間に画面が飽和するので、背景が破綻する理由を最短でつかめます。背景は解像度、色数、そして距離ごとの情報量の整理が噛み合わないとすぐにバラけるので、空・木・建物を別々の題材として覚えるより、