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


■ バグ・よくあるミス


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


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


010

境界のアンチエイリアス問題

ゲーム用グラフィックを作成していて起こりやすいミスとして、
エッジ部分のアンチエイリアス問題があると思います。
これは、キャラ部分と背景色の境界がにじんでいるために
グラフィックの透過処理がうまく行かないというものです。

今回は、このアンチエイリアス問題についてその修正方法と予防策を説明しましょう。


問題の確認:
下の画像は、キャラの境界線にアンチエイリアスがかかっている例です。

※上記画像をクリックすると、実際に実験で使用したBMP画像を確認することができます

左側の画像は、
キャラと背景色がはっきりと分かれていてゲーム用に使っても問題ありません。
一方、右側の画像はキャラと背景色の境界がぼやけているため、
2D格闘ツクールに読み込んだ際、表示が不自然になります。

以下は実際にエディタに読み込んだ際の表示です。

右側の画像を見ると、境界に緑色の縁取りが発生していることがわかります。
この緑色は、背景色の緑がキャラ画像部分に侵食しているために発生したものです。


修正方法の分類:
アンチエイリアスがかかってしまった画像の修正ですが、
「画像がレイヤー分けされているかどうか」によって
大きく2つの方法に分けることが出来ます。

ここで言うレイヤー分けとは、以下画像のように
キャラ画像部分と背景色部分が別々のレイヤーとして
保存されている場合を言います。


一方、次の画像の場合は
キャラ画像部分、背景色部分をひっくるめて 1枚の画像として保存されているため、
「レイヤー分けされていない」画像用の修正方法をとることになります。


以下、それぞれの修正方法について説明していきます。


1. レイヤー分けされていない場合
今回は以下の画像について修正していきます。

青いボトルを描いたものですが、あまりドット絵的な描き方はしておらず
よく見ると背景色との境界部がぼやけています。

なお、修正する際は 最低限の条件として
キャラ画像と背景色が互いに遠い色を使っていることが望ましいです。
( 例えば、赤色が多いキャラに対して緑色の背景色…など )

MEMO

画像をまとめて修正
これから画像を修正していきますが、
ここで説明する方法は少々手間がかかります。

アンチエイリアス問題が複数枚の画像において発生している場合は
あらかじめそれらを1枚の画像にまとめておくことをお勧めします。

なお、256色化したBMP画像をまとめる際は
一旦画像をフルカラーモードに戻しておく必要があります。
 ドット絵であれば大抵 大丈夫ですが、画像Aの256色パレットと
 画像Bの256色パレットは一致しない可能性があります



ここでは色の変換という方法で、背景色とにじんだ部分を除去します。
なお、今回はEDGEというエディタを使って画像を修正します。

EDGEは256色画像専用ソフトなので
まずは、画像を読み込めるよう256色化しておきます。


この状態で、画像をEDGEに読み込んでください。


画像を開いたら、まずはパレットを確認しましょう。

今回は、このパレットを編集することでキャラと背景色をきっちり分けます。

パレット内で、背景色を選択してください。
( ここでは、パレット一覧の左上にあるのが背景色です )

背景色とキャラ部分の境界を把握するため、一時的に背景色を変更します。

現在の背景色は緑なので、見分けやすいようにこれを赤色(255,0,0)に変更します。
( 出来るだけキャラに使用していない色を選ぶと良いです )

背景色が変更されたことで、背景色のにじみが見やすくなりました。

キャラ部分と赤い背景色の境界部分を見ると、
やや緑色がかった部分が残っています。

これはパレットにも現れています。

これら背景色がにじんだ部分をカットしていきましょう。

画面上部メニューから「色指定による範囲の選択」を選んでください。


別ウィンドウが表示されるので、
緑がかった色を選択して「新規選択範囲にする」ボタンを押します。
( 色一覧上をドラッグ操作すると、複数の色を一度に選択できます )


色のにじんだ部分を選択することができました。

この状態で、選択範囲全てを背景色に書き換えてしまっても良いのですが、
一部残しておきたい部分もあるかと思います。
( 例えば、キャラ画像の内側に背景色に近い色がある場合など )

そういう場合は、残しておきたい部分を選択範囲から外してください。
範囲選択モードにして、メニュー下にある選択オプションを
「削る」に変更すると、範囲選択を削ることが出来ます。


範囲選択が決まったら、パレットのサブカラーが背景色になっていることを確認してください。
( パレット上で、色を右クリックするとサブカラーを変更できます )


確認が済んだら、「Ctrl + X」もしくは「Delete」でカットしてください。

範囲選択していた部分が全て背景色に描き変えられ、
キャラ部分と背景部分の境界をはっきり区切ることが出来ました。

この時点で目的は達成していますが、画像のデータ量を節約するために、
使用していない色をパレットから削除しておきましょう。

「カラーパレット」ウィンドウのメニューから
「未使用色の削除」を選択してください。


いくつかの色がパレットから消去されました。

後は、背景色を元の色に戻すなどお好みで調節すると良いでしょう。


2. レイヤー分けされている場合
今度は、以下のように画像がレイヤー分けされている場合を考えます。

なお、今回は画像の修正にPhotoshopを使用します。

まずは、キャラ画像のあるレイヤーにおいて背景色部分を選択してください。
ちなみに、「自動選択」ツールを使用すると便利です。

ここで説明する方法では、背景色部分 ”以外” をキャラ画像化します。

