MIS.W 公式ブログ

早稲田大学公認、情報系創作サークル「早稲田大学経営情報学会」(MIS.W)の公式ブログです!

やってみよう!ドット絵! 【カウントダウンカレンダー2018冬12日目】

こんにちは~!51代CG研、おいなりと申します。
今年の3月に始めた未熟者ながら、今年はドット絵班長を名乗らせていただいておりました。 ありがたや~~~

さて、2018年新歓ブログでも少し紹介いたしましたドット絵について今日は色々語っていきたいと思います!(最後に班長っぽいことがちょっとだけしたかった!)

以下記事↓↓↓

blog.misw.jp

題名の通り、今日はドット絵に気軽にチャレンジしていただけるようになることを目標に、入門希望者(?)~コツの知りたい中級者を主なターゲットとして色々紹介していきます。 「ドット絵のツールからまず知らないが!!!」という方や、「使い方は分かった、けどこの後どうすればいいねん」という方に特に響くように頑張って参りま~す!

ここで1つ先に注意事項があります。

前述の通り、私もドット歴は非常に短いです。 また、最近のドット絵は多種多様なものにあふれているので様々な意見があると思いますが、 一個人の主観だらけ の記事を書いておりますのでご了承ください🙇

今日はこのような流れなので、自分の特に知りたい場所をクリックしてお読みください~~

1. まずはツールを使ってみましょう

まずはツールの導入です。 私の使用ソフトはEDGEというフリーソフトです。

takabosoft.com

上記新歓ブログでも宣伝してしまったのですが、無料でレイヤーが大量に使えたり(何と128枚!)、GIFアニメーションが簡単に作れたり、グラデーションなどの便利な機能がしっかりそろっているのでオススメなのです。

ここから先、このツールの使用方法(インストール~簡単なGIFアニメの作成)は以下のスライドが我ながら丁寧にまとめられていて分かりやすいと思います。 これは春学期、活動中に行ったドット絵講座をこの記事用に少し手直ししたものとなっています。

EDGEはWindows環境のみでは…??と思ったそこのあなた!! このスライドの最後から2枚目をご覧ください。 なんと!リンゴ製品ご愛用の羨ましい方々も使えるんです、安心してください!

ここまで読んでくださったあなたはもうこんなアニメが作れるようになっています!すてき!

f:id:minoinari:20181210021416g:plain
〇が動く~~

2. じゃあ何を作る??

ここまで来たあなたはもう立派なドッターさん、ドット絵師さんです!

「う~んけどこの後どうしよう、何打とう」 「打ちたいものはあるけど…けどなんかよくわかんないし始めずらい…」

分かります。すっごく分かります。 自由度高すぎる問題、つらいですよね。

女の子でもいいですし、食べ物でも、数字でもなんでもありなんです。 好きなキャラクターの模写とかでもよいですね…!!

今年はロゴなんかも少しドットで打ちました!

f:id:minoinari:20181210022427p:plain
Money is World ロゴ

これは12月6日公開記事でwbiraki君が振り返っていたRPG企画「Money is World ~金で殴るRPG~」用に打たせてもらったやつです!

blog.misw.jp

3. けどそもそもサイズとかってどう選ぶ???

私がドットを打とうとしてまず悩んだのはサイズ(ドットの数、解像度といったもの)です。

「自由に設定できちゃうけど、どのサイズ選ぶとどういう絵が仕上がるの~~」 はじめは結構迷ってしまうのではないでしょうか。

まず結論から申し上げますと

自由です。

もともと昔のPCの解像度、表示色の少なさをカバーするために発達したこの技法。 未だに2のべき乗(8×8, 16×16, 32×32, 64×64, …)が基本的なサイズとしてよく使われているように感じます(背景などを除く)。 (ファミコンのグラフィックの基本単位は8×8でした)
っていうより、このサイズが一番気持ちよく感じません(?)。
けれども、現在は絵師さんによってはもうドットである必要はないのでは!?と感じるような高解像度、大量な使用色の方から、「未だに使用するのは16色まで」、「やっぱり16×16でしょ!」とこだわりを持ち続ける方まで様々です。 (格闘ゲーム用とかだと平均すると約50×約100、約175×約250、約250×約450ぐらいらしいです…もはや普通の絵…すごい…)

私は基本的には32×32のサイズで打っています。 やや細かい部分まで再現でき、その上ドット絵特有の色が面にも線にもなるの恩恵を一番うけれるように感じています。

特に元々線画をしっかり描くタイプのイラストを描かれていた方以外は32×32または64×64から始めることを強くお勧めします。

では、その理由を含めて、 代表的なサイズ とその主な 用途 (だいぶ主観)を紹介していきたいと思います!

3.1 まずはオススメ 32×32

