気が付けば21世紀に突入し、ゲームボーイアドバンス（GBA）も何時の間にか発売されて しまった。仕事やらPSOやら（？）と様々な事情で更新がままならない間に世の中は変転を 遂げている物である。さて、一体何時終わるのか分からないドット道（dot_michi）第六章は 基礎編第2弾「面とグラデ」をお送りしたい。この辺からちょっと話が複雑になり始めるので、 くじけずに少しずつ己の血肉にして欲しい。 　ドット絵は基本的に面で絵を構築して行く技法を使うので、面に対する色の使い方は 非常に重要なのだが、悲しいかなドット絵では解像度と色数の制限がついて回るので、 3DCGのような自然なグラデを入れる事は先ず不可能だったりする。そこでドット絵では 昔から面に対するグラデの扱い方に独特のノウハウが存在するので、今回はそれらを 紹介して行こうと思う。先ずは曲面に対する影の落ち方から簡単に解説して行こう。 　右上を光源とした球に対する明暗の変化の図。反射光は上手く再現出来なかったので 後に書き加えているが、まあ明暗の変化としてはこんな所だろうか。物体が球面なので ハーフトーンから影へはやや緩やかに暗くなり、地球で言うところの赤道面を超えた辺りで 影の領域に入る。影のエッジ部分では照り返しの影響で影部よりも若干明るくなる。

上記のような物は美術教本で良く目にする物なので既にご存知の方も多いと思う。ドット絵も この基本から外れる事は無いが、解像度と色数の限界からちょっととんちが必要になる。 サンプルを用意する関係でここからはサイズを64*64に統一して話を進めて行こう。 球体：256色 円柱：256色 　上の256色サンプルを階調の変化が分かりやすいように減色するとどう見えるだろうか。 減色ツールを使い16色と8色にそれぞれ減色してみよう。 球体：16色 円柱：16色 球体：8色 円柱：8色 　減色ツール「Optpix」で誤差拡散をOFFにして階調差がわかるように減色してみた。 こうして眺めるとレンダリングした物は均等に階調が乗っている事が分かる。だが、 円柱はともかく球体のグラデの乗り方は絵的にはかなり厳しい。ドットのエッジが目立ち 階調差と言うよりも只の段差に見えてしまっているのが原因なのだが…ではどうするか。 （8色修正版） （8色修正版） 　ドットのエッジで階調が目立つのなら、その階調を詰めれば良い。と言う、考えの元に アニメ絵のように影をシンプルに捉え、境界部分にジャギ消しを兼ねて階調をまとめてみる。 基本を1段影とし、その間を上手くドット修正しながら緩やかにつなぐのがこの方法のキモで、 目に付きやすい部分に与えられた色を使うと言う発想のドット絵ならではのテクニックだ。 と言うよりもドット絵以外では使い道が無い。8〜12色程度のグラデが持てる場合に色差を コントロールしながら使うとかなり効果的で、ハイライトの置き方やハーフトーンのまとめ方で 材質の表現もある程度可能である。球面ではハイライトの使い方が、円柱などではグラデの 置き方がそれぞれポイントになるので覚えておくと役に立つだろう。 　タイル解禁の場合は同じパレットでも少し柔らかい表現も可能になるが、この辺は実機で どう見えるかを確認してからタイルを使うかどうか判断すべきだろう。むしろタイルは階調差が 少なく、色数がある程度使える場合に使用した方がタイル独特の味を有効に使えると思う。 ちなみに同じパレットで多少タイルを使うとこんな感じになる。 球体：8色 円柱：8色 　また、16色使える場合はレンダリングして減色した画像に多少の修正を加えただけでも、 TVモニタ等の表示環境によっては有効な場合があることも記しておこう。この場合は ハーフトーンの階調には手を加えず、ハイライトに近い1〜2色をハイライトのジャギ消しに 回すのがコツ。ビデオ出力ではこれで十分な場合もあり、ハードの性能が上がった昨今では 決して悪い方法では無いと思う。要は実機での見栄えが良ければ良いのだから。 16色（修正例） 　さて、ここで問題になるのが反射光の扱い。本来なら反射光が無ければおかしいのだが、 細かいパーツ全てに反射光を入れられるほどドットは細かく描けないので反射光は端折る事が 多かったりする。円柱などの直線で構成出来る場合はまだしも、曲面にはほとんど入れる 余地が無いのが現状だろう。無理に入れる事も出来るが、それはかなり階調に余裕がある 場合のみで、大抵はドットが目立ちあまり効果的では無いのであえてやらなかったりする。 　ま、これもケースバイケースであろう。

