ニシャス居住区
http://nicious.toypark.in/
真の手描きキャラを手抜きっぽく作る
2010.06.13
MUGENに手書きキャラは多い。多いったら多い。
何故か「手描き」ではなく「手書き」と表記がちなのだが、これは恐らく実際に画材を用いて手で描いているのではなく、 各画像作成ソフトでデジタルなドット打ちを経て作られている故に、「手描き」と表現するには何かが違うのではないかという大衆的な見解を反映しているのだろう。少し疑問を感じた方は今の部分をすぐ忘れるように。

さて、今回は(前回などないが)「手描き」と呼べるようなアナログ絵を使ってMUGENキャラを製作する実験的な試みを紹介する。
ホンモノの手描き絵をパソコンに取り込んで、それを動かすのである。当然のことだが、アニメーションをさせるためには相当量の絵を描く必要がある。中割りスプライトを自動生成してくれるソフトを紹介するコーナーだと思った方には残念なお知らせだ。こまめな努力と、前のフレームとあまり変わらない絵を描けるだけの技量が要される。

必要なものは以下の通りだ。
スキャナ
主線を描く道具
色を塗る道具
画像処理ソフト
スキャナは頑張ればデジカメで代用できるかも知れないが、全ての絵の縮尺などを揃えるという観点では致命的に向いていないため、どうフォローするかが課題になるだろう。
は今回コピー用紙の裏紙を使用したが、手抜きっぽさを抑えてもう少しきっちりと作りたい方は方眼罫の引かれたレポートパッドを使っても良いだろう。横罫だけのルーズリーフでも、1枚1枚の絵の高さを揃えられて便利である。大量の長期在庫に頭を悩ませていた方には朗報かも知れない。
主線を描く道具というのは文字通り主線を描くための筆記用具のことであるが、これも奥が深い。ポイントとしては、主線は濃くなければならないということである。くっきりした線にならない鉛筆や油性ボールペンなどよりは、ゲルインクや水性のボールペン、筆ペン(薄墨は駄目ね)などを使った方が後々困ることもない。どれも100円ショップで売っている筈だ。ただ、いわゆるサインペンは100円ショップの廉価なものだと多くのものは黒みが薄いので覚悟した方が良い。
色を塗る道具は、色を塗る気がなかったり主線だけ取り込んで色づけはPCで行うという方には不要である。ここでは色のバリエーションが豊富で、かつ所持人口も多いであろう色鉛筆を使っているが、あからさまに色鉛筆の味が出る。つまり均一な塗りは期待できないのである。コピック等のカラーマーカーなどの方が満足できるスプライトになることだろう。ニシャスは持っていない。だって高いもん。
画像処理ソフトについては、画像編集ソフトと減色・形式変換ソフト、画像の内部フォーマット統一ソフトが必要である。ここではAzpainter, IrfanView, Unify-Bitmapを用いている。

1.主線を描く

絵の大きさは特にこれといった基準もないので、個人の好みで決めればよい。但し色鉛筆で塗る場合は読み取り解像度で塗りつぶしの感じが変わるのでご注意だ。
まずは主線を描く。主線には0.35mmのゲルボールペンを用いた。 主線を描画する画 なるべく主線はしっかり閉じることが望ましい。PC取り込み後の塗りつぶしで内部まで塗りつぶされないようにするためである。紙上で全部色も塗るという方は関係ない、とはいかない。塗りつぶしは背景色設定で使うことになるのだ。可能な限り隙間が空かないようにしよう。
アニメーションをさせる場合は2枚の紙に奇数番号と偶数番号のスプライトをそれぞれ描き、紙を重ねて 「リアルトレース」すると割ときれいにアニメする絵ができる。その場合は分厚い紙は使えない。透けないからだ。100円ショップのルーズリーフやレポート用紙の一部など、激安の紙は薄いことがあるので狙ってみるのも一考に値する。トレーシングペーパーは書き味が著しく異なるので人を選ぶかも知れないが、トレース性能は言うまでもなく高い。 主線を描画し終えた画 主線終わり。ちなみにこのキャラは「チキン・鬼都三(キトサン)」という名前のキャラである。
発作的に思いついたキャラのようだが、キャラデザインは小〜中学校時代のものだ。結局は今か昔かというだけで、発作的に思いついたキャラということに変わりはないのだが。

2.塗る

