APRIL 1, 2016

ツールの準備編【現役ゲームクリエイターによるドット基礎講座 第1回】

※2016年4月1日に公開した記事ですが記事の内容を見直し、加筆、修正し2017年8月10日に再度公開しています。

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

ドット絵とは?

ドット絵ってご存知ですか?

四角の集合体で構成された絵が「ドット絵」です。

この女の子のドット絵も拡大すると、

四角いドットで構成されています。

ドットでいろいろ作画

まる

カタカナ

英語

数字サイズいろいろ

記号いろいろ

ちびキャラ

小さいアイテムアイコン

同じ情報で2倍のサイズで描いてみたり、

ちびキャラを描いてみたりもできます。

これらのドット絵をいくつかアニメーションさせてみます。

4パターンでこのように動かすことができます。

 

食べものをアイコンに 

ラーメン

おでんの具いろいろ

具のサイズを変えてみたり

アイスも描いてみました

描き込みを増やす

大きさ同じながら、色数を増やしたり

立体感を出せばクオリティがアップします。

マップもつくれます

いろいろなパーツ(マップチップ)をつくって組み合わせれば、

8bitゲームのような雰囲気の背景もつくれます。

ツールのインストール

この講座では『EDGE』というドット絵専用のツールを使っていきます。『EDGE』は無料でダウンロードでき、誰でも使いやすいのでおすすめです。

img05

STEP 1

こちらのサイト(http://takabosoft.com/edge)でツールをダウンロードします。
トップページの右側にある「ダウンロード」ボタンをクリックして、ダウンロードを開始します。
(写真の、赤いワクで囲んだ部分です)

img06

STEP 2

ダウンロードしたら、「ダウンロード」フォルダ内に「EDGE」フォルダがあるかどうか確認してください。

img07

STEP 3

「EDGE」フォルダをマイドキュメントなどにドラッグして移動しましょう。

img08

STEP 4

移動したら、「EDGE」フォルダ内の「edge.exe」をダブルクリックするとツールが開きます。
これでツールが起動しました。
(インストールは必要ありません)
続いて、作画の準備をします。

作画の準備:メインウインドウとカラーパレットの設定

 ツールを開いたら、実際にドット絵を描くウインドウ(メインウインドウ)と、カラーパレットを設定します。

img09

STEP 1

ウインドウの左上の「ファイル」メニューをクリックして「新規作成」を選択すると、「新規作成」ウインドウが表示されます。

img10

STEP 2

今回は「横幅」と「縦幅」を「128×128」にして始めてみましょう。
(昔のドットはコンピュータが計算しやすい2のべき乗でかかれることが多かったので128×128にしています。)
「カラーパレット」と「背景色」はそのままで大丈夫です。

(「背景色」は初期設定が「白」になっている場合がありますが、どちらでもかまいません。)

img11

STEP 3

「OK」をクリックすると、「EDGE1」という新規ファイルのウインドウが開きます。

img12

STEP 4

ツールボタンが並んでいるところから、パレットのマークのボタンをクリックすると、「カラーパレット」ウインドウが開きます。

img13

STEP 5

すでにたくさんの色がありますが、今回の作業の流れでは不要なので、今ある色情報を初期化、整理します。
「カラーパレット」ウインドウの「編集」メニューをクリックして、「削除」を選びます。

img14

STEP 6

パレットが黒のみになりました。これで初期化は完了です。

作画の準備:背景色を決める

引き続きカラーパレットの設定を続けます。この時点で背景色を決めておきます。黒はなにかとイラストに使うので、このままだと作画しにくくなります。今回は青みがかったグレーにしてみましょう。

img15

STEP 1

「カラーパレット」ウインドウの一番左上のマスをクリックして、選択した状態にします。

img16

STEP 2

その状態で、「カラーパレット」ウインドウの下部の「赤」「青」「緑」と書かれている部分の右の部分に数値入力、もしくはその横にあるスライダーを操作して色を作ります。
入力できる数値は0~255です。
スライダーを動かしてもいいですし、数値を直接入力しても色を作れます。
(写真の、赤いワクで囲んだ部分で色を作ります。)

img17

STEP 3

今回は青みがかった濃いグレーにするので、「赤」を100、「緑」を120、「青」を120と入力しましょう。
これで背景色の完成です。
先ほど選択したマスがグレーになり、メインウインドウもすべてグレーになりました。

カラースライダーを自由に操作してみると分かりますが、思い通りの色を作るにはコツが必要です。
※色の作りかたについては、今後くわしく説明する予定です。

作画の準備:ウインドウを使いやすい倍率にする

作画は、ドットの並び方を確認しながら行います。
初期表示のままだと小さすぎるので、拡大しましょう。

img18

STEP 1

メインウインドウのツールバーの2段目にある、虫めがねのマークをクリックします。
カーソルをメインウインドウ内にもってきて左クリックすると、最大32倍まで画面が拡大されていきます。
右クリックで縮小します。

拡大していくと、グリッド(マス目の線)が表示されるようになります。
「ドット絵講座 第2回」で、最初にレクチャーするのは20×14マスの作品なので、だいたい64×64ドットくらいが見えていればOKです。

ズームは16倍か20倍くらいがオススメです。

img19

STEP 2

メインウインドウのツールバーの、ペンのマークを選択していればドットが打てます。
色は、「カラーパレット」ウインドウの背景色の右隣のマスをクリックして黒を選択し、作画エリアになんでもいいのでドットを打ってみましょう。

img20

ドットの大きさの見えかたを確認して、自分の見やすい倍率表示にしてください。
ドットを打つ前に「カラーパレット」ウインドウは自分が作業しやすいところに移動してください。
これで作画の準備は完了です、お疲れさまでした!

次回はこのキャラクターの作画に入ります。
↓↓↓

img21

講師:HGT

img_profile

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

PAGE TOP