AUGUST 26, 2016

ドット絵の作画技法・表現方法について学ぼう編【現役ゲームクリエイターによるドット基礎講座 第3回】

ドット絵や2Dグラフィック全盛期にドッターとして活動してきたクリーチャーズの3DCGクリエイター『HGT』が、誰でもできるドットの描きかたをレクチャーします。
いままでドットを描いたことがない人にも興味を持ってもらえるよう、カンタンていねいに説明します!

【第1回 ツールの準備】はこちら

【第2回 ちびキャラを描いてみよう】はこちら

前回までは、とりあえず簡単なちびキャラを描いてもらいました。
今回は「絵をかくこと」そのものとは少し離れてしまいますが、ドット絵を描き始める前に知っていて損はない基本の技術や表現方法について、レクチャーしていきます。

基本的な図形の表現

○や×など基本的な形の描きかたは、きれいに見えるドットの配置の基礎になります。これを覚えておくと、自分で作画するときの表現方法がわかるようになります。

円の描きかた【1×1~16×16】

円の描きかた【1×1~16×16】

 

×の描きかた【1×1~16×16】

×の描きかた【1×1~16×16】

 

四角形の描きかた【1×1~16×16】

四角形の描きかた【1×1~16×16】

 

04_triangle1

三角形の描きかた パターン1【1×1~16×16】タテ長の三角形です。

 

三角形の描きかた パターン2【1×1~16×16】一点が直角になっている三角形です。 描く角度が変われば、描ける最小サイズも変わります。

三角形の描きかた パターン2【1×1~16×16】一点が直角になっている三角形です。
描く角度が変われば、描ける最小サイズも変わります。

 

お手本となる基本的な図形を、「ヨコとタテのドット数が奇数同士のもの」(上の段)と「ヨコとタテのドット数が偶数同士のもの」(下の段)の2通りずつ描きました。この小さなサイズの違いだけでもそれぞれの図形は、すこし違った形になっています。
例えば、「三角形の描き方 パターン1」の図形上部の頂点を見てみると、上の段の図形では1ドットになっているのに対し、下の段の図形では2ドットで表現しています。他にも、「✕の描き方」の図形の中心点が上の段だと1ドットになっていますが、下の段では4ドットで表現されています。
このように、シンプルなものでも多様に描くことが可能なので、思い通りの作画をするには、様々な表現方法を知っておくことが大切です。

お手本の中で(四角形以外)図形が描かれていないサイズがあるのは、ドットは四角い1つの点なので、サイズによっては表現できないものがあるためです。

斜線や曲線

曲線や斜線も図形同様にドットの配列の参考になります。

1ドットずつずらして配置していくと45°の斜線になり、ずらすのを2ドット毎、3ドット毎というように、連続させるドットを増やしていけば角度は変化します。直線に見えるコツは「規則性」です。必ずドットは同じ数ずつ連続させます。

1ドットずつずらして配置していくと45°の斜線になり、ずらすのを2ドット毎、3ドット毎というように、連続させるドットを増やしていけば角度は変化します。直線に見えるコツは「規則性」です。必ずドットは同じ数ずつ連続させます。

 

先ほどの斜線の規則性を参考にしつつ一本に繋がったジグザグな線を描いてみました。

先ほどの斜線の規則性を参考にしつつ一本に繋がったジグザグな線を描いてみました。

 

カーブ部分でのドットの規則性の違いによって、曲線の角度に変化が生まれます。連続するドットを増やしていくと、緩やかな曲線になります。

カーブ部分でのドットの規則性の違いによって、曲線の角度に変化が生まれます。連続するドットを増やしていくと、緩やかな曲線になります。

 

先ほどの曲線の規則性を参考にしつつ一本に繋がった曲線を描いてみました。

先ほどの曲線の規則性を参考にしつつ一本に繋がった曲線を描いてみました。

 

このように、思い通りの線を描けるようになることも、作画していくのには重要です。紙にペンで絵を描く時も最初は基本的な図形や線をたくさん描くことが練習になります。ドット絵も同様です。ドット絵は見本の模写をすれば誰でもほぼ同じものが描けるので、練習として紹介した図形や色々な線画表現を模写したり真似してみると、様々な表現方法があることに気付くと思いますよ。

ベタ塗り

「ベタ塗り」は同じ色情報のドットで作画範囲を表現する、ドット絵の基本的な描画技法です。

画像上の線画をベタ塗りをすると、画像下のロゴになります。 見てわかる通り、ベタ塗りを簡単に説明すると「塗りつぶしをする」ということです。