塗り作業はPCで行うという方は、読み飛ばして構わない。
色塗りを行う前に、まず何色で塗るかという問題がある。「なんしょく」もそうだが「なにいろ」も然りだ。一旦塗り絵用に雑にキャラを描いて試しに塗ってみるのも手だ。PCに取り込んだ後パレットで好きなだけ弄れるとは言え、取り込み後は一つの部分に複数種類の色が入るので何も考えずに塗ると後で困る。なるべく赤と黄色などといった違う系列の色を置いた方が良いだろう。あまり暗くて黒っぽい色は取り込み時に主線に化けがちなので、注意が必要だ。 塗ってるところ 主線をスプライト数枚分まとめて描いてから、まとめて塗った方が効率が良いだろう。
前述しているが、ここでは色鉛筆を使用している。
塗り終わったところ 色塗り終わり。右腕に間違った色を塗ってしまったのは秘密。
下から二本目の色鉛筆はバーミリオン、よく言うところの「赤鉛筆」というやつである。

3.取り込み

こうして主線を描いて色塗りを繰り返し、絵が多数出来上がったらいよいよパソコンに取り込む。
実際には紙1枚分描いたら取り込んでMUGEN用の256色画像ファイルにまで進めた方が良いだろう。でないと何で後悔するか分からないし、後悔しても遅すぎるのだ。アナログとはそういう世界なのである。恐らくだが。 何枚か描いたところ さて何枚か描いたところだ。ニシャスはこの枚数で限界だったなどと書くとこのコーナー自体が破綻しそうなので敢えて述べない。これをスキャナで読み込む。読み取り自体はWindows付属のペイントでも可能だが、複雑な設定はできなかったような覚えがある。スキャナを入手したときに一緒に付いてくる取り込みソフトを使った方が賢明だろう。
ここで注意するのは解像度である。解像度が小さいと小さいキャラかドットの粗いキャラしか作れない。大きい分には縮小できるので何とかなるとはいえ、二度手間なのでできれば最適な大きさを指定しておきたい。ちなみに、一番大切なのは「どの解像度で最初の用紙をスキャンしたかを覚えておかなければならない」ということだ。
ここで紹介しているチキン・鬼都三の画像は立ち絵が20x27mm(上の写真に色鉛筆の先端が映っているので目安は付くだろう)で、200dpiで取り込んだ。それを拡大縮小せずにD4キャラとして使用している。D0なら100dpiでもいい。ただ、この手法のキャラをD0で作ろうとすると訳の分からない画像になりかねないので、D4の方がベターだと思う。
取り込み後 ここでは説明の都合上取り込んだ画像をスプライト1枚分のみ載せているが、実際にはまだ分割はせず、取り込んだ巨大な画像のままで処理をする。
取り込みにもオプションが色々あるので微調整を入れているのだが、これはスキャナによって様々なので説明を省く。ともあれ、色鉛筆らしい色塗りが分かると思う。 さて、ここのスプライトを1つ1つファイルにして保存したいところだが、まだそれは早い。透過色の問題があるのだ。画像の右側を見て欲しい。白い部分に塗りつぶしツールを使ったところなのだが、完全にキャラの輪郭で透過されていない。これではMUGEN上であまりにもみっともない。この問題に対処する必要がある。
つまり、きちんと透過させるために白に近い色を全て同じ白にする必要があるわけだ。

4.輪郭外の完全透過

では、画像編集ソフトの出番だ。ここの処理はペイントでは完全に力不足なので、それなりに多機能なツールを使う必要がある。有料ものではAdobe社のPhotoshop、無料だとGIMPあたりが有名だと思われるが、ここではAzpainterというフリーソフトを使用する。GIMPとかと比べると起動が非常に早く、ドット絵製作能力はEdgeをも凌駕するかも知れない力を秘めていると個人的には思うが、画像保存にパレット内容を指定できない(常に保存する画像に最適な色のパレットが自動生成される)ため、MUGENのキャラ製作ソフトとしての知名度は至って低い。とは言えフィルター、レイヤーも搭載しており、サクサク使えるソフトなのだ。今はAzpainter2が公開されている。1同様フリーである。

ポスタリゼーションを選択する図 ファイルを開いて、「ポスタリゼーション」を選択する。
ポスタリゼーションとは、早い話が減色である。ポスターみたいな色構成になるからそういう名になっているのだろう。
Azpainterの場合は、階調を指定するダイアログが出る。 ポスタリゼーションDiglog この値は低くすれば低くするほど減色される。高いほど元の画像に近いが、あまり高いと目的である「白の単一色化」が為されないので注意が必要。 階調による減色具合 値は2からだが、流石に2は減色がきつすぎる。こういう味が好みなら何の問題もないが、通常は4近辺が無難だろうか。 ポスタリゼーション後、背景を緑で 処理後、どこにも使われていなさそうな色で背景となる部分を塗りつぶす。どこかで使われている色で塗りつぶしてしまうとその部分までもがMUGEN上で透過されてしまうのだ。ここでは定番の透過色の一つ、赤0緑255青0を使用した。 ポスタリゼーション時に画質を欲張る場合は、一旦黒で塗りつぶしてはみ出る部分を確認するのが良い。 当然だが、細かい部分の塗りつぶしと、本体部分に背景色が入り込んだ所には気をつけるべし(黄色の丸で囲んだ部分)。

