５.立ちグラフィックのつくりかた 2002Feb.
先に重ね合わせを解説してしまいましたが、そもそもこの立ちグラフィックはどう作っているのでしょうか。
画像Ａ)
まず、何はともあれキャラの絵を描きます(これはPainterを使っていますが、BMP形式で保存できればソフトは何でもよかです)。モチロンこのままでは透明化表示はできません。
さてＨＳＰでは画像の真っ黒な部分を透明化すると前項で書きました。これは正確には光の三原色R,G,B＝(0,0,0)の部分を指します。
Photoshopの色指定ではこの状態です。
自然に背景を透過して見せるためには、画像Ａの八樹さんの後ろの白い部分だけをうまいこと黒にすれば良いわけです。さあどうする俺よ。
背景をただ黒でぬりつぶすのではないことだけはわかります。
↓ただぬりつぶした絵(失敗例)
変なところに白が残ってとってもイヤンな感じですネ♥
というわけで黒い部分(マスク画像)はPhotoshopの機能を使って作ることにします。
まず画像ＡをPhotoshop(PhotoshopLEでも可)で２値化します。２値化っつーのは何かというと、その名の通り画像を完全な白と黒だけの２値に変換するということです。Painterにはこの機能がないのでPhotoshopです。
Photoshopメニューからイメージ＞色調補正＞２階調化を選びます。
するとこんなウインドウが出てくるので、しきい値を200に設定します。しきい値は白と黒の境目の値のことで、しきい値200というのはR,G,B＝(200,200,200)より濃い色は黒、薄い色は白にするってことです。
R,G,B＝(200,200,200)はこのくらいの濃度です→
↓変換結果はこのようになります。
肌など色の薄い部分は白く残るのでぬりつぶしてしまいます。面積の広い部分は塗りつぶしツール
を使ってもよいですが、細かい部分はペンツール
を使います。うっかり元々黒い所に塗りつぶしを使うと輪郭が太ってせっかく２値化した意味がなくなるから(涙)。
↑塗りつぶしてこのようになりました。このままでは白黒逆なので反転をかけます。メニューのイメージ＞色調補正＞階調の反転を使います。
画像Ｂ＞
これでマスク画像ができました。これを別名で保存します。上書きしないようにご注意。うっかりさんは最初から画像Ａのコピーを作っておきましょう。
画像Ａと画像Ｂを開き、画像Ｂをすべて選択＞コピーして画像Ａに貼り付けます。その後、画像Ｂのレイヤー属性を「乗算」に変更します。
↓出来た画像を統合してBMP形式で保存します。統合前にPSD形式でも保存しておくと後々直しが入れやすいのでより良いと思います。
周りが微妙に白く浮いてますが、ゲームで背景が真っ黒ということはまず無いのでこれで良いのです。↓背景に載せると自然に見えます。気になる箇所があればペンツールでマスクを調整します。
↓ちなみに最初のただ塗りつぶした失敗例を使うとこんな感じ。ああん。
6.容量削減に命を燃やす(Part1) 2002Feb.
通常なら立ちグラフィックはこれでＯＫです。しかしキャラ別イベントと告白イベント、さらに個別のエンディングを書き残している現時点で、シナリオがすでに大学ノート94ページに及んでいるこのゲームで、まともに立ちグラ作っていたらＷＥＢで配布など不可能になってしまいます。なんということをしてくれたんだ(←お前がやったんじゃ)。
というわけで容量削減のため、立ちグラフィックは服・顔＆髪・目・口部分に分割することにしました。服は２～３パターン・顔＆髪は２パターン(髪型のみ変える場合も有)・目と口は顔＆髪１パターンに対し各10パターン程度。これなら組み合わせで表情めっちゃ多彩にできます。組み合わせられない目と口とか絶対あるけどな。あと組み合わせられるけどこんな表情梧桐さんじゃないとかいうのも必ず出るけどな。作り終わってから禁断の画像としてこっそり公開とかしたくなること請け合いの表情が(やめろ)。
分割画像をそれぞれ透明化表示で下から顔＆髪＞服＞口＞目って感じに重ねるのです。
てことで分割したわけですが、BMP形式なのでやはりまだまだ重いのです。そこで今まであることは知っていたが実際やったことはない、
ＢＭＰ画像の減色
をやってみることにしました。PainterでＣＧ始めて１年、かなりの数の絵を描きながらなぜやったことがないのか。それはPainterがBMP減色の機能をサポートしていないから。 なので２値化に続き減色もPhotoshop(LEでも可)を使います。どうやら私の愛するPainter、ことゲーム作成に関してはPhotoshopに数馬身差をつけられているようです。
BMP画像の減色自体は簡単でした。
まずPhotoshopメニューからイメージ＞モード＞インデックスカラーを選択します。
すると↑このウインドウが出るので、色数256色を指定してＯＫを押します。
それからBMP形式で保存します。
インデックスカラー8bitにしてあると、BMP保存の色数は自動的に8bitになります。
下の「圧縮」チェックボックスはオンにしてはいけません。ＨＳＰは圧縮BMPをサポートしていないので、圧縮してしまうと表示されません。
それはいいとしてPhotoshopにひとつツッこんでいいですか。インデックスカラーでは5～7bit(32～128色)の指定ができるのにも関わらず、保存は4bit(16色)と8bit(256色)のみってどういうことですか。試しにインデックスカラー7bitにしてみた画像は、保存するときあっさり8bitになりま死た♥
意味ないじゃん!!
Painterの水彩で描いてしまった絵を、まさか16色には減色できないので私の場合は256色に決定。とりあえず別名保存してみて容量を比較します。1/3くらいになっています。ヒデキ感激(誰)。あとはゲーム画面でどう見えるかです↓
↑なにコレ。
なんなのですかこの髪の真ん中の白い部分は。何かの卵ですか。
と思った瞬間に気がつきました。通常のBMP(1677万色)の時点では完全な黒ではなかった黒髪の真ん中部分が、256色に減色したがためにR,G,B＝(0,0,0)に差し替わってしまったのだということに(倒置法)。なぜ。なぜやってみる前に気づかないのか…。
やむを得ず八樹と梧桐と恵比須の顔＆髪は1677万色維持決定。
別にひいきじゃありません(爆)。