サイズ順に並べた方が分かりやすいかな、とも迷ったのですがやはり推し(?)を最初に載せちゃいます!

先ほど述べたように、ドット絵らしさと打ちやすさが両立しているサイズに感じます。

主に1枚絵としての

  • キャラクター
  • ご飯
  • 小物

に向いてるように感じています。

以下作品例です↓↓↓

f:id:minoinari:20180411003648p:plain:w160
ドットみすちゃん

f:id:minoinari:20181210110840p:plain
ごはんまとめ

f:id:minoinari:20181210110949p:plain:w160
沖田さん

みんなもう見飽きたよ…ってなってるかもしれないドットみすちゃんもこのサイズですね~

ごはんまとめは、この1つ1つの品が32×32になっています。

また一番下のキャラクターのように、ポーズも比較的表現できるようになるのもこのサイズぐらいからです。

3.2 次はなんとなく懐かしい… 16×16

ファミコン時代は容量との兼ね合いから、多くのゲームで16×16が使われていました。 未だにその味が好きな人は多いですね。 某有名な配管工のおじさんもこのサイズです。

何を隠そう、先ほど紹介したRPG企画「Money is World」の主人公たちのキャラクターもこのサイズのドットで打ちました。

16×16の特徴としては、

  • the ゲームとかのドットって感じになる(完全に主観)
  • 32×32に比べ、詳細を打ちにくい
  • 普通の絵とは使う感覚が少し違うので、ちょっぴり難しい
    RPG企画でこのサイズでやりたいです!って最初言われたとき、殺す気か!?ってほんの少し思ったり思わなかったり…

その他にも漢字などもこのサイズより大きければ基本打てます。

というわけで、用途としては

  • ゲーム用えにしんぐ(キャラクターなど)
  • 漢字

とかがオススメです。

以下作品例↓↓↓

f:id:minoinari:20181210130119p:plain:w160
冒険者

f:id:minoinari:20181210130143p:plain:w160
親父
f:id:minoinari:20181210130328p:plain:w160
UFO

f:id:minoinari:20181210130737p:plain:w160
漢字の例

f:id:minoinari:20181210125754g:plain
主人公歩きます

とりあえずきちんとキャラクターごとの特徴とかはしっかり表現できますね。 動きもつけられます。

また、漢字も画数が多いものでもご覧の通り! (むしろ実は画数が多い方が楽なのですがそれは秘密)

3.3 自由度低いから結構楽(?) 8×8

次はファミコン時代の最小単位、8×8です。

これはもうキャラクター全身をわざわざこれで作るのはいいかなってちょっと思っちゃったりします(自由度低すぎてあまり色など以外で個性を持たせるのは至難の業)。 その代わり、漢字以外の文字・数字・記号などにはもってのこいです。

実はこの辺は一部を除き、7×7や6×6で打った方が綺麗にできたりします(個人の感想です)。 なので、用途に合わせてこの枠組みの中でやっていくのがオススメです。

フォント好きな方はご存知かもしれない8×8 ドット日本語フォント「美咲フォント」もこのサイズです。

ということで、このサイズのおすすめ用途はさっき述べてしまったように

  • ひらがな
  • カタカナ
  • アルファベット
  • 数字
  • 記号

です~

以下、作品例です↓↓↓

f:id:minoinari:20181210142204p:plain
ひらがな
f:id:minoinari:20181210142227p:plain
カタカナ
f:id:minoinari:20181210142306p:plain
アルファベット
f:id:minoinari:20181210142327p:plain
記号

他にも、モンスターボールなどをこのサイズで打っているドッターさんを観測したことがあるので、簡単なつくりの小物も向いているかもしれません。

では、次は大きいサイズも見てみましょう。

3.4 結構細かいところまで表現できる! 64×64

このサイズになるともう普通の絵とだいぶ描き方も似てくると思います。 ここで、何度も出てくる描き方(打ち方)って何だよ、と思ったそこのあなた、少々お待ちください(4.2に詳しく!)。

16×16、32×32では1.5~2.5頭身のキャラクターが主になります。

それが64×64では、3~5頭身のキャラクターも沢山表現できるようになります!

私はここまで来たらもうベクターを沢山利用した描き方や厚塗りなどの方法で描きたくなってしまうことが多いのですが、32×32よりこちらを好まれる方も沢山いらっしゃるようです。

よって、このサイズオススメなのは!

  • 3~5頭身のキャラクター
  • ある程度細かいところまで表したいモノ

ですかね

なんでも割と万能に見えます。 このサイズのドットは自分のPCから作品例を見つけられなかったのと少しめんどくさk…でちょっと「64×64 ドット絵」でググってください。

3.5 その他のサイズ

以上の3.1~3.4では、比較的よく見る代表的な基準となるサイズをご紹介しました。 では、最後にそのほかにも少し挑戦した分野ごとのサイズを見てみましょう。

