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 ハイジャンプの作成


■ バグ・よくあるミス


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


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


046

影色の塗りを効率化

ゲーム用のグラフィックを用意する方法には色々ありますが、
昔ながらの手法で描かれたドット絵に魅力を感じる人も多いのではないかと思います。

※画像クリックで拡大表示します。
ただ、ゲーム用グラフィックとして十分な量の枚数を用意することを
考えると、少しでも作業効率を上げる工夫が重要になってきます。

このページでは、影色の着色について
作業の手間を出来る限り軽減するテクニックを紹介したいと思います。

 なお、今回の作業ではフルカラーのグラフィックソフトと
 ドット絵用のグラフィックソフト両方を活用します。
 使い慣れたソフトで構わないので用意しておいてください。



作業方針
このページでは、以下のような画像に影を入れることを目的として話を進めていきます。

 事前にドット絵編集ソフトで画像を開いて
 グラフィック内に不要な色が発生していないかチェックしておいてください。



※画像クリックで拡大表示します。
画像を見ると、肌や服の色が細かく入り組んでいます。
肌の影はこの色で、服の影はこの色で…
と使用色を切り替えながら1枚1枚塗っていくと非常に手間がかかりそうです。

手順を並べると以下のような感じになると思います。
1.影を塗る部分を決める
2.使用色に影色をセットする
3.はみ出さないよう注意しながら対象範囲に影を入れていく


1〜3を繰り返して画像に影色を用意するので、
画像内の色数やグラフィック枚数が増えると大変です。


このページで説明する方法では、これを以下のような流れに変更します。
1.影色になる部分をまとめて1色で塗る
2.色変更で影の部分が本来の影色になるよう調節する


色数が限定されたドット絵を描くのであれば
色変更による加工もしやすく効率的に作業が進められる、という考え方です。

加工用に、仮の色を使っている点に注目。
通常の「絵の塗り方」に慣れているとちょっと違和感があるかもしれませんが、
ゲーム用グラフィックやアニメ用に特化した効率重視の塗り方 だと考えてください。

ここで説明する方法では
1つの画像内にあるグラフィックをまとめて処理する ことで作業を効率化します。
逆に言えば
画像が複数枚に分かれていると色変更などの手間が増えてしまうので、処理を開始する前に
出来るだけ多くのグラフィックを 1枚の画像内にまとめておくようにしてください。
※画像結合ソフトなどを活用すると良いです。


背景色の加工
まずは、背景色を上のレイヤーに分離させておきます。

背景色を別レイヤーにしておけば、その下でどれだけ線がはみ出そうと
背景色で隠れるので気軽に作業を進めることが出来ます。

------------------------------------------------------------
輪郭線の扱い
画像内には背景色とグラフィックを仕切る輪郭線があります。
輪郭線にグラデーションを入れるという表現もありますが、
ここでは話を簡単にするため、輪郭線は1色のままにしておきます。
※説明のために省略しているだけで、輪郭線に濃淡・影色を入れるのも普通に可能です。

ベースとなる画像から輪郭線の部分を選択、選択範囲を反転してください。
※自動選択ツールや近似色選択など、グラフィックソフトの機能を活用してください。

選択範囲を色分けして示すと、このような状態になります。
上図の赤色部分を選択した状態にしてください。
こうすることで、輪郭線以外のグラフィック部分に限定して描くことができるようになります。
( 背景部分にも描くことになりますが、これは先述した背景色レイヤーによって隠れます )

ただ、この選択範囲を維持したまま作業を進めるのは大変なので
次の工程で追加の加工を行いたいと思います。

------------------------------------------------------------
影描画の準備
範囲選択を維持したままレイヤーを追加してください。


1番上に背景色レイヤー
2番目に今回追加する影色レイヤー
3番目、一番下にベース画像

という並びになります。

まずは、影範囲の描画用に色を選びます。
後々加工を行う際の選択範囲を決めるためのものなので
見分けさえ付けば何色を使っても構いません。
ベースの色とはっきり区別できるような色、という基準で選ぶと良いかもしれません。

