2016年7月1日金曜日

65536色におけるグラデーション

そもそもフルカラーが使える時点で、ありがたいと思わなければおかしいのです。
というのは、シムトランスでの「減色」のお話。

シムトランスでは、pakファイルに用いる画像は、24bitのpng画像と決められています。
これは皆さんご存知だと思いますが、そもそも24bitのpngって何って話から。

実は24という数字、8+8+8ビットの足し算なんです。
赤8bit、緑8bit、青8bit、それぞれが0~255の強さの値を取れることを意味します。
これをフルカラーと呼び、約167万色を表現することができます。

人間の目が認識できる色数は10万色と言われているので、167万色あれば十分というわけです。

では、pakファイルは何色ですか?と言われると、これ実は16bitカラーでの表現になっているのです。
つまりは65536色、人間の識別できる色よりも少ないですね。
実はコンパイルするとき、内部で減色の処理が行われています。

ですから、減色を加味したpngを作らないと、特に大きなグラデーション面では大きな影響が出てしまいます。微妙な色合いや、弱いコントラストの画像はベタ塗りの原因となる場面が多いので気をつけましょう。

ではどう対策するのか。

対策は比較的簡単です。
・グラデーションを作るとき、グラデーションの両端になる色の差をきちんと考えましょう。
 明度差で約10%は確保したいものです。
・絶妙な色合いはフルカラーだと美しく映りますが、できるだけコントラストや彩度をあげ、
 有効な色となるように調節しましょう。彩度は20%以上が目安になります。
・色相を変えられるようなら、彩度をいじるよりも有効な場面があります。
 特にマジョーラを再現するときなど、これも頭の片隅に入れておくと吉です。
・色を替えるのが面倒にならないよう、インデックスカラーのpngを使うのも有効です。
 EDGE2ではこれを簡単に取り扱えますので、導入をおすすめします。

こんなところでしょうか。
また要望があれば詳しく触れたいと思います。

アンチエイリアスの逆の発想~エッジの強調~その1

いきなりですが、こんな状態に陥ったことはありませんか?

なんか境界線潰れちゃってるんですが....

それなりに描いていれば、こんな状況は日常茶飯事でしょう。
というわけで今回はエッジの強調です。
このテクニックはアンチエイリアスの対極にあたる手法で、
強引に境目を目立たせる作業です。

どうするかというと明らかに明度や色相の異なる色を配置します。
黒なら白、赤なら臙脂やピンク等の色を隣に配置します。

上を例にしてやってみましょう。

そもそも上の絵は絵として正しいのか怪しいと考えるのが妥当です。
何故かと言うと、箱の内部が外側と同じ明るさだからです。
厳密な意味では光は1点から当たっているわけではないので
側面から受ける光の量は当然箱の外のほうが中よりも多くなります。

というわけで、箱の内側になる部分を暗くします。

少し立体感出ましたね。外側と内側の壁の境界もなんとなくですが認識できます。
このままでもいいのですが、ちょっと不自然なので、次は内側の上辺と下辺の光の
あたり具合について考えてみます。

上辺とは赤い線の部分、下辺とは青い線の部分です。
青い辺と赤い辺、どちらが多く光が当たる確率が高いでしょうか?
当然上の方が壁に遮られていないぶん、多く当たりますね。

ということはここの上辺は明るく(むしろ手前の壁並みに明るく)、
青い辺はもっと暗くなるはずです。やってみましょう。

明るい色と暗い色が混在するとカクカクとなってしまうのでグラデーションにしました。

なんか自然な箱っぽくなりましたね。
エッジの強調とは、このような形で、となりに置く色を工夫することで、不自然な「同一面」になってしまう部分を回避する方法です。

次は応用行ってみますね。では。