ドット画像を作成しよう　＜edge＞

　更新日：2013/9/26

　まずはじめに

　　私はゲームアプリゲームアプリ作成に使用する画像を用意するためにドット画像を作成します。　その他に用途があるのかと言われればわかりませんが・・・。

　まず皆さんが気になるのはこれではないでしょうか。

　「絵が下手でもドット絵は描けるの？」

　描けますが、時間がかかります。　いうなれば普通の絵画もドットの連続であり、影の付け方や絵のバランスなんかも同じです。　線で描くか、ドットで描くかの違いだけです。

　ですが、それはドット数が多い、大きな画像を描くときの話になります。

　ゲームで使用するような小さなドット絵（これをチップ（tip）といいます）に関しては事情が変わります。

　ペイントソフトでもドットツールでも小さな画像を描く際はドットを挿入していく作業になります。　ほんとに小さな画像の場合ですが。

　・・・もちろん、絵がうまい方が何倍も速いし何倍もきれいです。　パソコンに触れない暇なときにでも手書きでさらっと練習していても良いと思います。

　たかぼー様が提供されているTAKABO　SOFTより　「edge」を指示に従ってインストールしてください。

　特にこれといった操作はありませんので説明は割愛します。　

　　今回はドット作成ツールedgeを使ってキャラクターの土台となる「ひな形」を作成したいと思います。作成するキャラクターは２頭身になります。

　一応の完成形で上記画像のようになりましたが、もう少し改善できる余地がありますね・・・。

　　こちらが作成後の画面です。　この網目状になっているマス一つが１ドット（１ピクセル）となります。

　このドットをひたすら埋めていく作業・・・ではないです。　安心してください。　このedgeというツールは大変評価が高く、初心者から玄人まで使えるといわれています。

　私も使っていますがとにかく使いやすいです。まず、慣れるまでが早いです。設定などを気にしなければほぼ直感的に使用することができるでしょう。

　とくに範囲指定について理解してしまえば作業効率はグッと上がることでしょう。

　　インターフェースについての詳しい説明をしても良いのですが、そういった説明などはWeb上にいくらでも転がっているので

　手早く操作性を実感してもらうためにも必要な操作と手順だけ説明させていただきます。

　・・・単純に私がまだ熟練していないだけですが(゜A゜;)

　ファイル　→　新規作成　を選択します。

　作成するサイズを聞かれますので今回は８０ドット×８０ドットで作成しました。

　この根拠はのちのアプリに使用する際に８０ドットの画像が必要になるためなのですが、

　正直言うと８０ドットは初めてやるには大きいサイズです。　よく練習などには３２ドットだったりともっと小さなサイズでやります。

　賛否両論ですが、基本的に小さい方がやりやすいようです。単純にドットを打つ数が少ないのでバランスが保ちやすいのでしょう。

　あまりにも小さすぎると今度はごまかしが効かなくなりますのでやはりやりにくいようです。

　　次は作成に使用するパレットを表示します。　あると便利です。　なくてもできます(゜A゜)

　慣れてきてパレットの意味がわかるとおそらくこれなしには入れないでしょう。　最初はそこまで深く考えなくても良いです。

　メインメニューにある表示を開くとパレットの表示関係が出ますので、「カラーパレット」、「ポジションウィンドウ」、「レイヤ管理ウィンドウ」の三つにチェックを入れてください。

　　画面左上「ズーム」を８倍に変更しましょう。　ドットのマスが見えてくると思います。

　さらにレイヤ管理ウィンドウも編集します。「noname000」となっている今のレイヤ名をダブルクリックしてください。　プロパティが表示されますのでレイヤ名を「頭」に変更しましょう。

　レイヤとは？

　※各種ソフトの設定にもよりますが、なにもいじっていない場合はほとんどこの状態です。

　　ざっと説明するとこんな感じです。(゜A゜)ｵﾜｶﾘｲﾀﾀﾞｹﾀﾀﾞﾛｳｶ､､､

　今回は頭や体、腕など各部位ごとに分けて描画していきたいと思います。　書き間違え、塗り間違えを直すのに良いので慣れておくと後がはるかに楽です。

　　まずは頭の当たりを付けてみましょう。　左右対称になるように頭の部分に四角を描きましょう。

　ツールはどれでも良いです。四角形ツールを使用しても良し、鉛筆ツールで地道に書いても良し、直線ツールで４辺書いて繋げても良し。

　まずはedgeツール自体に慣れてみましょう。

　書き終えたら次は新しいレイヤを追加します。　レイヤ管理ウィンドウの新規作成を選択します。

　　頭の他に、体、腕、足の３枚のレイヤを作りましょう。　合計４枚のレイヤを作成します。

　レイヤを作成したらここでパレットの説明をさくっと入れます。

　ここでちょっと脱線　各パレットの反映

　　ためしに頭レイヤに赤い四角と青い四角を書き入れてみました。　この四角が他のパレットにどのように反映されるか見てみます。

　メインウィンドウ：書き入れた赤い四角と青い四角と、先ほど書き入れていた黒い枠線が書かれています。

　レイヤ管理ウィンドウ：赤い四角と青い四角が反映されています。　背景が黒色なのはカラーパレットの説明にあります。

　ポジションウィンドウ：ここにも同じく反映されています。このウィンドウの役割はズームイン、アウトをこのパレットでできて、範囲を指定してその部分を拡大したりできます。

　カラーパレット：赤い四角を書き入れるときは赤い色、同じく青色を選択しています。

　　ここで注意したいのはedgeの特徴ともいえる部分です。

　　カラーパレットの一番左上の色が背景色となります。そして、一番左上を黒色にしていて他で同じ黒い色を使用したいときは、

　　一番左上ではないところに黒い色を新しく作って、その黒色を選択して書き入れるしかないです。

　　その場合でも、背景の透過などで同じ色が消されてしまうので限りなく似た違う黒色を使用したりします。

　　あくまで書き入れる色を選択するときはその色が入っているボックスを選択していると思ってください。

　　赤色なら赤色が入っているボックスを指定しています。なので、そのボックスの色を赤から青に変えるとその通りに描画していたものも色が変わります。

　　これはどうでしょう。　一見、赤色の四角と青色の四角が入れ替わったように見えますがそれとは違う操作をしました。

　上にもあげたとおり描画に対して色を割り当てているのではなくボックスとして割り当てているので、

　カラーパレット内の”赤い色の入ったボックス”と”青い色の入ったボックス”を入れ替えました。

　その他のレイヤ管理ウィンドウやポジションウィンドウにも反映されています。

　長くなったので次回に分けます。

　一通りの簡単な説明はしたのであとはやってみることです。　このツールは非常に使い勝手が良いので習うより慣れてしまった方が早いです。

　以上、次に続きます。　　→　ドット絵を作成しよう２＜edge＞

　質問や指摘等あればあなぐらまで。

　検索ワード：edge　ドット絵　初心者　素人　解説　レイヤ　カラーパレット　ポジションウィンドウ

　　→　ドット絵を作成しよう２＜edge＞

　　 ←エトセトラへ戻る

   　← ねこパンチする！