今回はベースの色が全体的に薄いので単純に黒(0,0,0)を使用します。

 元画像が全体的に暗い場合は白、もしくは
 ベースと色合いが全く異なる色を選択すると良いです。
 ※レイヤーを重ねたときに影部分が全く違う色になることが大切

レイヤー追加と影色の選択が済んだら、いよいよ影色の描画に入ります。
前述した選択範囲を維持したまま影色レイヤーに移動してください

まずは、輪郭線部分全域に影色を塗りつぶしておきます。
こうすることで輪郭線が変色してしまうのですが
輪郭線以外を選択、という選択状態を気にしなくて良くなります。
※変色した輪郭線は後で影色と一緒に色変更すればOKです。

------------------------------------------------------------
影色の描画
現状では、以下のような状態になっています。

輪郭線部分が真っ黒になっている点に注目してください。

この黒色のまま影色を描いていっても良いのですが、
元画像を塗りつぶす形だと作業しにくいです。

影色レイヤーの透明度を多少低くしてください。

ここでは影色レイヤーの透明度を50%にしました。
分かりづらいですが、変更前に比べると輪郭線の色が若干薄くなっています。
※重ねるレイヤー全体が薄くなっただけで、描画する色自体は真っ黒のままであることに注意!

準備が出来たら、影色を描きこんでいきます。
中途半端な色が出来ると後々の加工が面倒になるので、
ブラシではなく鉛筆モードで描くようにしてください。

 ちょっとくどい塗りのドット絵を目指すのでない限り色数は抑え目にした方が加工が楽です。
 画像の解像度が低い場合は色数を多めにしないと形状を表現し辛いですが、
 2D格闘ツクールの解像度(640x480)であれば色数に頼らずとも形状は表現できます。


------------------------------------------------------------
影の発生する位置
影の入れ方は表現するゲームに合わせて自由にルールを決めれば良いですが、
2D格闘ゲームでは以下のような方向で影を入れるのが定番になっているようです。

※影の分布がわかりやすいよう強調して表現しています。
キャラ右向きの場合、キャラ左の手前側からキャラ右の奥側に向かって光が指す。
そのため、
キャラ左寄り手前にハイライトが、右寄り奥側に影が発生する。

影とハイライトの分布のみ表示すると上図のような形になります。
顔周辺など例外はありますが、大まかな影の入り方については
ある程度参考になるのではないかと思います。

 影入れのルールについては、あらかじめ基準となる影付きのグラフィックを
 数枚描いておくと影の入れ方で迷わなくて済むのでお勧めです。


MEMO

影色にパターンを使いたい場合


上図のように、影色を単純なベタ塗りではなくドットパターンで塗って
昔ながらの繊細なグラデーションを表現したい場合もあるかと思います。
こういう時は、Photoshop塗りつぶしの
オプションにあるパターン をONにすると良いです。

 パターン用の画像素材はドット絵編集ソフトなどで作成しておくと便利です。
 
 パターン描画を多用する場合は、最初からEDGEなどそういう機能を
 サポートしたドット絵編集ソフトを使った方が楽かもしれません。


1枚目のグラフィック加工が終わったら、同様にして
画像内にある他のグラフィックにも影を入れていきます。

影色の選択 塗りのはみ出し を考えなくて良いので、
キャラにライトを当てるような軽い気持ちでどんどん作業を進めていきましょう。

MEMO

影色に加えてハイライト色を入れたい場合
この場合も作業手順は変わりません。
ベース画像
光色レイヤー
影色レイヤー
背景色レイヤー
完成画像
影色部分との重なりを考えると面倒なので、
輪郭線・影色部分も光色で一様に塗っておくと良いです。
( 影色レイヤーをベースとして光色レイヤーを追加する感じになります )

 一様に塗っておく、という考え方は
 影色の時に輪郭線部分を塗りつぶしていたのを
 思い出してもらえると理解しやすいと思います。


