この記事では、ドット絵(ピクセルアート)を描いていくにあたって押さえておきたい基本的なポイント：色の境界とアンチエイリアシングについてまとめていきます。
はじめに
最初に結論をまとめると、今回のポイントは以下の通りになります。
- 色差：色の境界
色差が大きい＝直線や硬い、角ばった表現。線としては太く見える。
色差が小さい＝曲線や柔らかい、滑らかな表現。線としては細く見える。 - アンチエイリアシング：
色差が大きすぎる(ジャギーがある)場合に中間色を置いて色差を緩和すること - 色差を調整するアンチエイリアシングでは、その配置で先細りやとがった形状の表現も可能
- ゲーム用のスプライトでは抜き色(基準の半透明色)を基準にアンチエイリアシングを行う
この記事では、上記のポイントについて、実際に例を描きながら確認していきます。
ジャギーとは
色差や明度について考える前に、ジャギーについて押さえておきましょう。
ジャギーとは、画像やイラストなどで見られる階段状のギザギザのことです。
解像度の低いピクセルアートでは、特にジャギーが目立ちやすく、必要に応じての調整(＝アンチエイリアシング)が重要になります。
以下の図は、左側がアンチエイリアシングを行っていない円、右側がアンチエイリアシングを行ったものになります。右側のほうが、より滑らかな円に見えるかと思います。
アンチエイリアシングは、ピクセルアートのような低解像度のキャンバスでで、より滑らかな表現を実現するための方法です。
一方、アンチエイリアシングを用いると若干ぼやけたような印象にもなりますので、作りたいイラストやゲームの雰囲気に合わせて使用するかどうかを検討しましょう。
明度と色の境界(色差)
明度(Value)：
…色の「明るさの度合い」を示す要素です。(高明度＝明るい/低明度＝暗い)
下の図で左端に示す縦棒が明度の図です。
色の境界(色差)：
二色以上の色を配置すると、必然的にそこには色の境界＝色差が生じることになります。
ここで、左図のA,Bを比較してみましょう。
色差の大きいAの方が境界が明瞭に見え、
角ばった硬い形状に見えるということです。
色差が大きい＝直線や硬い、角ばった表現
色差が小さい＝曲線や柔らかい、滑らかな表現
アンチエイリアシング
前述の色差の関係から、ジャギーを消したい場合（＝色差が大きすぎるとき）はその色差を緩和すればよいということになります。
具体的には、色差が大きすぎる二色の中間色を用意し、間に配置することで色差を緩和できます。
以下は、それぞれ線と背景の中間色を配置してみた例です。
アンチエイリアシングの実践と効果
ここで、具体的にどのような手順でアンチエイリアシング(中間色の配置)を行っていくかをまとめておきます。使用ツールはAsepriteです。
今回は左のような青い円にアンチエイリアシングを行っていきます。
ここでの色差は、円の青色と、背景の緑色となります。
したがって、アンチエイリアシングを行うには、青色⇔緑色間の中間色を用意します。
中間色をパレットに用意する
- Asepriteでパレットを拡張し、一つ間をあけてコピー＆ペーストで二色用意します。
（緑色・未設定・青色 の三色構成）
- 用意した、3色の範囲を選択し、［↓］ボタンから［Gradient］を適用します。
- 選択範囲の中間色が用意されます。
中間色を配置していく
パレットに中間色を用意できたら、角が目立たないように配置していきます。
ここで、アンチエイリアシングを行っていくときの注意点をまとめておきます。
- アンチエイリアシングはやりすぎるとぼやけすぎてメリハリがなくなるため、必要な個所に絞って実施する
- アンチエイリアシングの効果は描画キャンバスだと印象が見えにくいため、原寸(AsepriteではPreviewウィンドウ)で確認しながら作業を進める
アンチエイリアシング応用編：クイックヒント
この項では、アンチエイリアシングの適用方法について、クイックヒントをまとめていきます。
直線・曲線
直線・曲線の場合はあまり難しいことはなく、がたつきの見られる箇所にポイントで配置していきます。
→拡大状態では効果が見えにくいため、プレビューでの原寸大でチェックしながら作業を進めます。
先細り、とがった形状の表現
色差が小さい＝滑らかで柔らかい表現 となることは前述しましたが、この特性を用いることで、先細りのとがった形状もより美しく仕上げることができます。
また、線の透過度＝色差の小ささで線の太さも違って見えることも覚えておきましょう。
適用前と適用後を比較するとかなり受ける印象が違うことがわかるかと思います。
ドットを置いていく感覚的にはレタリングにも近いかもしれません
ゲーム用など、抜き色が必要な場合
ゲームなど、背景などで色差が生じる色が動的に変化する場合は、スプライト本体から見た半透明の色。いわゆる抜き色を基準にスプライトシートを用意する必要があります。
抜き色を使用しないと…
抜き色を使用しない場合、背景色と本体の中間色を用いることになりますが、それで背景色が変わった時の見え方を見てみましょう。
赤色の背景では、アンチエイリアシングの中間色が元の背景の影響を受け、若干緑かかった見え方になってしまっていることがわかるかと思います。
抜き色の適用手順
抜き色となる、本体の半透明色は、Asepriteでは左下のフォアグラウンドカラーをクリックしてA(透過)値の設定を調整することで用意できます。
→今回は255の半分127を設定してみます。
半透明の抜き色が用意できたら、これまでと同様にアンチエイリアシングを行ってみます。
緑の背景なら青⇔緑、赤い背景なら青⇔赤の中間色の見え方をし、結果的により違和感のない結果が得られていることが確認できます。
陰影とアンチエイリアシング
光と影の基本的な内容について、実際の例を見ながら確認してみましょう。
例は赤い矢印の方向から光が当たっている球体です。
この時、光源に対角で最も明るくなる場所がハイライト(明部)、逆に最も暗くなる場所が暗部、
その中間となる場所をハーフトーンといいます。
陰影の境界線でも同様にアンチエイリアシングを行うことでより滑らかな陰影の表現ができます。
おわりに
今回は、色差とアンチエイリアシングについてまとめてきました。
最後にもう一度ポイントを記載しておきます。
- 色差：色の境界
色差が大きい＝直線や硬い、角ばった表現。線としては太く見える。
色差が小さい＝曲線や柔らかい、滑らかな表現。線としては細く見える。 - アンチエイリアシング：
色差が大きすぎる(ジャギーがある)場合に中間色を置いて色差を緩和すること - 色差を調整するアンチエイリアシングでは、その配置で先細りやとがった形状の表現も可能
- ゲーム用のスプライトでは抜き色(基準の半透明色)を基準にアンチエイリアシングを行う
アンチエイリアシングはその適用方法によって単に滑らかさを出すだけでなく、様々な形状の表現にもつながる重要な知識です。ぜひ押さえておいて、実践していきましょう。
お疲れさまでした。
当記事につきまして、ご意見やご質問、記載内容の不備等がございましたら、是非↓のコメント欄からお気軽にご連絡いただけますと幸いです。
制作作業、一緒に頑張っていきましょう！
コメント