ニノ巻では少ない階調の場合を取り上げたので、ここでは16色（階調）使える場合を考えて みよう。ここまでグラデに色が使えると、滑らかな階調表現も可能になる代りに困った問題も 出てきてしまう。下のサンプルは16*16ドットで曲面に滑らかにグラデを入れた物である。 まずは左のサンプルを見て頂きたい。 2倍 4倍 　左のサンプルにはドットのモアレが出てしまっており、少々具合が悪い。機械的にドットを 置くとドットのエッジが揃い、そこでモアレが発生しているのである。これはドット絵の宿命で ドットが四角い桝目である以上、完全に回避することは不可能なのだが、右のサンプルの ように多少グラデの置き方を変えてやることによりある程度モアレの低減は出来るので、 モアレに困ったらドットのエッジを多少ずらすようにしてやると良いだろう。まあ、こんな些細な 微修正でもやらないよりはやった方が良い。 　余談だがこのモアレを筆者が努めていた会社では「段グラ」と呼んでおり、恥かしい一例と 位置付けられていた。当時は多色環境が整備され始める矢先で、ちょっと色数が増えたんで 嬉しがってやたらグラデをかけまくった作品が横行してて（何とは言わないが）、そんなダサい ドットを見る度に「ああ、段グラは恥かしいなぁ…」と反面教師にしていたものだ。 　ちなみにジャギ消しもしつこく繰返すとモアレが出てくるので、ジャギを消す場合もエッジを ずらす事を頭に入れておいた方が良いだろう。ジャギ消しのモアレを放置しているプロも 結構多かったりするので、そんな恥かしい絵を見かけたら反面教師として参考にすべきだ。 　ちょっとした面だけのモアレ補正ならなんとかなるが、これが球体になると始末が悪い。 手打ちではひたすら修正をかましてもほとんどモアレが低減しないので、こんな絵が必要に なったらPhotoshopやIllustratorで作ってから縮小後減色した方が無駄な時間もかからず 仕上りも綺麗である（それでもモアレは完全に除去出来ないが…）。時間は有限なのだから 使える道具は何でも使うスタイルで行こう。いやはや良い時代になったものだ。 　■同じ色数でのモアレの違い（右はPhotoshopで作成後Optpixで減色） 手打ち 加工後減色

さて、面には平面構成の物体もあるのだが、曲面のノウハウが分かっていれば平面は何の 問題も無い。基本的に面ごとにベタ塗りするだけである。面のエッジを若干明るい色で強調する 方法もあるがそれは別章での解説にゆずる事にしよう。 　余談だが16色程度のグラデが持てる場合、小さいブロック状にし1色ずつグラデを落として 配置すると同じ絵を使いまわしてちょっと面白い効果が出せる。下記がその一例だ。 　段階的な色味の変化を表現するのにこの方法は重宝する。元の画像は同じなので作るのも 容易で仕上りも美しい。同じ理屈でレンガのモザイクタイル表現なども可能なので、色々と 試してみると面白いだろう。こんな方法もあると言う一つの例として捉えて欲しい。 　面に対するグラデの扱いはポイントを押さえて簡単に解説するとこんなトコロだろうか。 次章はまだ未定だが、面とエッジについての話になる可能性が高いかも知れず。 出来るだけ早く更新をしたいが、それはまた別の話と言う事で…。

［ タイトルへ戻る ］　［ 第七章へ進む ］