はじめに

弊社で制作したタイルセットが、現在、『RPGツクールMZ』『RPGツクールMV』の公式アセットとして販売されております。
日本の街並みを再現できるということで、国内だけでなく海外からも好評いただいています。

RPGツクールMZ

RPGツクールMV
©Gotcha Gotcha Games Inc./YOJI OJIMA 2015

住みたい街タイルセットロゴ

SERIALGAMES 住みたい街タイルセット

今回の技術ブログではこちらの『住みたい街』タイルセットにおける、ドット絵の背景の制作過程を紹介します。

モチーフについて

「住みたい街」のモチーフはご覧の通り日本の街ですが、具体的には「東京・吉祥寺」です。
駅や繁華街、公園などを兼ね備えた街として具体的なモデルとして採用しました。
また、アニメやゲームなどの舞台になることも多く、ツクールで物語の再現をして遊んでもらえるかと考えました。

題材が現代なこともあり、ネットで調べることで充分情報は得られますが、街の空気感なども再現できればとの考えから、実際に吉祥寺に足を運んで写真の撮影などもしました。

取材に行った吉祥寺の風景

ツクールアセットの仕様

さて、実際の製作説明に入る前に、まずはアセットの仕様を確認します。
ツクールアセットにおけるタイル１枚のサイズは48ｘ48ピクセルとなっています。

大きいものを作る際はいくつかのタイルを組み合わせて表現します。
逆に数ピクセルしかないような小さいオブジェクトでも扱いは１タイルとなります。

色数の制限はありません。
制限がない分、表現の幅は広がるのですが、色に迷ってしまって描き終わらないということもあるので、あまり色を使いすぎないように気を付けています。

タイルのイメージ

タイルマップの詳しい規格に関してはこの記事では説明はしないため、公式のタイルセットの規格をご確認いただければと思います。
結構複雑なためこちらの記事も合わせてご確認いただければと思います。

住みたい街タイルセット一覧

ドットの製作ツールについて

今回、弊社で制作したドットの作りは昔ながらの8bit機向けのようなドット絵ではなく、テクスチャやグラデーションなどを駆使して作られた物です。
昔ながらのドット絵で制作しても良いのですが、複数人で制作しているため一定のクオリティを担保させたい為、また作業効率をあげるためにこの手法を取っています。

使用ツールは主にPhotoshopを使用しています。
正直な所、Photoshopはドット絵を描くには描きづらいでツールです。
ドット絵のみで仕上げたい場合は「EDGE」や「Aseprite」などが効率的ですが、今回はテクスチャやグラデーションなどを駆使したいため、Photoshopを使用します。

制作した素材

制作工程について

今回はタイルセットBに配置する背景オブジェクトの、実際の制作過程を紹介します。

タイルセットは上層と下層で分かれており、Aは地面や壁などの下層～中層のタイル、Bは木や柱などの地形の上に置く上層のタイルになります。

タイルセットB

基本的なドット絵の制作工程としては以下になります。
今回は改めて記事用に書き起こしましたのでそちらを参考に進めさせていただきます。

1.　ドットで大まかに形を描く

2.　レイヤーを用いて、アウトラインや影、ハイライトなど陰影を描く
（各レイヤー最大2つまでとしてください。加算乗算仕様可）

3.　ディテール追加。
テクスチャ、グラデーション、レイヤー効果など使用してクオリティを出す

4.　仕上げ

こちらについて、これから1工程ずつご紹介していきます。

1.　ドットで大まかに形を描く

単色でシルエットを描きます。
テクスチャを載せる時分けたいので葉と幹は分けて描画します。

今回はベタ塗りレイヤーを使っています。
ベタ塗りレイヤーは単色塗りでマスクから白黒で描画することが出来るレイヤーです。

珍しい描き方かと思いますが、後から色を変更しやすいのと、白黒の反転で描画と消すを切り替えるのが容易だからです。
もちろん通常レイヤーで描いても問題ありません。
こちらの描画方法は参考程度に収めてください。

ドットで大まかに形を描く

2.　レイヤーを用いて、アウトラインや影、ハイライトなど陰影を描く

光と影を描画します。
今回は明るい色と影１色ですが、必要とあれば適宜レイヤー分けて光や影を追加します。
光と影はあまり多く入れるとボヤける為、2段階くらいまでにしてください。

アウトラインや影、ハイライトなど陰影を描く

3.　ディテール追加

テクスチャ、グラデーション、レイヤー効果などを使用してクオリティを出す工程です。
ここでは木の葉と幹にレイヤー効果を追加してディテールをあげます。

　　テクスチャ　→　パターンオーバーレイ
　　フチ取り　→　光彩（内側）

パターンオーバーレイで使用しているテクスチャはPhotoshopに既存で入っているものです。

今回は葉と幹に対してレイヤー効果は２つだけですが、必要とあればいくつかグラデーションを掛けたり他のレイヤー効果を追加します。
なじむように調整します。

ディテール追加

4.　仕上げ

根っこの所に草を少し足したりして仕上げです。

仕上げ

終わりに

いかがでしたでしょうか。
ドット絵で全て描こうとすると敷居が高く感じるかもしれませんが、レイヤー効果やテクスチャを使用することで一律でクオリティを上げることが出来、作業効率も上がるかと思います。

「住みたい街タイルセット」から始まり、現在その関連シリーズと合わせて合計５本リリースしています。

他に販売されているタイルセットと違うところは、昼の街並みだけでなく、夕方、夜と３段階の時間変化をタイルセットで表現しているところです。

是非購入して、細部をご確認いただけますと幸いです。

『住みたい街』シリーズ