色変更前の準備
グラフィックへの影入れが一通り完了しました。
色変更前に画像の状態を確認しておきましょう。

※画像クリックで拡大表示します。
例では影色がはっきりしているのでそのまま色変更に持って行っても良いですが、
ここでは影色がはっきりしない場合の対処法についても説明しておきたいと思います。

影色レイヤーにて、影色部分を選択します。
( 自動選択や近似色選択機能を活用 )

選択が済んだら、影色レイヤーを非表示にしてベース画像レイヤーに移動してください。

色合い変更や階調反転など画像編集ソフトの機能色々を使って、
ベース色と影色にはっきり区別が付くよう調節します。
※ベース画像を残しておきたい場合はレイヤー複製を使ってください。

※画像クリックで拡大表示します。
場合によっては、ベース画像の色自体を変更するのもアリです。
上の例では選択範囲を階調反転後、色合い調整しています。

------------------------------------------------------------
注意点
・加工後に、各エリアで色がかぶらないよう注意してください。
 例えば、髪の毛の影色と服のベース色がそっくりだと
 両者が同じ色扱いされる恐れがあります。

・ 1つのベース色に対して、必ず1つの影色が発生するようにしてください。
 例えば、帽子と服が同じ白色だがそれぞれ異なる影色を入れたい場合。
 この場合は一時的に帽子と服を別の色で塗っておく必要があります。
 ※余分な色は後で1色にまとめればOKです。

画像の準備が出来たら、いよいよ色変更に入ります。
ドット絵編集ソフトに持っていくために256色化( インデックスカラー化 )しておきましょう。


色変更
ドット絵編集ソフトに画像を読み込みました。

現状ではパレットがバグったような色合いの絵ですが、
これをパレット編集することで本来の色に変更します。
※あらかじめ、本来の色のRGB値を記録しておきます。

 パレット編集自体は格闘ツクール内でも一応可能ですが
 余計な混乱を避けるため、ここでは画像編集ソフト側で色変更を済ませておきます。


なお、ここではEDGE というソフトを例として手順を説明していきたいと思います。

パレット編集を始めるために、まずはカラーパレットウィンドウを表示します。

この時点で不要な色が発生している場合は近い色にまとめておきます。
上の例では背景色の緑に近い色が1つ発生しているので、これをカットすることになります。

 色による選択を使って不要色部分を画像内から選択、
 まとめたい色を背景色にセットした状態でカット、パレットにて未使用色の削除を実行します。


次に、変更したい色を画像内からマウス右クリックで選択します。

パレットを見ると、クリックした色が選択状態になっています。

画面左下の設定欄でRGB値 を変更、本来のカラーに設定してください。

ちょっと手間がかかりますが、変更の影響は画像全体にかかるので
一度に複数のグラフィックを加工することができます。

 色変更の手順を複数の画像に対して行う予定がある場合は
 パレットを登録・保存しておくとRGB値入力の手間が省けるので便利です。


------------------------------------------------------------
色変更が完了しました。

※画像クリックで拡大表示します。
キャラ部分と背景色がかぶっていないか?  などのチェックが済んだら完成です。
早速ゲーム内に読み込んでみると良いでしょう。


このページでは、影色を効率的に描き込む方法 について説明しました。
最初の方でも述べた通り、この方法は
普通に絵やイラストを描く場合とは手順が少し異なっていて
慣れるのに時間がかかると思いますが、
大量の絵を加工する場合に適した方法だと言えます。

 自分の中でこういう手順で作業を進めるというパターンさえ確立してしまえば
 後は似たようなことの繰り返しになるので非常に楽です。
 ぜひこの機会に試してみることをお勧めします。

以上、長くなりましたが影色の塗りを効率化に関する説明を終えます。
なお、今回説明した内容について気になる点や疑問点などがあれば
掲示板 にて受け付けておりますので気軽にお尋ねください。

トップページへもどる

inserted by FC2 system