OCTOBER 28, 2016

ドット絵の色数制限別の作画方法について学ぼう編【現役ゲームクリエイターによるドット基礎講座|第4回】

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

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

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

【第3回 ドット絵の作画技法について学ぼう】はこちら

前回に引き続き、ドット絵を描きはじめる前に知っていると便利な基本知識についてレクチャーします。

色数制限別 ドット絵の作画方法

002ビット数

図1:ドットの色数表

ゲームのグラフィックでドット絵が主流だった頃は、現在よりゲーム機やPCの性能が高くありませんでした。そのため、ハードの仕様や使えるデータ数の限界に合わせて、ドット絵の使用色数を「図1」のように制限する必要がありました。それはゲーム機やPCの性能上、図1に書いてある色数の段階ごとに効率良くドット絵のデータを軽くでき、処理がしやすいようになっているからです。

これを踏まえて、今回はドット絵でよく使われていた1ビットカラー、2ビットカラー、4ビットカラー、8ビットカラーそれぞれの表現方法を紹介していきます。

2色で作画(1ビットカラーの場合)

色数を豊富に使える今の時代からすると、すごくシンプルな作画表現です。前回の記事でレクチャーした「ベタ塗り」と同じです。

最近では、あえてこのようにシンプルに描き、“ドット絵らしさ”を強調した表現も見られます。

003第4回画像_1色作画

2色(描画色+背景色)で作画されたキャラクターを5体、並べています。

1ビットカラーなので2色まで使用可能ですが、キャラクター等を描く場合、作画部分は実質1色で表現をします。そして作画部分以外には「背景色」を使用します。ドット絵では背景部分も1つの使用色として数えてください。

そして、作画した絵を別で用意した背景と合わせて使用する場合、背景色で塗った部分は透過処理をおこないます。
(※透過処理については後ほど説明します。)

4色で作画(2ビットカラーの場合)

004第4回画像_3色作画1

2ビットカラーなので4色まで使用可能ですが、背景色の1色が含まれるので実質3色での作画になります。レトロな雰囲気の作風にしたいなら、このくらいの色数がおすすめです。

このファミコン時代の頃までは、背景色を黒にし、キャラクターの使用色内でも黒を用いることで作画部分で4色使用する技法も使われていました。これは背景が黒のときのキャラクター作画などにも使われていました。

005第4回画像_3色作画2

背景色を黒にし、作画部分でもそれぞれ黒を入れて4色で作画された絵。

透過処理とは

キャラクターと背景を組み合わせる時など、別々に描いた絵を重ねる場合は透過処理を行う必要があります。
透過処理というのは、簡単にいうと背景色の部分を「透明にする」ということです。

006第4回画像_3色作画3

背景色を青にしてキャラクターAとB(4ビットカラー)を作画しました。

007第4回画像_背景色1

透過処理していないAと処理をしたBを背景と重ねてみました。
Aのキャラクターは透過処理をしていないため、別で用意した背景と合わせた時に板状に表示されてしまっていますが、透過処理のされているBはキャラクター部分以外は透明になり背景に違和感なく配置ができました。

複数の絵を組み合わせる技法

透過処理を行うことで絵が重ねられるようになると、色数制限による色の不足を補完するこができます。例えば4色(2ビットカラー)のドット絵で、どうしても作画部分に3色以上必要となったときに、別の3色で描いた複数の絵を重ねることで、絵を完成させます。

008第4回画像_キャラ絵組み合わせロボ単体

キャラクターを2ビットカラ―(キャラクター3色+背景色1色)で作画しました。

009第4回画像_キャラ絵組み合わせ剣単体

先ほどのキャラクターとは別に3色で描いた装備品を作画しました。
キャラクターと装備品を組み合わせます。

010第4回画像_キャラ絵組み合わせ00

色数制限によって1枚では描けないものも、絵を重ねることで表現することができました。

011第4回画像_キャラ絵組み合わせ全部

他にも様々な装備品を描いてキャラクターに装備させると、こんな風になります。
絵を重ねる事で表現しているので、装備は絵を入れ替えるだけで簡単にきせかえができます。このように、この技法は色を増やすということ以外のメリットもあります。

16色で作画(4ビットカラーの場合)

4ビットカラーなので16色まで使用可能ですが、背景色(または透過処理用)の1色が含まれるので、実質15色での作画になります。
16色はスーパーファミコンやアーゲードゲーム、携帯ゲーム機などで多く用いられた色数です。

012第4回画像_4ビットカラ-キャラ絵

この3つのキャラクターは、それぞれ15色+背景1色の16色で作画しています。

ゲーム機などのハードの性能が向上すると、描画できる絵のサイズ(キャンバスの大きさ、データのサイズ共に)が拡大し、色数増加によって細かいディティールの表現も可能になりました。
しかし、それによって絵のサイズが小さいためにディフォルメで表現していた部分を実際に描かなくてはいけなくなり、アイコン寄りの絵ではなく、「小さい絵」として作画する技術が必要とされるようになりました。

013第4回画像_4ビットカラ-キャラ絵02

そのため描きこまれた絵が増え、元となるモチーフの再現度も格段にあがりました。

もちろん、16色全ての色を使う必要はありません。作風や用途に合わせて、今でもシンプルな作画は多用されています。

16色以上での作画(8ビットカラーの場合)

ハードの性能はさらに高まり、解像度の向上や、使用データ量の増加、色数も32色や64色と増えてきました。そして現在では、基本的に256色以内(8ビットカラー)で作画することがメインとなっています。だいたいのドット絵は256色以内で作画できるからです。

014第4回画像_8ビットカラ-キャラ絵03

256色で作画する場合にも、さきほど説明した「絵を重ねる技法」を使用することがあります。色が足りないという理由とは少し違い、一度に256色以上の色を使用して大きな絵を描くのが大変だからです。絵の一部分ずつを作成し、最後に合体をさせることで、一枚の絵を完成させます。
これはあくまで作画の一例で、パーツ分割するのではなく沢山の色を一枚絵に使用して作画する場合もあります。(RPGの大きいサイズのボスキャラのグラフィック等。)

015第4回画像_8ビットカラ-キャラ絵分解

16色以上での作画が増えてくると、大きいサイズのゲームグラフィックはPhotoshopのようなペイントソフトを用いてフルカラーで作画し、減色ツールを使用して最大256色以内にしてから使用されるようになりました。それは、解像度の向上や使えるデータ数が増加したのが理由です。
またグラフィックのサイズ、色数的に全てをドットで手描きをするのがコスト的に見合わないという判断をされることが増え、一部だけドット絵を用いる手法も増えるようになりました。3D等他のグラフィック表現が出てきたからです。

今でももちろん、個人でスーパーファミコン時代のような作風のゲームを作られている方は多く、ドット絵のみを用いた優れた作品もよく見かけます。海外のゲームに目を向けると、表現の一つとしてドット絵を多く扱っている印象も受けます。
ドット絵という表現方法はコスト、技術継承の問題等色々ありますが、表現の一つとして、ドット絵が日本でももっとゲームグラフィックとして用いられればいいな、と思っております。

 


 

第3回と4回の講座では、ドット絵の様々な描画技法や作画形式についてレクチャーしました。「実際に描く」ことから離れていましたが、実際にドット絵を描く時に、ためになる知識だと思います。ぜひ覚えておいてくださいね!

次回は、「自分が描きたいものを描くときに、どうやってドット絵に落とし込んだらよいか?」という、一番最初のとっかかりについてレクチャーします。絵心はないけど、とりあえず好きなものを描いてみたい! という方、必見です。

講師:HGT

19_profile

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

PAGE TOP