2014年10月30日木曜日

建物アドオンに見る色づくりの難しさ

唐突ですが、私が旧HN時代に描いた建物はかなり酷い出来でした。
何が酷いかといいますと、風景に大きく浮く。
何が原因なんだろうか?どうすればうまく描けるんだろうか?そんな事を悩み続けて
今も悩んでいます。

そこで今日は色々なアドオンを通して、色について考えたいと思います。

アドオンを作っていてやはり衝撃を受けたのはpak.nipponの存在です。


全体に専用に作られたというのもありますし、waさんが作ったというのもありますが、何よりもpak128ばりに美しい風景というのが挙げられます。

のちのち紹介しようと考えている「建物編」でも取り上げますが、3Dモデリングソフトを用いた
建築物の作成は2Dで描くのとはまた違う難易度や次元のものと考えています。

そしてpak.nipponが美しく見える最大の理由は「統一感」と考えています。

多種多様な作者が入り乱れる公式pak64では、かなり混沌とした光景が広がることがよくありますよね。
例えばこんな感じ。


多くの作者がルールなく色を使うことで、それぞれは美しくても、配置した時にそれぞれを殺しあう、
そんな光景がsimutransでは日常茶飯事な気がします。

できれば全てのアドオンを一人の作者が作れれば、それこそ理想的な町並みが作れると思うのですが、
さすがにそれは厳しいというもの。
時間の流れにそって建物が、風景が移りゆくさままで表現となると絶対に不可能です。

統一感のある風景というのは誰にでも美しく見えるものです。
pak.nipponはそれを証明して見せてくれました。
まだ開発途上ですが、建物がひと通り揃っているので、風景の美しさは素晴らしい物がありますね。

ではその統一感の源は何なんでしょう?
大きさ、アンチエイリアスの強さ、さまざまな要因が考えられますが、個人的に考える最大の要因
それは「色」だと思っています。

simutransには様々な色使いのアドオンが乱立しています。
それこそ、十人十色の色使いで、列車でも混結しようものなら完全にベツモノに見える不格好な
組み合わせも公式バニラに存在します。

違和感の少ない風景づくりへの入り口として、私が注目したいのは色の中でも彩度の取り扱い方です。
彩度をやや小さめにとること、これが美しい街並みを生み出すコツではないかと睨んでいます。

上の2枚のスクリーンショットを比べるとpak64では原色に近い色が多く存在します。
火力発電所、樹木、工業建築.....ありとあらゆるところで主張している色、これがもしこんな感じだったら
どうでしょうか。


pak.nipponのようには行かないにしろ、少し統一感が出ました。
上の画像は原色を殺すため、コントラストを下げ、彩度を下げた画像です。
木が枯れ木っぽくなってしまったところもありますが、全体に統一感が出たように感じます。

私が提案したいのはこんな統一感のある風景です。

そのためには、
・彩度の高い色(=原色に近い色)を使わない
・彩度の高い色を使いたい場合は可能な限り明度を下げる
ことが重要な気がします。

今後紹介するアドオンの作成法紹介ではこんな観点も盛り込んでいこうかなと考えている
今日このごろです。

アンチエイリアスについて考える~その2~

さて、前回言いかけた、色を数値で扱う話の続きをしたいと思います。
(今回はわざと文字ばかりの紹介にしています。色を実際に作って、確認してみて欲しいと
思ったからです。ぜひお絵かきソフトを一緒に起動して色を作ってみてください。)

一般的な1677万色ディスプレイでは赤色255段階、緑色255段階、青色255段階で色を表現します。
255の3乗が約1677万という数値になります。

さて、その1677段階の中間色からどうやって中間色の中間色(=アンチエイリアスに使う色)を作り出すかというと、これもまた前回使った「赤」「緑」「青」に分けて考える訳です。

具体例を用意します。
「赤:255、緑:255、青:0」の黄色と「赤:0、緑:128、青:0」の緑があり、この中間色を用意したいとします。

まずは1色だけのパターンを考えましょう。
前回の話で中間色を作るにはそれぞれの成分で中間くらいを選ぶと言いました。
同じように数値で作る場合は、その値の平均=中間を取ります。