GIMPのファジー選択 GIMPの場合はファジー選択という「隣り合った似た色の領域を選択するツール」や似た色を一辺に塗りつぶす機能があるので、ポスタリゼーションは必須ではない。画質を保ちたい場合はGIMPの方が有利だろう。

5.単一のファイルに分けて保存

次にそれぞれのスプライトを切り取って1つ1つbmpファイルにでも保存する。保存形式はフルカラーのビットマップだ。 ここでは一旦フルカラーのbmpファイルで保存して後で一括してパレット統一しているが、GIMPを使っているのであればレイヤー毎にスプライトを貼り付けて一括でパレット統一ができる。機会があれば別の機会に紹介しよう。 Azpainterは自由領域選択がないため、四角形選択で切り出しにくいスプライトがあるならペイントを2つ立ち上げた方が早くて楽かも知れない。

6.パレット統一

このままではMUGENで使用できないため、パレットの統一を行う。
パレット統一にはIrfan Skiljan氏作の"IrfanView"とsiden氏作の"Unify-Bitmap"を併用する。前者は有名な画像表示/形式変換ソフトで、後者は複数のbmpファイルのフォーマットを、別に指定する1つのビットマップのフォーマットに合わせるソフトだ。 最初にIrfanViewで元になるパレットを持ったビットマップを作る。IrfanViewを起動し、これまで保存したスプライト(bmpファイル)の中で全ての色が入っていそうなものを開き、「画像」メニューから「減色」を選ぶ。 減色ダイアログ IrfanViewは減色する色数を指定可能だ。MUGENのスプライトは256色カラーであるとは言え、色が多すぎると2Pカラーの製作に苦労する。ここでは新MUGENのsffv2も少し考慮して32色に減色した。これでも多いくらいだろう。Floyd-Steinbergディザリングを使用すると減色結果が綺麗になるが、元々ポスタリゼーションで減色されているのであまり効果はないものと思われ、またファイルサイズの増加を招くであろうからOFFにした。
なお、16色以下に減色する場合は4ビットカラーで保存されるので8ビットカラーに増色することを忘れないように。 パレットダイアログ 色変更前 次に、「画像」メニューの「パレット」→「パレット編集」をクリックする。この画面の一番左上の色がMUGENでの透過色となるのだが、現時点では黒が透過されるようになっている。それでは困るのだ。9番目の明るい緑が透過色になってもらう必要がある(20番目にも同じ色があるが、確認したところこれは使われていなかった)。
で、この画面でパレットの色を弄ることができるので、左上の黒をダブルクリックして明るい緑にし、9番目の明るい緑を黒にしてやる。 パレットダイアログ 色変更後 するとこうなる。「意味ないんじゃ……?」と思うかも知れないが、これでよい。気にしたら負けだ。
IrfanViewの役目は一旦終わり。Unify-Bitmapを起動する。
Unify-Bitmap画面 今さっき作った32色に減色してあるbmpファイルを基準にし、他のフルカラーで保存した可愛いスプライト達をドロップしてやる。保存先を指定して実行すると256色で保存される。全てのスプライトは明るい緑が透過色になっているのだ。

7.他を作って完成

動かす あとはこれらを元にSffを作ってやる。MCMのようにBMPを読めないソフトを使っている場合はIrfanViewの一括変換でpcxに変える必要があるだろう。airやcnsなど、他のファイルを作って完成である。
そしてMUGENを起動して動かす。10枚しかスプライトを描いてないが、それでも楽しい。

ちなみに作りながら紹介したが実際はこの記事を作る前に既にキャラスプライトは作り終わっていたりする。解説画像は新規に作ったものである。
ちなみにこのチキン・鬼都三はキャラページで公開している。スプライト10枚ではアニメや画質などの検証にしようにもできないだろうが、物好きな方は是非持ち帰っていただければ幸いである。ちなみにこの手順通り作ったわけではなく、個々のスプライト保存前に油絵フィルタを掛けている。そのため少し見栄えが違い色鉛筆っぽさがないのでご了承願いたい。