画像上の線画をベタ塗りをすると、画像下のロゴになります。
見てわかる通り、ベタ塗りを簡単に説明すると「塗りつぶしをする」ということです。

 

アンチエイリアス

ドットの角が目立ってガタガタに見えてしまう部分(ジャギ)に中間色を置いて、なめらかにする技法を「アンチエイリアス」と言います。この技法は「ジャギ取り」と呼ばれることもあります。

Photoshopなどではぼかしツールなどを使用すれば処理できる部分ですが、ドット絵の場合は、作画する人の手作業によって表現する必要があります。

Photoshopなどではぼかしツールなどを使用すれば処理できる部分ですが、ドット絵の場合は、作画する人の手作業によって表現する必要があります。

 

ロゴマークとキャラクターを描いてみました。このままだとジャギが多く、キャラクターもアウトラインのドットがはっきりみえている印象です。それをなめらかにする場合にアンチエイリアスをかけます。ジャギの気になる線や面の色の変わり目に中間色を置いていきます。

ロゴマークとキャラクターを描いてみました。このままだとジャギが多く、キャラクターもアウトラインのドットがはっきりみえている印象です。それをなめらかにする場合にアンチエイリアスをかけます。ジャギの気になる線や面の色の変わり目に中間色を置いていきます。

 

アンチエイリアスをしたことで色と色の境目がなめらかに見えるようになりました。キャラクターも柔らかい雰囲気を表現できています。 (アンチエイリアスと一緒にアウトラインの明暗も付けました。)

アンチエイリアスをしたことで色と色の境目がなめらかに見えるようになりました。キャラクターも柔らかい雰囲気を表現できています。
(アンチエイリアスと一緒にアウトラインの明暗も付けました。)

 

“中間色とは”

A色からB色までの間の色はすべて「中間色」となります。画像左での「中間色」はA色とB色のちょうど中間の色を選んでいます。図の右のように、さらにどちらかに寄せた色も中間色といえます。

A色からB色までの間の色はすべて「中間色」となります。画像左での「中間色」はA色とB色のちょうど中間の色を選んでいます。図の右のように、さらにどちらかに寄せた色も中間色といえます。

 

アンチエイリアスをかける時に使用する中間色は絵柄やその面積よって異なるので、どの色が適しているかは実際に塗って確かめ、調整する必要があります。また、使用する色数が多くなるにつれて、ぼかしは強くなります。中間色の数も目的や作風にあわせて使い分けると良いです。

メッシュ(網かけ)

2つの色のドットを交互に配置することで、色数を擬似的に増やす技法です。

画像ではオレンジと茶色のドットをメッシュすることで、その中間色を表現しています。これで、もう1色増えたように見せることができます。

画像ではオレンジと茶色のドットをメッシュすることで、その中間色を表現しています。これで、もう1色増えたように見せることができます。

 

幅やドットの規則性を変えることによって、グラデーションを表現することが可能です。メッシュの使用範囲によっても印象がかわります。

幅やドットの規則性を変えることによって、グラデーションを表現することが可能です。メッシュの使用範囲によっても印象がかわります。

 

一枚のドット絵を描いてみました。この絵にメッシュをかけてみます。

一枚のドット絵を描いてみました。この絵にメッシュをかけてみます。

 

メッシュをかけることによって、色の境界がなめらかになりました。  この技法は、家庭用ゲーム機だけでなく80年代のパソコンゲームのグラフィックでも多用されていました。

メッシュをかけることによって、色の境界がなめらかになりました。
この技法は、家庭用ゲーム機だけでなく80年代のパソコンゲームのグラフィックでも多用されていました。

 

今回は、基本の技術や表現方法についてレクチャーしました。
ドット絵を描くための技法(アンチエイリアスやメッシュなど)は多数存在しますが、画像サイズ、作風、色数など条件によっては、効果的に使える場合と使えない場合があります。技法を使えばドット絵が必ずしも良くなる、という訳ではないです。
技法選びや技法の組み合わせの工夫が大事になってくるので、色々と試してみて下さいね。

次回は、ドット絵の色数制限別の作画方法についてレクチャーします。

講師:HGT

img_profile

専門学校卒業後ゲーム業界へ入る。ドッターとして多数のゲームのキャラや背景画、エフェクト(アニメ含む)などを手がけてきた。途中グラフィック以外に企画等も経験。現在は株式会社クリーチャーズにて主に3DCGデザインを担当している。趣味は散歩や料理、休日は映画を観たりして過ごすことが多い。ジャンル問わず創作活動が好き。

PAGE TOP