背景色部分の選択が済んだら、次に新規レイヤーを一番上に追加します。
※範囲選択を解除しないよう気をつけてください


選択範囲を単色で塗りつぶします。
( なお、使用する色はキャラで使用している色や元々の背景色とは異なるものにしてください )
それが済んだら、今度は一番下のレイヤーにある背景色を塗り替えます。

塗り替える色は、黒などキャラ画像と重ねた際に違和感がないものにしてください。
※ただし、完全な 黒(0,0,0) は格闘ツクール上では扱いにくいため、避けたほうが無難です

塗り替え後、キャラ画像の境界部分に違和感がある場合は、色調整すると良いでしょう。
また…境界周囲に不自然なドットがある場合は、それらをうまくカットしてください。
( 一番上のレイヤーに書き加えることで下のレイヤーを隠します )

少しわかりにくいですが、
例では青いボトルの右上部分と中央下あたりに黒いドットが出ています。

塗り替えおよび調整が済んだら、
キャラ画像レイヤーと一番下の背景色レイヤーを統合してください。

キャラ画像部分がやや膨らんでいますが、
境界部分の不自然なドットは目立たなくなりました。


その他の修正方法について
その他の修正方法についても軽く触れておきましょう。

------------------------------------------------------------
A. 境界部分を削る
背景色及び境界部分を選択して、背景色で塗りつぶします。
この方法は、レイヤー分けの有無 に関係なく使えます。

具体的な方法についてですが…
背景色部分を自動選択ツールで選択する際、許容度を大きめにしておくと
境界部分のドットを含めて選択することができます。


また、レイヤー分けがない場合は、「近似色を選択」機能も活用してください。


MEMO

画像の2値化によるマスク作成
キャラ画像と背景色に明るさの差がある場合は
「画像の2値化」を使うという手もあります。
( Photoshopだと、2階調化というフィルタがこれにあたります )

この方法はレイヤー分けされていない状態で行うもので…

2値化によってキャラのシルエット画像を作成、
これによって「背景色に変えるかどうか」の範囲を決めます。
なお、キャラ部分に白色が出る場合は、別途塗りつぶしてください。
( あくまで明るさ基準の範囲分けなので、これは仕方ないです )

 重要なポイントとして、
 2値化する前にレイヤーを複製しておくこと
 忘れないようにしてください。 
 


------------------------------------------------------------
B. 境界線を引く
背景色〜キャラ画像の境目に境界線を引きます。
背景色部分を選択したら、
メニューから「選択範囲の境界線を描く」を選んでください。


境界線を引く際の位置ですが、背景色部分を選択した状態なので「外側」を選択。
線の太さは画像の解像度にもよりますが 2ドット 程度にしておくと良いでしょう。


この方法では、キャラ画像の上に重ねるように境界線を引きます。
元となる画像の解像度が低い場合はキャラ画像部分がつぶれてしまうので
別の方法を使うことになるでしょう。

修正後の画像です。
キャラ部分と背景色の間に境界線が引かれています。
輪郭線を目立たせたくない場合は色を調節すると良いでしょう。
 なお、新規レイヤーを追加してから境界線を引くと
 レイヤーの合成オプションなどで細かく調整できるため、お勧めです


------------------------------------------------------------
C. アンシャープマスクを使う
手ごろな方法としてPhotoshop「アンシャープマスク」機能を使うという手もあります。

大雑把ではありますが、画像の境界部分を調節することが出来ます。
( ただし、キャラ画像の内側をシャープ化しないよう注意 )

また、似たような機能として「マジック抽出」というものもあります。
こちらも範囲選択するのに役立ちます。
( 多少手間はかかりますが、こちらは細かく調節できます )

このあたりの機能は、主に写真の切り抜きや合成に使われるものですが
絵の場合も、画像からキャラ部分を切り抜くといった感じに活用できると思います。
( Photoshop以外にも、写真の切り抜き機能を持ったソフトは色々あると思うので、探してみると良いでしょう )


予防策
ここから先は、境界線が滲む問題を回避する予防策 について軽く説明しておきます。

1. 最初からドット絵として描く
透明色を使う機能を避けてグラフィックを作成します。
具体的には以下の点に気をつけて作業すると良いです。
・境界線を描く際にはブラシを使用しない
・レイヤーの半透明機能は使用しない
・拡大縮小・回転などの編集機能は使用しない
 ( ただし、ソフトの側でアンチエイリアスをOFFにできる場合は別 )



2. レイヤーを分けて描く
作業時にレイヤーを分けておくと何か問題があった際も対処しやすいです。

MEMO

マスクレイヤーの活用
キャラのシルエットのみを描いたレイヤーを作成しておくと、
キャラを描画する範囲を絞って作業できるのでお勧めです。

シルエット画像のレイヤー上でキャラ画像部分を選択、
この状態を維持したまま他レイヤーに移って作業すると、
背景色部分にはみ出すことがありません。

なお、Photoshopの場合は、レイヤーのオプションで
「透明ピクセルをロック」しておくと似たような効果を得られます。
( 線がはみ出したりしないので気楽に描けます )



以上、長くなりましたが
境界部分のアンチエイリアス問題とその対策についての説明を終えます。
今回の内容について、詳しく聞きたい点などあれば
掲示板にて受け付けておりますので気軽に質問してください。


ページ先頭へもどる

トップページへもどる

inserted by FC2 system