見出し画像

ドット絵でマップチップを描こうZE


メリークリスマス!
裏ドット絵 Advent Calendar 2022ファイナリスト
12/25日、投稿者の老害予備軍ドッターのフクDです!

みんなぁ……ドット絵打っているかい?
ぼく……?ぼくはあまりやっていないよ……
ゲーム作りで急がし……くはないな。全然進んでないしネ。

今年も本家のドット絵アドベントカレンダーが満員になったので
裏ドット絵 Advent Calendarを開催したのだが…
あれ……?ひ、人が集まらない……!去年は結構すぐ集まったのに…
やはり影響力皆無の俺には無謀だった…!?

……でもすぐ来てくれる通天機さんは神的に良い人だから…
ついでに通天機さんが打っているSDガンダム系のドット絵はとても素晴らしいからね……皆さんフォローしたって。
わしゃあゴリゴリのボンボン世代…SDガンダムやらロックマンやらがんばれゴエモンで育ったからね……

もうメンバーが集まらないから空いてるとこ全部自分で埋めたろかなと思ったが、最終的には全部埋まると言う奇跡。
もちろんみんな忙しかったり色んな事情があって投稿が遅れたり、投稿が出来ないこともあるかもしれないけどそんな事は気にしないで雑にやってもらってかまわんの精神で。
おれ自身が書けるかどうか怪しいからな!
と保身に走る自分を奮い立たせてこの記事を書いていたというどうでもいい話は置いといて!

今回はドット絵でマップチップを作ろうの巻でゴザル!

あと本家ドット絵 Advent Calendar 2022も合わせてご覧ください!

あと合間に今年に打ったドット絵も挟んでおくぜ。

皆だいすき室外機

1.マップチップとはなんぞや…?


ゲーム、昔のRPG(ロールプレイングゲーム)等の背景でよく使われたもので、たとえば16pixel x 16pixelの画像を最小単位1マスとしてそれを並べて背景グラフィックを表示するといったもの……
自分で説明を書いていてなんだかよくわからないのでここはやはり絵で説明しよう。そうしよう。あとはググレ。賢明な判断だ

大昔に打ったドット絵を掘り出してきた

さてこれがマップチップじゃ!
なんだよコレ!と思った方、スマナイ…
俺のドット絵画力の限界でな…

でこれは16pixel x 16pixelのサイズで打ったドット絵を並べたものじゃ。これだけだとなんだかよくわからないねえ。
緑のモザイクみたいなものやら壷とか箱とかタンスっぽいものはあるが……

ちなみにマップチップで描く理由は?と言う疑問だが、
昔のゲームは容量が少ない。とにかく少ない。今では考えられないほどに。
ではどうやって少ない容量で絵を表示するか?RPGに出てくる街や村を表現するのか?という話で。
では次にこのマップチップを並べた画像を見てみよう。


雑に並べられた建物らしきもの……

ちょっと雑だがさっきの絵を並べてみた。
某有名RPGに出てくる街の一軒家みたいになりましたね。なりましたね?

これでマップチップとは何かわかってくれたかな?わかったね?

……

今でこそ容量が足りないという問題は無いが(少なくともドット絵にかんしては)昔は使える画像の限界はすぐ一杯になってしまうので
少ないパーツを組み合わせるといった、涙ぐましい努力と技術がちりばめられていたのだ。もちろん容量を節約するというのは、何もマップチップにする事だけではないのだが、それはまた別の話だし私は専門家でもなんでもないので詳しくないのだ……
あえて一つ言うならキャラの色を変えて別のキャラにするといったものもアルヨ!


16x16で打ったアイコン的なもの

2.マップチップを作ってみよう!


もろちん簡単さ!レイヤ機能があるドット絵ツールがあればね!
マウス派なら無料で使えるEDGEがおススメだが自分の好きなツールでやるといい。けれども選択範囲を指定した編集単位で選択できるものがあると楽だぞ。
(描いたドット絵を動かすのに便利)

今回は例として部屋のマップチップを打ってみよう。
自分の部屋でも理想の部屋でもホテルの一室でもいい。
資料は検索すれば何かしらはある。困ったら自分で調べる癖をつけるんや!見つからない時はやさしいドッター達が手を差し伸べてくれるかもしれぬ……私?私はどちらかというと頼る側で…

私はホテルの一室をマップチップで描いて見ることにした。
それでは資料探しの時間だ。ドット絵に限らず絵を描くときに重要な事は資料だ。人間は描いたことのないもの、知らないものは描けないということ。
描けないのは恥ではない。知ったかぶりをしたりほうが恥ずかしいのだ。
そう俺のように…

何から描いても良いけど床と壁を描いてその上にベッドやらなんやらの家具を描くのがわかりやすいので「床」からやろう。
ちなみに普通のホテルだよ。何を如何わしい想像しているのかね!?
けしからんよ!

ホテルの部屋の床といえば……カーペット、絨毯…
つまり、こうだ!


ナニコレ?

漢の1色ベタ塗りじゃあ!これでええんじゃ!

……

すまない……ちゃんとやるから……


絨毯?カーペット?とにかく床だ…

いくつか雑に打ってみた。こういう絨毯のような模様がある場合はタイルパターンを使うといいかもね。タイルパターンに関しては私からはいい加減な事は教えられないぐらい深い技法なので詳しい方の解説記事を求む。

一応すごい大雑把な参考画像はおいておく。

雑でスマナイ…

上の画像のように擬似的に中間色に見せかけたり、一定の間隔でドットを打つことで模様のように見せたり…
これも容量を削減する工夫。先人達の残した偉大な技術。

