【ドット絵基礎①】直線と曲線：角度のつけ方

この記事では、ドット絵(ピクセルアート)を描いていくにあたって押さえておきたい基本的なポイント：直線/曲線の表現と角度についてまとめていきます。

はじめに

最初に結論をまとめると、今回のポイントは以下の通りになります。

ドット絵の直線と曲線：角度のつけ方

この記事では、上記のポイントについて、実際に直線・曲線を描きながら確認していきます。

まずは水平/垂直（0°/90°）と斜め45°を描いてみます。
例では32×32ピクセルの範囲内にそれぞれ、
　　0度、45度、90度
の直線を引きました。

ここでのポイントは、45度の線です。
直線は32×32の範囲を対角線上に引かれ、
そのドットの並びは、
均等に［1,1,1,1,…］です。

上記の関係から、0度‐45度、45度‐90度の中間の位置に直線を引いてみます。(画像青線)

これらの直線の角度は、0度直線から見て22.5度と67.5度ということになります。

この時、ドットの並びは、
均等に［2,2,2,2,…］です。

ここまでに描いてみた直線は、［1,1,1,1,…］、［2,2,2,2,…］と均等なドットの並びとなっていました。22.5度などあまり見慣れない角度ではありますが、直線としての見た目に大きな違和感は感じられないかと思います。

それでは次に、任意の角度の直線を描きたいときはどのようになるのかを見てみましょう。

まずは、30度の直線を追記してみます。
今回は水平方向(0度)の直線と描画範囲の32ピクセルを基準に、ピクセルの高さを計算して直線を引いてみます。

45 度：30 度＝32 pixel：X pixel
X＝32(pixel)×(30(度)÷45(度))＝21(pixel)

ですので、高さ21ピクセルに向けてひいた直線が角度30度となります。
この時、ドットの並びは
周期的に［1,2,1,2,1,2,…］となっています

同様に計算をし、何種類かの角度の直線を引いてみたのが左の画像です。
描画範囲の都合、おおよその値とはなりますが、ドットの並びはそれぞれ以下の周期性が確認できます。

40度：［1,1,1,1,1,1,2,1,1,1,1,1,1,2,…］
30度：［1,2,1,2,…］
15度：［3,3,3,3,4,3,3,3,3,4,…］
10度：［5,5,6,5,5,6,…］
5度：［10,10,10,…］

以上のことから、ドット絵の直線におけるドットの並びは、均等若しくは周期的に配置されていることがわかります。
→逆に言うと、周期性のない線は直線としては見えないということです。

曲線の例として、32×32の範囲に正円を描き、0度、45度の直線を用いて8分割してみました。

分割された1ブロックを見てみると、どれも
水平垂直の地点を基準に［3,3,2,1,2］
という周期的な配置がされていることが確認できます。

つまり、正円の場合、0度～45度の周期的な曲線を用意し、それを対応するように8つ用意することで表現が可能ということがわかります。

その一方、円の斜め45度に当たる地点は遠めに見ると若干とがっているように見えてしまうかと思います。
これは、ドットの並びが［3,3,2,1,2］と、周期的ではあるものの徐々にドット数が少なくなっていくような形がとれていないことが原因です。

対処としては中間色によるアンチエイリアス処理や解像度(今回は32×32)自体の変更などがありますが、ここでは割愛します。

前述の正円の曲線を基に、直角から曲線への変化を考えてみます。

段階的に正円の曲線へ近づいていくとすると、左の図のように表現できます。

ここで、0～45度間の①～⑥のドットの並びを確認してみます。

①：［16］
②：［14,1］
③：［11,2,1］
④：［8,2,2,1］
⑤：［7,3,2,1］
⑥：［4,4,3,1］
⑦：［3,3,2,1,2］

上記のドットの並びを比較してみると、曲線はドットの並びの変化が小さいほど緩やかな形になることがわかります。

今回は、ドット絵での直線・曲線の表現について基本的な内容をまとめてみました。

もう一度ポイントを記載しておきます。

ドット絵の直線と曲線：角度のつけ方

今回の説明では32×32の範囲を対象に角度や正円を描いてみました。
これらは解像度の変化で見え方が変わってきますが、ドットの並びにおける周期性や曲線の表現の基本は共通して使える内容となります。

ぜひ、ご自身の制作や練習の際に注目し、思い通りの線が描けるように確認していきましょう！

一言コメント

お疲れさまでした。
当記事につきまして、ご意見やご質問、記載内容の不備等がございましたら、是非↓のコメント欄からお気軽にご連絡いただけますと幸いです。

制作作業、一緒に頑張っていきましょう！