2D格闘ツクール2nd 完全攻略

■ チュートリアル


■ コマンド解説


■ テクニック解説
 001 特殊なキャラクターセレクト
 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 ハイジャンプの作成


■ バグ・よくあるミス


■ テスト時のチェック項目


■ 解説用データ ダウンロード


005

ヒットエフェクトの描き方

このページでは、ヒットエフェクトを描くときの手順について
画像編集ソフト( フォトショップ )の機能紹介を交えて説明していきます。

 特定のエフェクトを描く方法についてではなく、
 画像編集ソフト上でエフェクトを描く際の選択肢について説明します。

最初に、エフェクトを描く上で役立つ法則などを整理しておきます。
( いくつかのエフェクトを観察して考えたものですが、もちろん例外もあります )
以下の法則を念頭において描いていけば、
良い動きのアニメーションが作成できると思います。


・グラフィックが大きいとエネルギーが大きい


・グラフィックの色が明るいとエネルギーが大きい
 ( 半透明処理にする場合は、表示の濃さになります )


・素早く動くと表示が細くなり、動きが遅くなると太くなる
 ( 習字の筆の動きに近いかもしれません )


・エフェクト発生直後に偏りがあった場合、
 時間が経ってもその偏り具合は維持される


・動きのベクトルはあまり変わらない
 特殊な力が加わらない限り、動く方向は維持されます
 前のフレームと見比べながら次のフレームを描くと良いです
 ( あらかじめ軌道を描いておくのも有効です )

また、ヒットエフェクトの傾向として、以下のような流れがあります。

最初に小さなエネルギーが発生

エネルギーが一気に大きくなる

エネルギーがだんだん小さくなる






ここからは、具体的なエフェクトの描き方について
半透明処理を使う場合/使わない場合、2通りに分けて説明していきます。
また、このページでは画像編集ソフトの機能を利用した手法について
フォトショップを例として説明しています。
※他のソフトを使っている場合は、それぞれ対応する機能に読み替えてください



A. 半透明なしの場合

1. 画像サイズの設定

今回はエフェクトのアニメーションを複数のレイヤーに分けて描きます。
アニメーション1枚分のグラフィックが入るよう画像サイズを設定してください。
ここでは、画像のサイズを240×240にしています。
なお、このエフェクト作成作業ではレイヤーを多用するので、
ファイルを保存する際はPSD( フォトショップファイル )形式で
保存しておくことを忘れないでください。


2. 背景色の設定

画像の背景色を指定します。
エフェクトのグラフィックとかぶらない色を選んで、
画面全体を塗りつぶしてください。
ここでは、背景色として緑( 0, 255, 0) を選びました。


3. シルエットの描画

現在のレイヤーの上に新規レイヤーを追加してください。
ここに1枚目( 1コマ目 )のアニメーション画像を描きます。
2枚目以降のグラフィックも、この1枚目を基準にして形が決まるので
後のことをよく考えて描いてください。

 ここでは説明の便宜上、1枚目から順番に描いてきますが
 実際の製作では順番は自由です。
 自分が一番描きやすい順番で描いてください。

エフェクトのメインカラーを選んだら、鉛筆ツールで輪郭を描きます。
※ブラシツールだと、エフェクトの境界がぼやけるので使えません


エフェクトの形が直線で構成されている場合は、
鉛筆ツールでShift + クリックしていくと直線が引けます。

輪郭線が引き終わったら、
正しく形状が閉じられていることを確認してください。

このように隙間があると塗りつぶしツールが使えません。
( 上の例では、左側の真ん中あたりに隙間がある )

確認が済んだら、塗りつぶしツールで輪郭内を塗りつぶしてください。


塗りつぶしできました。
形状に不満がある場合は、消しゴムツールで修正します。
この時、消しゴムツールのモードは「ブロック」にしておいてください。
( ブラシモードだと、境界部分をぼかしてしまうため )

十分満足できる形になったら、次のステップに移動してください。


4. 2枚目以降を描いていく

現在、1枚目の画像が表示されています。
この画像を2枚目を描くときの参考として表示したいので、
レイヤーの不透明度を50%に設定してください。


この状態で、現在レイヤーの上に新規レイヤーを追加します。
追加が済んだら、1枚目と同じ要領でエフェクトのシルエットを描きます。
( 次のレイヤーを描くときは、また各レイヤーの表示状態を変更する )
ヒットエフェクトや爆発エフェクトにおいて、
1枚目 → 2枚目は一番大きくサイズが変化します。
大きく描き広げてください。


画面サイズいっぱいに描こうとすると、
意図せず画面端の四角形状に合わせて形が歪んでしまうことがあります。
スペースが足りない時は、画面サイズを変更してください。

2枚目以降の画像は、1枚のコマに留まってきっちり仕上げるよりも
大雑把に最終のコマまで描いてから、少しずつ
修正していった方が結果的に良い動きになると思います。
特にエフェクト類の場合は、静止画としての見た目よりも
動画としての見た目が目立つため、動き重視で描いていくと良いでしょう。


5. 模様を描く

現在、シルエットのみのアニメーションが
レイヤー分けされた状態で揃っています。
次は、これらに対して模様をつけていきます。

シルエットのみのデータを残しておきたい場合は、
各レイヤーを複製しておくと良いでしょう。


編集するコマを決めたら、
レイヤーの「透明ピクセルをロック」をONにしてください。


これによって、エフェクトの境界線を維持したまま
模様を描くことが出来ます。

ここで、模様を描く際に便利な機能をいくつか説明しておきます。


