![見出し画像](https://assets.st-note.com/production/uploads/images/69222849/rectangle_large_type_2_f7623dc02efa23af28e3c1a6ef05958f.png?width=1200)
ドット絵の作画について(アンチエイリアス②)
カド落とし(アンチエイリアス)をややこしくしている原因として、使用しているカラーパレット(当該オブジェクトに対して使用できるカラー)によるグラデーションの色数が少ない、または、オブジェクトの線や形状をうまく整えないとガタガタ(ジャギー)低減の効果が十分得られないという、外的要因が挙げられます。
![](https://assets.st-note.com/img/1641334037360-myNlZlJWkA.png?width=1200)
つまり、アンチエイリアスをしようにも、グラデーションとして使える色が無いと出来ませんし、形状のアウトラインに規則性がなく無秩序にガタガタなのであれば、いくら色数を使用したところでアンチエイリアスの効果は薄い、となります。
なお、カラーパレットについては後日解説いたします。
線を整える
![](https://assets.st-note.com/img/1641247304782-HlCrmfhLcF.png?width=1200)
特にドット絵には「嫌な角度のライン」というものがあって、そういったものをどうやって整えるか、ということが大きな課題となってきます。
不透明のドットで作画しているので、角度によってガタガタになることそのものは避けられませんが、ある程度アウトラインに規則性を持たせることでそのガタガタをある程度低減することが可能です。直線でも曲線でも、可能な限り規則性を持たせたドット配置にした方が後々の作業が楽になります。
![](https://assets.st-note.com/img/1641247814660-i0uI6ckgxQ.png?width=1200)
先ほどのアウトラインを元に形状を整えてみると下図のようになります。不規則に並んでいる場合、不用意に出っぱっている部分を、より濃い色で”引っ込める”必要があったり、へこんでいる部分は明るい色を使って”出っぱらせる”必要が生じ、ドットの並びが汚くなってしまいます。
![](https://assets.st-note.com/img/1641248185905-sYuXQXnCJI.png?width=1200)
実際には面積が小さい、回転アニメーションのためどうしても難しい角度でオブジェクトを描かないといけない、など状況によっては線(形状)を整えられない場合もありますので、それはケースバイケースではあります。
ただ、ドットの配置を整えることは非常に意味のあることで、ここに気をつけるだけで見栄えが格段に向上すると思っています。一度、色数を極端に減らした低解像度のドット絵…それこそファミコンソフトようなドット絵を描いてみて、ドットの配置にとことん拘ってみるのも良いかも知れません。
色の明度差によって形状を整える
![](https://assets.st-note.com/img/1641249793693-Zr1WSZYq0P.png?width=1200)
では、実例としてカド落とし(アンチエイリアス)をしてみましょう。サンプルとして上図のようなオブジェクトがあったとします。まずここで確認して頂きたいポイントとしては、この階段斜めのエッジ部分には1ドットの幅と、2ドットの幅がある、という点です。
ドット絵のカド落とし(アンチエイリアス)は、透明度を使った境界ボカシではなく、色の明度差による錯視を利用したテクニックであるということを思い出してください。そこで、このオブジェクトで表現したい角度のラインを重ねてみました。
![](https://assets.st-note.com/img/1641250944059-euWPYzR99e.png?width=1200)
すると、1ドットの段はラインに隠れますが、2ドットの段はラインから少し出っぱっています。この出っぱってしまっている、余分なドットを角落としで目立たなくするというのが目標となります。
ではどうやってこの出っ張りを目立たなくするのか。それが色の明度差です。1ドットの段よりも少し暗い色のドットを、余分な出っ張り部分に配置することで、この出っ張りを”引っ込ませる”というのが狙いです。
![](https://assets.st-note.com/img/1641251395205-B99OcG1qb9.png?width=1200)
というわけで、上図で実際にカド落としを試してみました。”2”の出っぱっている部分に”1”よりも1段暗い色を配置することで、色の膨張を抑えて”引っ込める”ことができました。拡大した画像だと判りにくいですが、実際のゲーム画面で見ると、かなり綺麗な直線に見えるはずです。
実際のところ、どういう場合にどういうドットを置くのが最適か…なんてエラソーなことを言ってますが、自分はわりとフィーリングだったりします。結局のところ、ドットを使ってキャラクターや背景、小道具などをそれらしく、魅力的に描くことが目的であって、その配置を整えることは、そのための手段だと思います。整っているに越したことはありませんが、そこに囚われすぎると本質を見誤ってしまうので注意が必要です。
暗い色のオブジェクトはどうするか
ここまで読んで、勘の良い方は気づいたと思いますが「エッジのジャギーを目立たなくするために暗い色を配置するのなら、元々暗い色のオブジェクトはどうするのか」と、という問題があります。
![](https://assets.st-note.com/img/1641281053994-slE9ayUOlD.png?width=1200)
無論、暗い色であっても錯視を利用したカド落としは可能性ですが、元から色が暗いため、明るいオブジェクトよりも効果が薄くなります。しかし完全に黒いオブジェクトとなると、カド落としのしようがありません。photoshopなどで作成した画像のような、透明度によるアンチエイリアスではないため、オブジェクトと背景色の境界線に中間色が生まれず、どうしてもドットのガタガタ(ジャギー)が見えてしまうのです。
90年代のアニメ調ドット絵では、これを明確に回避する方法はありません。が、一方でこういう特性があるからこそ、その当時らしいドット絵感の表現にもなっているので、悪いことだとも言い切れないところがドット絵の面白いところです。
![](https://assets.st-note.com/img/1641253750853-1igrz82z1l.png?width=1200)
また、画調によっては、背面からの強い光「リムライト」によってアウトラインを際立たせ、明るくなった部分にカド落としを適応するなどの表現技法もあるので、このテクニックの持つ幅はとても広いと思います。
以上、いわゆるドット絵の大きな特徴のひとつ、不透明ドットによるアンチエイリアス法「カド落とし」について解説いたしました。画調やビジュアルの方向性や描くものそのものによって様々なケースがあり得ますが、基礎的な部分は網羅できたかなと思います。
今までの解説で、光源(陰影)、立体感、アンチエイリアス、とドット絵の最も基本的なテクニックについて紹介できたのではないかと思います。ただ、ドット絵といっても絵である以上、基礎的な画力はどうしても必要になってきます。特にここで標榜している”90年代のアニメ調ドットスタイル”は、基礎的な画力…高い描写力を土台に成り立って(特にアニメーション描き始めるとわかります…)ますし、そうでなくても、デッサンがただ不用意に狂っていたり、顔が歪んでいたのでは、絵としての魅力は半減します。それが作家性として定着している場合はまた事情が変わってきますけど。
どういう画調であれ、デッサン力などの基礎画力はあるに越したことはありません。特に小規模開発のインディーゲームの場合は、グラフィックの全てを担当することもあり、そういったときには幅広い分野での、画力を含む「表現力」が問われてくると思います。
ドット絵はイラストレーションであり、アニメーションでもあります。そのためには「ドット絵」という括りで閉じてしまわず、様々な分野の、様々なものを観察して、それを表現する意識が必要になってくるのではないでしょうか。