メインコンテンツまでスキップ

ディザリング

ディザリングの価値は、単に画面を細かく見せることではありません。
限られた色数の中で、より多くの階調や質感を感じさせるための手法です。
Resprite では、主に次の 2 つの流れに分かれます。

  • パターンディザリング:ペン、消しゴム、図形、塗りつぶし、シェーディングなどにパターンの質感を加える
  • グラデーション用マトリクスディザリング:グラデーションをよりピクセルアートらしい段階的な見え方にする

複数ツールで使うパターンディザリング

パターンディザリングは主に次のツールで使います。

  • ペン
  • 消しゴム
  • 図形ツール
  • 塗りつぶしツール
  • シェーディングツール

これらのツールでは、それぞれのオプションバーからディザリングを有効にし、そこでパターンを選べます。

/doc-imgs/dither-patterns.png
内蔵ディザリングパターン

Resprite のパターンライブラリは、単純な密度違いのドットだけではありません。線状、グリッド状、等角向け、より塊感のあるものなど、質感づくりに向いたパターンも含まれています。
ざらつき、格子感、斜めの流れなど、ほしい表情がはっきりしているときは、色を増やすより先にパターンを探したほうが早いこともあります。

次の GIF は、現在のパターンディザリング用コントロールを示しています。オン・オフ、番号、パターンプレビューを確認できます。

/new-medias/drawing/drawing-dithering-pattern-control.gif
パターンディザリングのコントロール

パターンディザリングの有効化

パターンディザリングに対応したツールでは、オプションバーにディザリング用のコントロールが表示されます。

  • コントロールをクリック:ディザリングをオン / オフ
  • ドラッグまたはスライド:パターン番号を切り替え
  • パターンプレビュー:現在選んでいる質感をその場で確認
/doc-imgs/dither-option.jpeg
ツールオプション内のディザリングコントロール

対応ツールは、それぞれ最後に使ったパターンとオン / オフ状態を個別に記憶します。
つまり、ペン、消しゴム、図形、塗りつぶし、シェーディングで、それぞれ自分の使いやすいディザリング設定を保てます。

グラデーションのディザリングは別の流れ

グラデーションツールにもディザリングはありますが、上のパターンライブラリをそのまま使うわけではありません。こちらは別のマトリクスベースの段階的な仕組みです。

  • パターンディザリング:質感、粒感、素材感を作るのに向いています
  • グラデーション用マトリクスディザリング:RGB のなめらかな混色より、ピクセルアートらしい段階感を保ちたいときに向いています

空、発光、立体感のある陰影、あるいは 2 色の間をピクセル単位ではっきり見せたいときは、グラデーション側のディザリングのほうが合いやすいです。

次の GIF では、グラデーション用マトリクスディザリングのコントロールと、マトリクスサイズの切り替えを確認できます。

/new-medias/drawing/drawing-dithering-gradient-matrix.gif
グラデーション用マトリクスディザリング

よくある使い方

1. 色を増やさずに中間段階を作る

パレットを小さく保ちたい一方で、明暗の段差をきつくしたくないとき、ディザリングはかなり直接的な解決策になります。

  • 2 色の間に軽いディザを挟むだけで中間段階を感じさせやすくなる
  • ハイライトや影に重ねると、画面全体のピクセル感も保ちやすい
  • インデックス風、携帯機風、色数制約の強い絵では特に使いやすい

次の比較 GIF は、ベタ塗りとディザ入りの塗りの差を示しています。

/new-medias/drawing/drawing-dithering-solid-vs-pattern.gif
ベタ塗りとディザ塗りの比較

2. 素材に規則的な質感を加える

ディザリングは中間色づくりだけでなく、表面の質感整理にも向いています。

  • 金属、布、レンガ、屋根瓦、地面のざらつきなどに役立つ
  • 線状やグリッド状のパターンは繰り返しのある質感に向いている
  • 塊感や点状のパターンは、粗めのノイズやレトロ画面感にも向いている

3. グラデーションをよりピクセルアートらしく見せる

なめらかなグラデーションは、どうしても柔らかく見えすぎることがあります。
マトリクスディザリングを使うと、その滑らかさをより読み取りやすいピクセル階段に変えられるため、全体の画風を揃えやすくなります。

例:塗りつぶしと組み合わせる

ディザリングの効果をいちばん素早く確認しやすいのが、塗りつぶしツールです。

ディザパターンで塗りつぶす

色自体はもう決まっていて、そこにピクセルアートらしいつながりだけを足したいときは、まず塗りつぶしから試すのが手早いです。
その後でペンやシェーディングに戻って局所的に整えると、流れが作りやすくなります。

ディザリングを優先したい場面

ディザリングは特に次のような場面で有効です。

  • 色数を増やさずにパレットを管理したい
  • なめらかな混色より、はっきりしたピクセル粒感を残したい
  • 同じ場所に明暗差と質感の両方を持たせたい
  • グラデーションにもピクセルアートらしいリズムを残したい

続けて読む