それでは壁を描きましょう。ちなみに要素ごと(壁・床・家具)に似た色、同じ色は使わないほうがいい、色が溶け込んで境界が分かりにくくなる。


なぜにムラサキ?

まあこうなる。紫の床に紫のタンスを置いたらこうなる。
でも初代GB(ゲームボーイ)の色数ならありえる……?

しかしホテルの壁なんてだいたい白一色じゃろうが!
またベタ塗りか!

ジャーン!

これは…!?
ほら壁のしたのほうになんかちょっと引っ込んでいる黒い部分がよくあるでしょ…?
で壁の上のほうに微妙にグラデーションしているのは天井に近い壁は暗くなるってやつですよ。ドット絵は3Dじゃないので光とか影に関してはリアルにする必要はありません。そこは重要な所じゃないのですよ。極端に破綻してなければ良いのです。一枚絵じゃないし。
たとえばこの絵がゲームに使われるもので容量の上限や納期があるとここでは仮定しましょう。そんな実際の光と影の原理を忠実に再現して描くことより遊んでいて楽しいかがゲームとして重要なのだ。


なんやこの黒いのはァ!?

で回りを暗めの色で囲って壁と床を並べてみました。
部屋っぽくなってきたでしょう?
じゃあ家具に行っちゃう……前に窓をつけてみましょう。


飯テロ定番のラーメン

3.家具…の前に窓を作ろう

ここからはレイヤー分けをする。絵の上に別の絵を重ねる時はレイヤーを分けたほうが良い。ドット絵初心者はレイヤーを使っていないかもしれない。
そういう私も昔はレイヤー無しで打っていたがそんなことにメリットは特にない。無駄な時を過ごした…
あとデータの保存やバックアップは定期的にな…急にツールがクラッシュしたり停電が起きることもある。大事じゃぞ。

外は昼なの?夜なの?

正直窓のガラスの表現は苦手だが。
だいたい窓のイラストってのは斜めに白い光が入っているので
こんな感じにしておこう!でもそれだけだとアレなので遠くのビル、街並みを加えてみた。角度というかちょっとおかしいかもしれないがそれっぽく見えれば良い。良いんだよ!


おかわりいただいただろうか?

上の2つの部屋の違いが分かるだろうか?
下の窓は街並み無しのベタ塗り窓だが…
実は壁の高さが違うのと、上の部屋の窓はマップチップを縦に2マス使っていることだ。これはどういうことかというと…
単純に部屋を大きくみせるかどうかの違いと言ってしまえばそうなのだが、
たとえばここにキャラクターを表示させる場合キャラクターのサイズはどうなるだろうか?


誰この姉ちゃん?

キャラクターを置いてみました。
まあどちらもリアルなサイズとは言えないが…
上の部屋の窓は目線の位置にありそうで
下の部屋の方は窓の位置が頭の上にあるように見えますね。
何が言いたいかというとマップチップの1マスといっても、
半分またはそれに近いサイズも使うこともあるというだけです……
今の時代に容量を気にする必要はないけど、マップチップと言うのは少ないパーツで大きな何かを表現するものなのでそういうパーツばっかりになるのはなんだか美しくないというか何というかケチくさいような感覚がおっさんの私にはあるのでした。どういう話?


昔のスポーツカーのデザインがほんと好き

4.ベッドを打つ!

話が長い?展開が遅い?まだまだこれからよ!
でもそろそろクライマックス……!
ベッドを打ちましょう。寝心地の良いやつをな!

雑な下書き…

下書きはこんな感じですかね…
ベッドは2マスで収めたい所だが3マス使用することで壁との距離間で
違和感を減らせるので3マスがおススメ。


なんかさっきと窓の位置が違うが…

ベッドも描くのは難しい。シワとか光。人が寝ていない状態での立体感…
上手い人の作品を参考になんとか仕上げるのだ…

ではここからは色々追加して一気に仕上げに入りましょう。
机やらテレビ・エアコン・カーテン等、色々と描いてホテルの部屋らしくしてみましょうぞ!


もちろんこんな光景なんか見たことはない

5.マップチップ「ホテルの部屋」完成

角度の問題でクローゼットは無し

ばぁーん!シンプルだが完成としましょう。
どうです?なんかそれっぽくなったでしょう?そうでしょう?
私はこんな感じで普段マップチップを描いてます。

本当はもっと細かい説明とかちょっとしたテクニックも書きたかったけど、
自分はあくまで素人。見よう見真似でドット絵を吸収してきたので
説明とかは講座のようなものは基本的に出来ないのだ。
でも今回は記事を書くために知っている風な人を演じてしったかぶったように解説しているが、かなりいい加減でテキトウな内容なので鵜呑みにはしないようにな!OK?

それでは有意義なマップチップドット絵をライフを!


憧れのサイバーパンク風の街並み

6.終わり

これで裏ドット絵 Advent Calendar 2022はおわり!
ちゃんと書いてえらいっ!
一応裏とはいえ、企画の主催側なので短い文章と一枚絵で終らせるわけにはいかねえと思って無駄に長々と書いたけどお楽しみいただけたでしょうか?
誤字脱字はご勘弁を。
来年?来年の事はわからんが、またやるかもな!

その前にゲームのシナリオ完成させたいね。というかさっさと書け!
でもドット絵もバリバリやりたいんだけどねえ……ままならぬものよ。

と言う訳で参加してくれたみなさんお疲れ様でした!そして
ありがとうございました!

おわり


メリークリスマス!


この記事が気に入ったらサポートをしてみませんか?