001 はじめに
002 ゲーム作成
003 各種メニュー確認
004 「キャラクター」作成
005 「ステージ」作成
006 「デモ」作成
007 「テストプレー」
008 「ステージ」編集
009 「キャラクター」編集
010 パレット管理
011 アニメーション
012 「座標移動」
013 重力の設定
014 その他スクリプト
015 「リアクション」
016 ヒットエフェクト
017 スクリプトの並べ方
018 攻撃動作
019 「コマンド入力」
020 攻撃判定
021 やられ判定
022 やられ動作の設定
023 「タイトル画面」作成
024 タイトルカーソルの表示
025 「キャラクターセレクト」
026 各種インターフェイス
027 ラウンド関連の表示
028 CPUの動作指定
029 「ストーリー」の作成
030 ヒット数の表示
031 投げ技の作成
032 ゲージ消費技の作成
033 ステージの組み方
034 デモシーンの組み方
035 格闘ツクールの仕様
■ コマンド解説
001 画像呼出
002 座標移動
003 防御枠
004 攻撃枠
005 リアクション
006 サウンド
007 キャンセル条件
008 色変更
009 オブジェクト発生
010 変数による分岐
011 条件分岐:技中有効
012 条件分岐:基本分岐
013 条件分岐:ランダム分岐
014 条件分岐:コマンド入力
015 スクリプト移動: 移動
016 スクリプト移動: 呼出
017 スクリプト移動: ループ
018 座標・画像変更
019 スクリプト変更
020 スペシャルゲージチェック分岐
021 ライフゲージチェック分岐
022 ゲージ変更
023 パレットアニメ・揺らし
024 停止
025 残像
026 終了
■ テクニック解説
002 画面レイアウト
003 カラーセレクトの設定
004 ヒットエフェクトの研究
005 ヒットエフェクトの描き方
006 スクリプト一覧のテキスト化
007 通常立ちの設定
008 VSで開始位置指定
009 雛型キャラの作成
010 INIファイルの内容
011 変数の大小チェック
012 当て身投げの作り方
013 必殺技コマンドの設定
014 アニメ作成_通常攻撃
015 ゲームモードによる分岐
016 変数の一覧を記録
017 受け身入力の判定
018 ダウン値による分岐処理
019 飛び道具の作成
020 ワープ技の作成
021 ヒット硬直のコントロール
022 ステージの地面表現
023 ヒット数表示の固定
024 横方向のホーミング攻撃
025 1P/2Pの判別
026 ライフ減少アニメ
027 画面下部の表示内容
028 ステータス表示の意味
029 ガードクラッシュの表現
030 押せないOBJ
031 アイテムのあるゲーム
032 復活する技の作成
033 空ガードの作成
034 ステージ選択付きキャラセレ
035 ゲージMAXの表示
036 固定ダメージを表現する
037 ラン動作の作成
038 投げ技によるKOの作成
039 ボタン溜め押し技の作成
040 中段攻撃の作り方
041 製作に役立つツール
042 カラーセレクトに適した画像
043 相手によって動作変更
044 横幅のあるキャラを表現
045 ラウンド限定の動作
046 影色の塗りを効率化
047 モードを切り替えるキャラ
048 当たり判定設定のコツ
049 空中ジャンプを表現する
050 キャラの向きを判別する
051 途中でKOしない乱舞技
052 カウンターヒットの作成
053 OBJの動作を停止
054 ハイジャンプの作成
■ バグ・よくあるミス
Q_A よくあるミスQ&A
001 消せない画像
002 リスト選択とキーボード操作
003 アニメプレビューで落ちる
004 起動直後に落ちる
005 OBJ発生位置がずれる
006 着地すると技終了
007 画面端でのヒットバック1
008 グラデーションが汚い
009 画面端でのヒットバック2
010 境界のアンチエイリアス問題
011 ガードされてもキャンセル可能
012 プレーヤーの読込に失敗
013 謎の残像が発生する
014 コマンドが左右反転する
015 パレット管理でよくあるミス
016 下溜め技が失敗する
017 パレットウィンドウで落ちる
018 コンボが途切れない
019 やられ中にしゃがみ可能
020 ソフトのバージョン表記
021 空中でコマンド左右反転2
022 左右押しでガード前進
023 真空投げが発生する
024 空中でコマンド左右反転3
■ テスト時のチェック項目
■ 解説用データ ダウンロード
014
アニメ作成_通常攻撃
攻撃動作のアニメ枚数は少なすぎてもいけないし、逆に多すぎても良くない。
ゲーム的にわかりやすいものでないといけないし、
それでいて そこそこ見た目のかっこ良さも必要…
これら全ての条件を満たしたアニメーションを作るのは非常に難しいです。
このページでは、
最低限「見た目のかっこ良さ」以外の面を満たすことを考えた
アニメの作成について、そのコツを説明していきます。
※今回は個人の主観による部分がかなり大きいので、あまり鵜呑みにしないよう注意してください。
かなり話が長くなるので、先にページ全体の大まかな流れを説明しておきます。
※以下一覧には、該当箇所へのリンクも設定してあるのでご利用ください
1. 説明用の題材( アニメーション ) 2. アニメ枚数が多い場合の問題点 3. モーション内のキーと優先度 4. キーフレームの取り方 5. アニメ枚数の節約 6. 円運動的な攻撃動作 7. キャラの動きを表現する際のコツ |
なお、今回の説明では
3DCGで生成されたアニメーションを題材として使用していますが、
アニメーションを作る上でのコツは手書きCGの場合も同様です。
説明用の題材( アニメーション )
今回は、攻撃アニメの説明用に
以下のようなアニメーションを用意しました。
キャラクターが、パンチを放つ動作を行っています。
上記アニメーションは21枚の画像で構成されています。
ここから先では、
「これら21枚の内、どの画像(タイミング)を攻撃アニメに入れるか?」
という形式でアニメ作成のコツを説明していきます。
※それ以外でも、キャラのアニメーション例としてこの画像は何度も出てきます
まずは、上記画像を見てください。
これは3DCGで作成されたアニメーションですが、
攻撃開始から終了まで、隙間なくコマがあるため非常に滑らかに動きます。
ただし…
格闘ゲームのグラフィックとしてみた場合、いくつか問題があります。
アニメ枚数が多い場合の問題点
「アニメ枚数の少なさ」は見た目に目立つので問題になりやすいですが、
ここではあえて「アニメ枚数の多さ」に関する問題点をまとめておきます。
( 苦労して用意したアニメ枚数が無駄になるのはもったいないでしょう )
1. 動作が重そうで、勢いがない
強攻撃など、動作の種類によっては有りですが…
弱攻撃など軽い攻撃には合わないので、
ある程度アニメ枚数をカットする必要があります。
アニメのカット無し | アニメのカット有り |
うまく編集すると、同じ素材でも よりキレのある動きが表現できるでしょう。
2. 1枚あたりの表示時間が短く、相手の攻撃を見切りにくい
以下の画像は、
攻撃判定が発生するまでの動作を表したものになります。
※比較用に、前後のポーズ( 待機と攻撃発生 )及びアニメーション全体の表示時間は合わせてあります。
攻撃前動作のアニメ有り | 攻撃前動作のアニメ無し |
左側は攻撃前のアニメ枚数が6枚、
右側は攻撃前のアニメ枚数が1枚( アニメ無し )、となっています。
単純にアニメーションとして見るならば、
左側の方が滑らかで良いかもしれません。
しかし、これはゲーム用のグラフィックです。
攻撃前動作の重要性
攻撃される側のプレーヤーは
相手の「攻撃前動作」を見て、攻撃を予測することができます。
( もちろん、出の早い弱攻撃など、例外はあります )
逆に言うと、「攻撃前動作」の見えないものは
攻撃を予測できず、食らった側にしてみれば理不尽な攻撃に見えます。
ここで、上の画像を見直してください。
どちらの方が見切りやすい「攻撃前動作」であるか?
例ではアニメ速度遅めで表示されていますが、
これらをゲーム実行時のスピードで表示するとなると…
アニメ枚数の多い方がやや見切りの難易度が高いのではないか、と思います。
絵を見て見切るか、アニメを見て見切るか、の違い。
アニメの方が情報量が多く、判断が難しいです。
※あくまで感覚的なものなので、はっきりと断定することはできませんが
上では極端な例を示しましたが…結局のところは程度の問題です。
見た目の滑らかさを重視して細かく描写するのか、
ゲーム的なわかりやすさを重視して省略するのか、
作成するゲーム、及びキャラの方針に合わせて決めると良いでしょう。
以下に、攻撃前動作を用意する際の注意点3つをまとめておきます。
・それが、攻撃前であるとわかるようなグラフィックであること
・キャラの動きが不自然にならない程度のアニメ枚数があること
・見切りやすいように、アニメ枚数がある程度制限されていること
3. スクリプトが長くなる
スクリプトによっては、
画像1枚ごとにいくつかの命令をセットする場面もあります。
そういった場合、スクリプト中の画像枚数が多いと
どうしてもスクリプトが長くなってしまいます。
( 例えば… 007 画面端でのヒットバックが変 で説明した「やられ」スクリプトなど )
また、キャラが大きくポーズを変えるアニメーションでは
画像ごとに適切な当たり判定( 防御枠 )に設定変更することも考えなければなりません。
4. 攻撃判定の管理
攻撃判定の発生するであろうポーズを
複数枚スクリプト内に入れている場合…
各画像ごとに、攻撃判定の「連続ヒット」項目を上手くコントロールする必要があります。
( 連続ヒットONのままだと、1回の攻撃で複数ヒットしてしまう )
上記2画像は、どちらも攻撃判定が発生しそうなポーズを取っています。
両者を1つのスクリプト内に入れる場合は、攻撃判定の設定に注意する必要があるでしょう。
5. その他
データ量が増える、グラフィック作成の手間が増える、など
製作面その他でもいくつか問題があります。
( 場合によっては、1〜4以上に重要かもしれません )
以上、色々理由はありますが…
アニメ枚数は少なくて済むのであれば、それでOK。
表現上どうしても必要な場合に足していくようにすると良いです。
※大切なのは、むやみやたらにアニメ枚数・作業量を増やさないこと
また、ページ後半では
複数のコマを1つの画像内に収める方法…
アニメ枚数節約のテクニックについても解説するので参考にしてください。
モーション内のキーと優先度
アニメ枚数を減らす必要性についての説明が済んだので、
次は、
「モーション内のどのタイミングをゲーム中で画像として表示すべきか?」
について説明していきます。( ここが今回のメインとなります )
※なお、以下の説明では「用意すべきタイミング」のことをキーフレームと書きます
キーフレーム一覧と優先度
まずは、攻撃動作の中で必要になるポーズについてまとめておきます。
以下は、キーフレームとして抜き出した画像の一覧になります。
( 何枚目の画像を抜き出したかについては、後で説明します )
順番 | グラフィック | 優先度 | ポーズ名と説明 |
1 | D |
|
|
2 | B |
|
|
3 | C |
|
|
4 | A |
|
|
5 | A |
|
|
6 | B |
|
|
7 | C |
|
優先度について
優先度はA〜Dまでの4段階。 ( Aが最高、Dが最低 )
短い攻撃動作では、優先度の高いものから優先して
ゲーム内に画像として用意します。
以下に、動作の長さに合わせたアニメの一覧を載せます。
※各動作について、上記の画像に加えて待機ポーズの画像1枚を表示しています。
また、アニメ1枚あたりの表示時間は全て統一してあります。
キャラアニメーション | 説明 | |
1 | 全フレーム <21枚> 全てのフレームを表示した場合 |
|
2 | 超攻撃 <8枚> A〜Dを使用 動作の遅い攻撃 |
|
3 | 強攻撃 <7枚> A〜Cを使用 構えに入るのが早くなる |
|
4 | 中攻撃 <5枚> A〜Bを使用 攻撃前後のフレームを省略 |
|
5 | 弱攻撃 <3枚> Aのみ使用 攻撃前動作がなく攻撃予測が難しい |
使用している画像が同じだったり、画像のWAIT調整がなかったりで
やや不自然な部分があるかもしれませんが、
大まかな印象の違いはわかるかと思います。
上記はあくまで一例です。
「攻撃前の構え前後が遅く、攻撃後の隙は小さい攻撃」など
作成する動作によってアニメ枚数の配分も変わってくるでしょう。
基本的に、動作が速い部分はアニメ枚数少なめに。
動作が遅い部分はアニメ枚数多めにすると良い感じになります。
この考え方は、次の説明でも活用するので覚えておいてください。
キーフレームの取り方
次に、
「一連のモーションの中でキーフレームをどのように取るか?」
について説明します。
上で「動作の遅い部分ほどアニメ枚数を多めに」と書きましたが、
これは慣性の法則を表現するコマを入れるためでもあります。
MEMO
慣性の法則
簡単に言うと…
物体を動かそうとする時に
動いているモノはそのまま動き続けようとする
止まっているモノはそのまま止まり続けようとする
という法則です。
「髪の毛などが体の動きに少し遅れてついてくる動き」
をイメージするとわかりやすいかと思います。
上記例は、慣性の法則を機械的に計算したものになります。
ややぎこちないですが、髪の毛や衣服の動きに慣性が見られます。
アニメーションを作成する際は、この慣性を意識しておくと
より自然な動きになるでしょう。
以下に、
アニメーションの全フレームから
キーフレームとして抜き出す画像の並びを示します。
※表内で色付きの行が、ゲーム用画像として実際に使用するものになります。
構えや攻撃発生フレームなどのキーフレームに加え、
どのあたりに中間フレームを入れているかに注目してください。
フレーム | キャラグラフィック | 説明 |
0 | ||
1 | ||
2 | ||
3 | 構えへ向かう ( 中間フレーム ) 素早く構えの動作に向かうので、このフレームの前は飛ばす |
|
4 | ||
5 | 攻撃前の構え ( キーフレーム ) 攻撃前の構え WAIT値は他の画像よりもやや長めに |
|
6 | ||
7 | 攻撃へ向かう ( 中間フレーム ) 構え状態を維持しようとするため、なかなか動かない ( 前のポーズから2フレーム後に中間キーを置く ) |
|
8 | ||
9 | ||
10 | 攻撃発生 ( キーフレーム ) 攻撃発生の瞬間 ここで攻撃判定を発生させる |
|
11 | ||
12 | ||
13 | 攻撃後 ( キーフレーム ) 攻撃直後の状態 フレーム12でもOKだが、 ここでは髪の毛のポーズを重視してこちらを使用 |
|
14 | ||
15 | 待機ポーズへ ( 中間フレーム ) 攻撃後の疲労があるため、すぐには動かない |
|
16 | ||
17 | ||
18 | 待機ポーズ前 ( 中間フレーム ) 攻撃後の隙が終わって、素早く待機ポーズへ移行する ここでは省略しているが、この後すぐに 待機ポーズの1枚目を表示することになる |
|
19 | ||
20 |
上記表を見ればわかる通り、
キーフレームは一定間隔で並んでいるわけではありません。
「攻撃前の構え」「攻撃発生の瞬間」などトメとなるフレームの
前後あたりに集中して中間フレームが入る感じです。
中間フレームの取り方ですが、
動作が速い部分は画像を少なめにしてあります。
具体的に言うと…
画像を2〜3枚飛ばしている部分は、キャラが素早く動いている部分。
逆に、画像を1枚飛ばしているだけの部分は、 キャラの動作が遅い部分。
これにWAIT値の調整を加えることで緩急のついたキャラ動作を表現します。
手書きでグラフィックを用意していく場合も、
上の一覧を参考にして
必要なキーフレームをはっきりさせてから作業に入ると
無駄なく必要な画像を揃えていくことができるでしょう。
MEMO
プレーヤー視点で見たアニメ枚数
ゲームの感想として「アニメ枚数が少ない」と言われてしまう場合。
そこそこアニメ枚数を用意しているのに問題がある場合は
キーフレームの取り方が原因かもしれません。
つまり、ユーザーから見て
「アニメ枚数が少ないように見えてしまう」という状態…
特に、キャラの動きが複雑な場合は注意が必要です。
逆に言えば…
取るべきキーフレームの選択さえしっかりしていれば
最低限のアニメ枚数でも十分に良い動きは出せます。
左がアニメカット無し、右がアニメカット有り。
やや複雑な動作ですが、
左足で蹴り上げる部分を見比べてください。
他の部分と比べて大幅にカットしていますが、
アニメ的にはあまり問題ないように見えます。
.
アニメ枚数の節約
ページ上部で、アニメ枚数が多い場合の問題についてまとめましたが
攻撃動作の関係上、
「アニメ枚数を増やさないと動きを表現できない」ということもあるかと思います。
その場合は、新しく画像を追加する前に
以下に示す「アニメ枚数節約」のテクニックを試してみてください。
上手くいけば、データ量や手間など色々節約できるでしょう。
( このあたりは、アニメーションとしてのキレの良さにも関わってきます )
1枚の画像に2枚分の情報を入れる
以下2枚の画像は、キャラが真っ直ぐパンチを放っている様子を表しています。
これら2枚を1つの画像にまとめてみます。
このようになりました。
修正前と比べてください。
キャラの画像は基本的にBの方を使っています。
これに、Aのポーズを考えて残像を描き加えています。
( 画像編集ソフトのレイヤー機能を使うと良いです )
体全体を残像として描くと動きが分かりづらいので、
ここでは注目して欲しい部分( =パンチする拳の残像 )のみを描き加えます。
※なお、技によってはキャラの上半身など大きい範囲を残像として描くこともあります。
また…
「動きのある2枚を1枚にまとめると、攻撃判定を設定する際もわかりやすい」
という利点もあります。
( ページ前半で述べた「アニメ枚数が多い場合の、攻撃判定の問題」を思い出してください )
画像内に拳の軌跡が描かれているため、
拳の下の空間に攻撃判定が設定されていても説得力があります。
合成のルールとしては…
後の画像をベースとして、
前の画像内で注目すべき部分を残像として描き加える
という感じになります。
1つ注意点として、
「攻撃前の構え」や「攻撃後の隙」など
キャラが止まっているであろうポーズに
残像を加えないこと、が挙げられます。
( 止まっているのに残像が表示されっぱなしなのは不自然 )
ただし、回避策として
「残像つきの留めポーズ」「残像なしの留めポーズ」
を並べる…という手もあります。
( この場合、結局アニメ枚数は変わらない )
左側が攻撃発生の瞬間、右側が攻撃後の隙になります。
どちらも同じ留めポーズをベースにしていますが、
左側の画像のみ残像表現を入れています。
この方法は、既存画像の加工でアニメパターンを増やせるため
手書きでグラフィックを用意する場合に便利です。
( 便利ですが、特殊な表現というのは多用すると効果が薄れるので注意してください )
円運動的な攻撃動作
ここまでは、
攻撃前の構えで留め…
攻撃発生の瞬間で留め…
という動作を例として説明してきました。
例えば、以下のような動作がこれにあたります。
拳をまっすぐ前に突き出すパンチ動作
しかし…
以下のような動作の場合は少し流れが異なります。
体を大きく動かして回し蹴りする動作
この動作には、はっきりとした留めとなるポーズがありません。
恐らく「足が前方に大きく伸びた時」が攻撃発生ポイントになりますが、
ここはあくまで回転蹴りの途中ポーズ。
パンチ動作のように「攻撃発生ポイント = 留めのタイミング」とはなっていません。
ただ、アニメ枚数を増やすべきポイントはあります。
回し蹴りを開始する前の準備部分と、
回し蹴り終了後の待機ポーズへ戻り始める部分。
これらに加えて…
回し蹴りの攻撃判定消滅直後、待機ポーズに戻り始める部分。
( 足が左右移動ではなく、奥行き移動になるあたり )
一様な回転動作に変化を加えることで、
振り子のような重みを感じさせる動作を表現することができます。
( グラフィックのWAIT値も活用してください )
実際にキーフレームを抜き出して作成したのが以下のアニメーションになります。
※画像1枚あたりの表示時間( WAIT )は統一してあります
なお、回転する攻撃動作の場合は
動きを表すのに必要なアニメ枚数がどうしても多くなるので、
どのタイミングで攻撃判定を発生させるかを
よく考えておく必要があるでしょう。
キャラの動きを表現する際のコツ
ここまではアニメ枚数に関するコツを中心に説明しましたが…
最後に、キャラの動きを表現する際のコツについて
いくつか説明しておきましょう。
アニメ表現から考える攻撃前動作の重要性
ページ前半では、ゲーム的な視点から「攻撃前動作の必要性」について説明しましたが、
見た目上の視点から考えても、攻撃前動作は大切です。
強力な攻撃を表現しようとする場合…
ついつい「攻撃の瞬間をどう描くか?」に注目しがちですが、
「攻撃の前にどれだけ力を溜めたか?」を表現することを忘れてはいけません。
「大きな動作の前には、必ず相応の予備動作が入る」
これを念頭においてアニメーションを作成すると、
良い動きを表現できるのではないか、と思います。
( 同様に、攻撃後の隙も忘れないよう気をつけてください。 )
重心移動の重要性
キャラクターを動かす際には、
常に「重心がどこにあるか?」を意識すると良いです。
武道に限らず、スポーツ全般において
力を込めた動作を行う際は体重移動を上手く行うことが大変重要です。
このアニメーションの場合は、攻撃前の段階で右足に体重をかけていますが…
攻撃発生時には重心を左足に移しています。
そして、攻撃終了時には再び重心を移動させ…
両足に均等に体重がかかるように体勢を直しています。
重心と言うと、少しイメージしにくいかもしれませんが…
「左右どちらの足に体重をかけているか?」を意識するだけでも
動作の描写にだいぶ差が出るのではないかと思います。
静止画の場合はキャラのポーズに合わせて1つの重心を考えればOKですが、
アニメーションの場合は、動作中に重心の位置が変化する可能性があるので
注意が必要です。
動きの発生順
「キャラが体を動かす際に、どこから順に動くか?」
描くキャラクターがロボットでない限り、その動作には生物的な特徴が出ます。
その1つが、「体の部位を動かす順番」です。
ここでは、わかりやすい例として「振り向き」の動作を見てみます。
まず、目を後方に向けて、
首を方向転換して、
上半身を方向転換して、
腰(体全体)を方向転換して、( この時、足では重心移動 )
髪の毛などが遅れて方向転換する。
実際にゲーム上でこれだけ細かい動作を見せる機会はあまりないですが、
動きを作る際は、上記画像の振り向き動作を思い出してください。
キャラクターの体は、
「動かしやすく、本人の意思が表れやすい部分から順番に動く」
と覚えておくと良いでしょう。
画像1枚ごとの意味
作成するアニメ枚数が少ない場合、
「2〜3枚の画像をどう描くか?」に注目しがちですが、
一連のモーション全体を意識して…
それを省略、まとめた結果として2〜3枚の画像があるのだと
考えるようにしてください。
考えるだけならば、そこまで労力はかからないので
ぜひ試してみることをお勧めします。
逆に、作成したアニメーションの出来を確認する際は
自分の脳内補完を完全に排除して、
1ユーザーの視点で見るようにしてください。
作者の中では脳内に本来のイメージがあるので
作成したアニメに不足があっても補完してしまう。
ここに注意していれば、「キャラがどういう動きをしているかわからない」
といった問題を避けられるのではないか、と思います。
独自の感性も大切
このページでは、アニメ作成時のコツについて
「〜だから〜である」のような説明を長々としてきましたが…
必ずしもそれらのルールを守る必要はありません。
むしろ、それらをあえて破るのも多様な表現を行う上で大切だと思います。
それに…何より、自由に作るのが一番楽しいと思います。
※ここは非常に重要な点です!
自分の感性で、キャラクターを自由に動かしてあげてください。
具体的なものから抽象的なものまで様々なテクニックを説明しました。
どこまで参考になるかはわかりませんが、製作のお役に立てれば幸いです。
長くなりましたが、以上で攻撃アニメ作成のコツに関する説明を終えます。
ページの内容について何か疑問点などあれば
サイトの掲示板などで気軽に質問してください。