3.5.1 CDジャケット

今年の夏コミのMIDI研コンピ「Fresh Breeze!」のCDジャケット、盤面イラストを作成させていただきました。

f:id:minoinari:20181210194353p:plain:w300
Fresh Breeze!

上記のジャケットイラストは60×60です。

これは12cm×12cmのジャケットということが分かっていたので、自分はどのぐらいのドットの大きさで魅せたいかということから逆算してサイズを決めました。 1マス(?)2mmと考えたのですが、結果自分でもニヤニヤ幸せになれる出来栄えでした。

デジタルの世界から印刷などしてリアルに持ってくることが先に分かっている場合、 ドットのサイズから逆算 するのはだいぶ有効な手段だと感じています。

いい曲ばっかりなので聴いてね↓↓↓

3.5.2 ロゴ

先ほどのRPGのロゴは280×140を少し余らせるようにしてつくりました。

他の企画員からもらったタイトル画面(ロゴ無し)のドットの数と、自分がどの位置にどのくらいの大きさで作りたいかでキャンバスを作ります。 そして出来上がりを出力し、他のソフトで重ねると下のタイトル画面のようになります!

色々な要素が合わさる場合、最低限の部分だけ共通させて(今回の場合ドットのサイズ)あとで組み合わせるのも効率が良くなったりします。(これはドットに限らずです)

f:id:minoinari:20181210200228p:plain
Money is World タイトル画面

4. Tips

ではでは、打つドットのサイズも決まったということで、実際に打ってみましょう!!!

とその前に、よくある質問コーナーです。

ここまでは分かってるわ~~~、と思っていらした皆さん、お待たせいたしました。 今回は主に2つの疑問(?)にお答えします。

4.1 縁取りはあった方がいいの??

答えは・・・

好み、場合による

です

今回の作品例にも縁取りあり、なしが両方あったようにこれも完全に3でご紹介したサイズと同じく任意です。

しかし、縁取りをした方がはっきりと周りとの区別がつくので、ゲーム用ではしっかりつけるのが一般的なように思います。

逆にそれ以外の単純にイラストとしての用途では個人個人様々です。
私は最近は普通のイラストでは縁取りせず、色の置き方だけで色々なものを表現することの方が多いです。 ドットの数は限られているため、縁取り分が少しもったいなく感じてしまう、ということもその原因のひとつのように思います。

4.2 ドット絵と普通の(?)イラストの描き方の違いは??(色の選び方、立体的にどうみせる?)

これは一番多く色々な方に質問していただく内容です。これに併せて色の選択や立体的にみせる表現方法もよく聞かれますが、ほぼ同じ部分に対する問いなので、最後にこちらの説明をして私の記事を終えたいと思います。

ここで一番大切なポイントは

1つ1つのドットが面にも線にもなる

というものです。

さっきも聞いたよ~~という方、大切なことなのでさらっと2度言いました。

つまり、とあるドットに置かれたとある色がまず立体感を表すための要素となり、その上で境界の役割も果たすのです。 というわけで線画いらないぞやった~~~~

モノを形で捉えるのではなく、面で捉える
もしくは立体的なものを、平面、色がただ並んでいるように捉えると途端に打ちやすくなると思います。(うまい表現が見つからない…ごめんなさい…)
普段厚塗りをされる方には違和感が少ないのではないでしょうか。

私は厚塗りするときにもこのように、資料をみている場合は脳が立体的に感じ取ってしまったものを強制的に平面にし、見ていない場合も頭の中の3Dモデルの写真を撮り、それらをドット上に2Dプリントするイメージで描いています。

とりあえず、立体を平面として捉えようということですね!

写真など、実世界のものにはわざわざ境界線が引かれているというわけではありません。 ぜひ、まずは色々観察してみて、どのような色が特に目に付くか などをチェックしてみてください。

その印象的な色を打っていくと、いつのまにかいい感じ(語彙力)になってると思います。

f:id:minoinari:20181210211726g:plain
回るまーわーる――

ここまで来たら、もうドット絵完璧ですね!たぶん!!!
ではでは、実際にすきなものをどんどん打ってください~

5. おわりに

駄文をここまで読んでくださり、ありがとうございました。

もう今週末には引退の身なので、その前にこれはどこかでまとめておきたい!っと思っていた知見をついダラダラと書いてしまったかもしれません。
この文章がどなたかの役に立てば幸いです。

また、Twitterにはすごいドッターさんがわんさかいらっしゃるので、そちらでがっつり目を肥やしてどんどんドットに挑戦してくださいな~~

私もまだまだ伸びしろだらけな存在なので、共に成長していきましょう!

さて、明日は51代Tommiの生音ヒューマナイズについてのあれこれ! 乞うご期待~~~