ブラシツールを使うと、鉛筆ツールに比べて滑らかな描画ができます。
シルエットを描くときには、境界線の関係で使えませんでしたが、
模様を描く際には問題なく使えるので活用してください。


「編集」-「選択範囲の境界線を描く」を選ぶと、
エフェクトの輪郭を縁取る線を引くことが出来ます。
 グラフィックの外側に向けて線を引く場合は、
 「透明ピクセルのロック」を解除してください


グラデーションツールを使用すると、
エフェクトにグラデーションをつけることが出来ます。
円形状などを選ぶことができるので活用してください。


各種フィルタ機能も便利です。
手書きで追加した模様に対して特殊効果を加えることができます。


レイヤーの合成モードを組み合わせることで
多種多様な表現を手軽に試すことが出来ます。
( レイヤーの複製を使うと、合成用レイヤーを手軽に用意できます )

 慣れてくると、これらの効果を活かせるような
 ベース模様を描けるのではないかと思います。


模様を描くのさえ面倒な場合は、
ノイズフィルタなど描画に関するフィルタが便利です。


雲模様というフィルタを使うと、その名の通り雲の模様を描いてくれます。
( 模様は、現在選択中の2色を基準にして描かれます )


塗りつぶしツールパターン機能も便利です。
この機能を使うと、対象の領域を
パターン模様つきで塗りつぶすことができます。
( 塗りつぶしツールのオプションで指定できます )


パターンは自分で定義することもできるので、
使い込めば使い込むほど充実していくでしょう。

このように、ソフトの機能を活用すれば、
手軽にエフェクトを作成することができます。
ただ、細かい調整など手作業が必要な部分もあるので
機能に頼りっぱなしにならないよう注意しておいた方が良いでしょう



6. ゲーム用BMPの作成
一通りグラフィックの作成が済んだら、ゲーム用のBMPを作成します。
レイヤー分けして並べられたアニメーションについて、
1つずつ対象のレイヤーをON/OFFしながら出力していくのですが…
格闘ツクールに読み込むためには、画像を256色化する必要があります。
フォトショップ上で256色化する方法として便利なのが、
グラフィックのモード変換機能です。


「イメージ」-「モード」-「インデックスカラー」を選択すると、
レイヤーが統合されて、グラフィックの色が256色以内に収められます。
この状態でBMP保存すると良いです。
保存が済んだら、Ctrl + z でレイヤー統合前の状態に戻して
別のコマを表示状態に…
これを繰り返してアニメーション分のBMP画像を作成します。
全ての出力が済んだら、画像がレイヤー統合前の状態であることを確認して
PSDファイルを保存しておきましょう。




B. 半透明ありの場合

半透明ありの場合も基本的な手順は変わりません。
共通する部分については、説明を省略します。
具体的な説明に入る前に、
半透明なしの場合との違いをまとめておきます。

・境界線をぼかしても大丈夫
・グレースケール( モノクロ )で描くこともある

1. 画像サイズの設定
基本的には半透明なしの場合と同様です。

カラーなしで描く場合は、グレースケールモードを選ぶと良いです。
( モード変更は後から行うこともできます )

2. 背景色の設定

半透明ありの場合は、背景を黒( 0, 0 0)に設定します。
( 作業中は別の色にしていても問題ありません )

3. シルエットの描画
レイヤーを新規作成して、1枚目のグラフィックを描きます。
フリーハンドで描くこともできますが、
ここでは半透明ありの場合に有効な手法について説明します。
なお、今回は背景が黒なので、白色で形状を描いていきます。
( 色が明るければ明るいほど、不透明度が高くなります )


多角形ツールを使うと、手軽に星型などを描くことができます。
( 星型は、画面左上にある多角形オプションでONにします )


カスタムシェイプツールも便利です。
吹き出し形状などはヒットエフェクトを作る際に利用できそうです。
( また、オプション設定すると模様つきの形状を作成できるようになります )


指先ツールを使うと、グラフィックを引き伸ばすことができます。
この機能は光を描く時に便利です。
( 先に、引き伸ばしの対象となるグラフィックを描いておくことが必要です )

 引き延ばしやぼかし効果が画面端に到達しないよう気をつけてください
 画面端の四角形状がうっすらエフェクトに出てしまうことがあります


半透明なしの場合と違って、エフェクトの陰影もこの時点で描いておきます。
( 描くのは透明度なので、形状と模様の区別はありません )
その際は、フィルタ効果や合成効果を活用すると良いでしょう。

4. 2枚目以降を描いていく
続けて、次のコマを描いていきます。
新しくレイヤーを追加して1から描くか、
既存レイヤーを複製して、それを編集します。
ここでは、後者について説明します。


自由変形ツールでグラフィックを回転・拡大縮小できます。
シンプルな変形アニメーションを作成する際に便利です。


変形フィルタを使うと、グラフィックに対して
波紋など特殊効果を加えることができます。


レイヤーごとに効果の適用度を変えていくと、
特殊効果のアニメーションを表現できるでしょう。
( 効果的用度の数値設定が重要です )

前述した指先ツールも使えます。

複製したグラフィックに対して、
指先ツールで細かい調整を加えると動きがつけやすいです。


5. ゲーム用BMPの作成
Aの場合と手順は同じです。
レイヤー分けされたアニメを1つずつ出力してください。



以上で、エフェクト作成に関する基本的な手順についての説明を終えます。
今回は触れませんでしたが、
「写真をベースにしてエフェクトを作成する」といった選択肢もあります。
色々な方法を試して魅力的なエフェクトを作成してください。


トップページへもどる

inserted by FC2 system