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
■ テスト時のチェック項目
■ 解説用データ ダウンロード
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つずつ出力してください。
以上で、エフェクト作成に関する基本的な手順についての説明を終えます。
今回は触れませんでしたが、
「写真をベースにしてエフェクトを作成する」といった選択肢もあります。
色々な方法を試して魅力的なエフェクトを作成してください。