赤は255と0です。この中間は(255+0)/2=128ですね。
同じように
緑は255と128なので、(255+128)/2=192、
青は0と0なので(0+0)/2=0です。

よって中間色は「赤:128、緑:192、青:0」の少し暗めの黄緑色になります。
(ここでは具体的な色は画像にしません。実際に作って確認してみてください。)

このさらに中間色が欲しい時はまた平均をとれば良さそうですね。

では中間色を2段階(元の色を含めて4色)作るときはどうすれば良いでしょうか。
この場合は重みを用いた平均を使います。
具体的には寄せたい方の色をX、遠い方の色をYとすると(2X+Y)/3の値を求めるということです。

また具体例を出しましょう。
先ほどの「赤:255、緑:255、青:0」の黄色と「赤:0、緑:128、青:0」の緑でやってみます。

まずは黄色寄りの中間色から。
赤の場合は(255×2+0)/3=170
緑の場合は(255×2+128)/3=212
青の場合は(0×2+0)/3=0
この色は明るめの黄緑となります。

続いて緑寄りの中間色はというと
赤:(255+0×2)/3=85
緑:(255+128×2)/3=170
青:(0+0×2)/3=0
この色は黄色がかった緑になるはずです。

このように面倒ですが計算で色を求めることでアンチエイリアスに必要な中間色を
作り出すことが可能です・・・・が実用には向きませんよね。

次の回では実際に無料ソフトのPictbearを使って中間色を作り出す方法を紹介します。
これであなたも簡単にアンチエイリアスを練習することができるはずです。

2014年10月28日火曜日

アンチエイリアスについて考える~その1~

アンチエイリアスとは

ドット絵において、「丸め」を表現するために中間色を用い、角を取る手法のこと。

苦手としている人が多く、使っていません!と堂々と宣言の上、アドオンを公開されているのを見ると少し悲しくなる今日このごろだったりします。

さて、そのアンチエイリアスに関してちょっとしたメモ書きと考察を今回はご用意させていただきたく記事を書かせていただきます。


さて、そもそも、中間色って何なんでしょう?
たとえばEDGE2において、

こんな感じで2色をおいて、2次元グラデーションをかければ


こんな感じで生成されるものでした。

これはあくまで「ツールが充実している場合」、使える手法です。

では内部的にはどういう処理をしているのか、という話を始めると頭がごちゃごちゃになるので
簡単にお話します。

画面の色というのは3色の要素で成り立っています。
ご存知の方も多いとは思いますが、赤(R)、緑(G)、青(B)の三色です。
これをRGB系と呼ぶ人もいます。

白という色は赤・緑・青全ての値がMAXの色、黒は赤・緑・青全ての値が最小の色です。



そして微妙なコントロールを行うことで、白~黒の間から中間色である「色」を作り出します。

つまるところ、画面に表示されるすべての色は白と黒の中間色であると言えます。


では次に詳しく青について観察します。
青の色の成分は青が大きく、赤・緑が小さい色です。
そうすると自然と青っぽい色になりますね。(混ざっていなければ、自然とその色が目につきますよね)


そして、白は赤・緑・青が最大の色、と言いました。


さて、その中間色はどのようにつくればいいのでしょうか?

ここは赤色の成分、緑色の成分、青色の成分、それぞれを1色ずつ別々に考えましょう。

青色において、赤色の成分は「小さい」、白色において、「最大」でした。
緑色の成分についても青では「小さく」、白では「最大」でしたね。

では、この赤色の成分と緑色の成分の場合、どのような値をとれば良さそうでしょうか。
「中くらいより少し大きめ」がぴったり来そうです。

青色の成分についてはどうでしょう。
青色においては「大きく」、白色においては「最大」でしたね。

この場合は「できるだけ大きめ」の値をとるのが良さそうです。

こうして
赤色の成分→「中くらいより少し大きめ」
緑色の成分→「中くらいより少し大きめ」
青色の成分→「できるだけ大きめ」
で構成された色、

これがアンチエイリアスでも用いる、白と青の「中間色」になります。


自然な淡い青が完成しましたね。
これを完全な数値として扱えれば、アンチエイリアスで色を作るのに苦労しなくなります。

その辺りの話はまたの機会に。