見出し画像

美術2だったゲーム会社ディレクターがドット絵を学ぶ

 皆さま、おはこんばんにちは!美術の成績が2だった大魔王ロマ子です。普段はゲーム会社でディレクターとして働いており、プライベートではサークルを結成して「今から君はDUNGEON MASTER。 - キミダン -」というタワーオフェンスゲームの制作を行っています。
↓事前登録開始!
https://kimidun.smdgames.net/dl

 仕事が忙しすぎてリリース遅延しており、お待ちしている方がいらっしゃいましたらすみません。年始に行われる東京ゲームダンジョン4までにはリリース予定です。。。

 今回は【裏】ドット絵アドベントカレンダーの12/9(土)に参加させていただきました。どこかのタイミングで今回のドット絵制作の学びをまとめておきたいなと思っていたので良い機会になりました。主催者の方々に大きな感謝を……。

 本題の「美術2のゲーム会社ディレクターがドット絵を学ぶ」に入る前に今回のイベントを紹介させていただきます。


❖【裏】ドット絵アドベントカレンダー2023
主催:フクD さん(https://twitter.com/fuku_84)

そして【裏】があるということは当然本家の【表】があり、今年は更に【端】もある!

❖【表】ドット絵アドベントカレンダー2023
主催:Muscat さん(https://twitter.com/muscat_dot

❖【端】ドット絵アドベントカレンダー2023
主催:ヒサシ さん🐧(https://twitter.com/sikakui_hisashi


 では本題の「ドット絵を学ぶ」について順番に書きたいと思います。前半は経緯などを書いておりますので、読み飛ばしていただいても問題ありません。


なぜドット絵を選んだか


 自分にとっての思い出のゲームはドット絵で、登場するキャラクターの思いや景色などの情景を想像する余地がありとても大好きだったからです。
▷クロノ・トリガー
▷聖剣伝説2・3
▷ファイナルファンタジー タクティクス
▷マリオRPG
 など

 そして苦い思い出を払拭したい気持ちもありました。ドット絵弾幕シューティングアクションゲーム「SPANNER」というタイトルのゲームです。

 東京ゲームショウに出展し、4GamerさんやYahooニュースにも掲載され、連日遊びに来てくれた方も居たというのにリリースできませんでした。そして自分の中では神ドッターになったデザイナーさんが参加した作品でもあります。こういった経緯からドット絵を選ぶことにしました。

現状の画力の把握と調査、そして勉強


・現状の画力の把握

 タイトルに記載の通り美術の成績が2というイラスト担当するには絶望的です。今でも正直画力やばいのでラフなども描けていません。

愛らしくとても可愛い某国民的マスコットキャラ

 絵が上手くないからドット絵も…と迷っている皆さま、安心しましたか?流石に見ながら描いたらもっと上手いですよ?本当です。この画力の人間でも、納得できるまで打ち直しができるドット絵であれば制作中のゲームのアンケート結果でキャラクターが可愛い!雰囲気が好き!など書いてくださる方もいるくらいになれました。正直…とても嬉しいコメントで小躍りしてました

 ディレクターとして勉強や経験を得て「こうした方が良い」は仕事としてもできるのですが、脳内にあるイメージを自分の手で描くは全く手が追いつかないです。。。

 話しは少し脱線しますが、運動と同じだなと思っています。足が速い人やスポーツが上手い人の動きを見て、脳内でイメージしても実際に体を動かすと多くの人は筋力的な違い以前にその通りには動けないですよね。

 現状の把握と言いますか、当時から今に至るまで絵の上手さは上達していません。とりあえず絵が下手を改めて自覚してドット絵をスタートしました。

・調査

 ドット絵ってどうやって打つんだろうからスタートです。Androidには仕事のゲーム制作で痛い目にあってから生粋のAppleユーザーになりiPhoneと
MACを使っています。こちらを念頭にネットやSNSで調査開始。

・ひろはす さん(https://twitter.com/hirohasusan)のYouTube
 ※ お名前を出すのがNGの場合は即削除いたします

 とても参考になりました。その他ネットで調べ、候補の中からWindows用の「EDGE」は外すことにしました。また、色々なサイズがゲーム制作には必要になるので「dotpict」も外すことにしました。

 更に調べ比較すると、動画でも紹介されていたSteamで有料販売されているAsepriteが安価で良さそうと判断し、即購入しました。思い立ったら即行動は創作においても大事。

・勉強

 どんなトンマナにするかを決める前に、ドット絵を打ち始める以前に、ゲーム以外のドット絵をあまり知りませんでした。そこで沢山ドット絵を見て頭に入れつつ、ドット絵の御作法、Asepriteの使い方を勉強することにしました。

・ピクセルアートではじめる背景の描き方

・ピクセル百景 現代ピクセルアートの世界

・ピクセルアート上達コレクション

 気になったものから購入し、読み終えたらまた購入です。御作法やクオリティの高いドット絵・ピクセルアートを解説付きで沢山見ることができました。また、掲載されている方のアカウントのメディア欄を漁るなども行いました。(これらの本に掲載されているような最高のクオリティは当然打ちたくても打てませんし、ゲーム制作ではコスト的にも目指していないので、こんな表現もありなんだ…という点などを意識して読み込みます

 Asepriteは以下の動画もとても分かりやすくおすすめです。
・yuta / HZ3 Software さん(https://twitter.com/yyuta342)のYouTube
 ※ お名前を出すのがNGの場合は即削除いたします

※ 見ている当時は気がついていなかったのですがStrange Telephoneの開発者さまじゃん!!!と後日気が付きました

 現状の画力の把握や調査、勉強を行いながら少しずつ少しずつドット絵も打ち始めます。最初はオリジナルではなく参考を見ながら練習。描きたい絵のパーツを練習して集合させて……こんな感じです。

雲の練習→草の練習→木の練習→こちらのgifという順で練習していきました
ここでgifって色制限あるんだなども少しずつ理解
単眼モンスターっぽいキャラを打ち、動かしてみたくなって練習したgif

 最終的なイラストのゴールをイメージして、順に必要なパーツから練習を重ねていきます。いきなりゴールを目指すと初心者はどこから描いたら良いのか分からなくなるので、パーツから練習はおすすめです。

1ドットの重みが凄いんだが……?


 だんだんとドット絵を打つのにも慣れて来てから気が付きました。まずはこれを見ていただきたいです。下の画像はAとBで1ドット、正確には2個所異なるので2ドットの違いがあります。画像のコウモリ🦇のディーバくんは明るい性格の案内コウモリ🦇なのですが、この1ドットの差で与えたい印象が異なってきます。こ、異なりますよね

キミダン。の案内人次元コウモリの「ディーバ」くんで確かめてみます
※ ちなみにAとBの背景は同じ色です


 どうでしょう。分かりましたでしょうか?異なる箇所は下の画像でご紹介です。

◯で囲んだ口元の1ドットで「にっこり」と「無表情」の差が出来ています

 ドッターの方々からすると、あまりにも当たり前のことかも知れません。
しかし打ち始めたばかりの自分は甘く見ていました。

「1ドット重すぎぃ」

 やっぱりこの1ドットいるかも、やっぱりいらないかも、全体的に見るとやっぱりいるかもという行ったり来たりを繰り返します。そして、なぜかこの作業は一瞬で時間が過ぎ去ります。1ドットの相対性理論です。

サイズ小さ過ぎないか…?


 スマホアプリやブラウザでゲームを作っていたので、通常のデザイン発注などでサイズ(1920*1080や更に大きいサイズなど)についてはある程度理解していました。ですが実際に自分でゲームのモンスターやフィールドのサイズを考え作り始めると、ドット絵のサイズに呆然とします。

「なにこれちっさ、大丈夫?」

等倍書き出しのスライム ちっこいです
等倍書き出しのフィールド フィールド?こっちもちっこいです

 これでどうやってモンスターの細かな差分作るんですか……そもそも入り切らない……ロゴってどうするんですか……打ってからサイズ拡大してみるか……めっちゃズレる……なんで……と言った感じで疑心暗鬼で進みました。

 今回制作している「今から君はDUNGEON MASTER。 - キミダン -」のモンスターサイズは「32px*32px」の枠内。フィールドは表示されるサイズだけであれば「289px*163px」で制作しています。フィールドに関しては後述する視差効果を使っているため実際には……
①地面  「578*163px」の枠内
②日差し 「289*163px」の枠内
③山   「433*163px」の枠内
④雲   「347*163px」の枠内
⑤空   「318*163px」の枠内
という形でそれぞれサイズが異なります。
※ ここまで細かくなくても大丈夫だとは思います

実際のサイズを並べるとこんな感じです

 視差効果はUnity上で処理されているので、もしご興味あれば動画でどうぞ!(全然活動できていないYouTubeですが……)

※ 視差効果→Webサイトでいうパララックス効果みたいなものです

 このようにドット絵のサイズはとても小さいです。どこをデフォルメさせるかを考えながら打っていくと良い感じです。

素材のボリューム多すぎないか……?


 キミダン。では色々兼任しているので自分で世界観、シナリオ、サウンド選定、レベルデザイン、画面ワイヤーや内部データを作りつつ、ドット絵の素材を作っています。プログラムは超安心して任せられる2名体制。
※ 個人開発者はこれらを全部一人でやるって……まじですか???

 普段ディレクターとして指示を出すときにはイラスト素材何百枚か、画面数は数十で……コストと期間はという気持ちなんですが、いざ自分で作り始めると待ってくれ素材のボリューム多すぎないか……

 モンスター1*歩行差分2*進化差分2*属性バリエーション5=モンスター1種あたり20も打つの?!

 完全に甘く見てました…何体いると思ってるんですかね、プランナーは!コスト考えてるのかディレクターは!自分です。

 他にもフィールドやUI(ユーザーインターフェース)、背景、アニメーションやパーティクル…無限に出てきます。

 「ボリュームやばいってぇ!」 

 でもあと少しなので、リリースに向けて頑張ります。ちなみにお気に入りのアニメーションはガチャ演出なので是非見てね。

シェイク、揺れも素材の方でさせてます

ドット絵を学んでディレクター業に活かすべきこと

 ここまで長かったですね!よくぞここまで辿り着いた勇者よ……!の気持ちでいっぱいです。ドット絵を学んで得た知見は本職にも必ず活かします。ドット絵に限らずゲーム制作は総合格闘技!いつか何かに活かせます。

活かすべきことを簡潔に

 今回ドット絵を学ぶことから得た様々な知見、活かすべきことを箇条書きしていきます。

・画面構造への理解
・構図への理解
・ライティングへの理解
・色の選び方や合わせ方
・発注時の具体的な指示
・具体的なフィードバック
・工数見積もりの精度
・近い土俵での会話
・期間の苦悩を知ることでメンバーに寄り添える
・ブラッシュアップに必要な時間

 これらは自分でドット絵を打って学んでみなければ「理解」には及ばず「知っている」だけでした。苦労を知らずに指示するだけ……それじゃあチームはついて来ないですよね。

おわりに

 散文的に書いてしまい推敲する時間的な余裕もなかった文章ですが、最後までお読みいただきありがとうございました。ゲームのリリースは来年の1月後半を目指しています。是非、記事やゲームに興味が出た方はお気軽にいいね、コメントしてみてください。お時間割いていただき本当に感謝です。

リンク

◆X(旧Twitter)
 https://twitter.com/DaimaouRomako 

◆サークルHP S.M.D Game's らぼらとりー
 https://kimidun.smdgames.net/


色々なことがある世の中だけど、楽しいという感情は必要不可欠だと思ってます。 誰かに楽しいを届けられるよう頑張りたいです。