ゲーム開発

タイルマップの作り方|RPGマップチップ制作入門

更新: 高橋 ドット
ゲーム開発

タイルマップの作り方|RPGマップチップ制作入門

RPG向けのタイルマップは、なんとなく描き始めるより、最初に規格を決めて最小セットを作ったほうが完成まで一直線で進めます。この記事では、2Dゲームで使うタイルマップに絞って、16x16と32x32の選び方から、地面・道・壁・建物・装飾を自作するための1px単位の考え方、

RPG向けのタイルマップは、なんとなく描き始めるより、最初に規格を決めて最小セットを作ったほうが完成まで一直線で進めます。
この記事では、2Dゲームで使うタイルマップに絞って、16x16と32x32の選び方から、地面・道・壁・建物・装飾を自作するための1px単位の考え方、さらにAsepriteとUnityへ持ち込む実装までをまとめて追えるようにしました。

とくに、初めて自作タイルに挑戦する人や、絵は描けてもゲーム実装で止まりがちな人には、この順番が効きます。
制作現場では、学習用に4x4〜8x8の最小タイルセットを先に完成させてからツール実装へ進めると、破綻の発見と修正を短い周期で回せるので、遠回りに見えて作業全体が締まります。

UnityのTile PaletteTilemap Collider 2DTilemap RendererSprite Atlasまで押さえれば、見た目だけの素材集で終わらず、そのまま歩けるRPGマップとして組み上げられます。
タイルマップは小さな絵を並べる技法ですが、仕上がりを決めるのは絵心だけではなく、規格と検証の順番です。

タイルマップとマップチップの基本

用語の整理

タイルマップは、グリッド上に小さな画像を敷き詰めて、2Dの地形や町、ダンジョンを組み立てる手法です。
1枚の巨大な背景絵を置くのではなく、同じ規格で切られた小片を並べて全体を作るので、設計の中心は「絵を描くこと」だけでなく「どう再利用できる形に分けるか」に移ります。

マップチップと呼びます。
タイルという言い方でも意味はほぼ同じで、RPG制作の文脈では昔からマップチップという呼び名がよく使われてきました。
たとえば草地1枚、土の道1枚、壁の角1枚、屋根の端1枚といった単位です。
これらをグリッドに沿って並べることで、村や城下町のようなマップを構成します。

制作の現場では、まず最小セットが成立しているかを小さな面積で確かめます。
私は最初から大きな町を組まず、3x3や5x5の小区画で試し貼りして、継ぎ目が不自然に見えないか、模様の周期が早く見破られないかを先に見ます。
草の模様や石畳の並びは、単体では良く見えても、9枚や25枚に増やした瞬間に反復が露骨に出ることがあるからです。
この確認を先に挟むと、あとでマップ全体を作り直す手間が減ります。

Unityで扱う場合、タイルマップはGridの上にTilemapを載せる形で管理します。
ひとつのGridに対して複数のTilemapを持てるので、地面、壁、装飾、当たり判定の情報を分けて積み上げる設計が取りやすくなります。
配置作業はTile Paletteを使うのが基本で、矩形だけでなくアイソメトリックやヘックスのレイアウトも扱えますが、この記事で前提にするのはRPG向けの矩形グリッドです。

読者がここで持っておきたい完成イメージは明快です。
16x16または32x32の規格をひとつ決め、地面、道、壁、建物、装飾という最小セットだけで、小さな村マップを破綻なく組める状態です。
これらのサイズは多くのゲーム制作でよく使われる慣例的な選択肢にすぎず、最終的には取り込み先のエンジンやツールの仕様(セルサイズや並び、余白ルール)に合わせて調整する必要がある点に注意してください。
家を何軒か置き、道を曲げ、柵や木箱を足して、歩ける場所と入れない場所を見た目どおりに整理できれば、タイルマップの基礎はすでに機能しています。

ゲーム用タイルマップの利点

ゲーム用タイルマップの強みは、同じ絵を繰り返し使う前提で設計できる点にあります。
大きな1枚絵の背景を持たず、必要な部分だけを小さなタイルとして保存して再利用するので、メモリ消費を抑えやすく、描画面でも整理された構造を保てます。
2Dゲーム向けのワークフローでタイルマップが長く使われてきた理由は、見た目の統一だけでなく、この再利用効率にあります。

たとえば村マップを1枚絵で描くと、道の曲がり方を変えたい、家を1軒増やしたい、壁の高さを1段だけ下げたいといった修正が起きるたびに、広い範囲を描き直すことになります。
タイルマップなら、地面タイルと道タイル、壁タイルの組み合わせを差し替えるだけで済みます。
制作中の試行錯誤に耐える構造になっているわけです。

この利点を活かすには、絵の描き方も再利用前提に切り替える必要があります。
1枚ごとに完成イラストとして描き込むのではなく、隣り合ったときに自然につながる面、角、端、境界として設計します。
草地なら「中央の見栄え」より「四辺がつながること」が先です。
壁なら「1枚のかっこよさ」より「縦に積んだときと角で折れたときに破綻しないこと」が先になります。
タイルは小さな完成品というより、接続ルールを持った部品です。

Unityでの実装面でも、タイルベースの構成は扱いやすい形に落とし込みやすくなります。
Tilemap Rendererでまとまりとして描画でき、スプライトをSprite Atlasにまとめる設計とも相性がよく、マップ規模が大きくなるほど恩恵が出ます。
さらに、歩行不可の壁や柵はTilemap Collider 2Dで管理できるので、見た目と当たり判定を同じグリッド基準で組み上げられます。
絵と実装の座標系が揃うため、あとで調整するときに迷いが減ります。

規格選びの段階では、16x16は情報量を絞ったレトロRPG向き、32x32は装飾や立体感を少し増やしたいときに向きます。
学習の入口としては、16x16のほうがタイル同士の接続を理解しやすく、32x32は影や素材感を乗せる余地が広がります。
どちらを選んでも、地面、道、壁、建物、装飾の最小セットで村が組めることを先に達成したほうが、以後の追加制作が安定します。

Web地図タイルとの違い

ここで切り分けておきたいのが、ゲームのタイルマップとWeb地図の地図タイルは別物だという点です。
どちらも「小さな区画を並べて全体を作る」という意味では似ていますが、目的も扱い方も異なります。
検索するとGISや地図配信の情報が多く混ざるものの、この記事で扱うのは2Dゲーム用のタイルマップだけです。

ゲーム用タイルマップは、プレイヤーが歩く床、ぶつかる壁、建物の前後関係、装飾の重なりといった、遊びのルールまで含めて設計します。
見た目の部品であると同時に、当たり判定やレイヤー構造の基準でもあります。
UnityでGridと複数のTilemapを分けて使うのはそのためで、地面と装飾を別レイヤーにしたり、コリジョン専用の層を分離したりできます。

一方でWeb地図タイルは、地理情報をズーム段階ごとに配信・表示するための仕組みです。
道路や地形を画像またはデータとして区切って表示する考え方で、ゲームの村マップを自作するためのマップチップ設計とは直結しません。
ゲーム制作の文脈で欲しい知識は、草地の継ぎ目をどう作るか、壁の角を何枚で成立させるか、1タイル単位の判定をどう持たせるか、といった話です。

この区別を最初に意識しておくと、学ぶ対象がぶれません。
タイルマップという言葉に引っ張られて地図配信の仕組みを追いかけるより、ゲーム画面の中で何を1枚のタイルとして切り出すか、どの部品を再利用の核にするかに集中したほうが、村マップを完成させるまでの距離は短くなります。
ここから先は、そのゲーム用タイルマップを前提に、実際の規格と絵作りへ進めていきます。

最初に決める規格:16x16か32x32か

16x16の見え方・情報量・作業難度

16x16は、タイルマップ制作の入口として扱いやすい規格です。
1枚の中に置ける情報が少ないぶん、草・土・石・壁といった要素を記号として整理する発想が身につきます。
レトロRPG風の画面に寄せたいときとも相性がよく、面の質感よりも「これは草地」「これは通路」「これは壁の角」と一目で読めることを優先できます。

この規格では、1pxの線と1pxの影がそのまま読解性に効きます。
実際に16x16で量産していると、輪郭の太さが1pxで揃っているかどうかだけで、隣のタイルとの境界の見え方が変わります。
ここがぶれると、石畳の端なのか段差なのか、ただの模様なのかが曖昧になります。
私自身、16x16では描き込み量よりも、輪郭を1pxで保ちながら「何の面か」を即読できる状態にしたほうが、マップに敷いたときの完成度が上がる感触があります。

1タイルの中に入れる情報量も、意識的に絞ったほうがまとまります。
16x16なら、影は1px幅で十分です。
地面のテクスチャは2色を軸にして、必要なら1pxのノイズを少量足すくらいで止めると、連続配置したときに面として落ち着きます。
逆に、小石、ひび、草の葉脈、土の粒を全部入れようとすると、1枚では成立しても、並べた瞬間にちらついた面になります。

作業難度が低めなのは、描く量が少ないからだけではありません。
破綻の原因が見つけやすいからです。
4x4〜8x8枚の最小セットを先に作って、15x15程度の小マップに敷いてみると、どのタイルが読みにくいか、どの継ぎ目が浮くかがすぐ見えます。
学習段階では、この短い検証サイクルが効きます。

32x32の見え方・情報量・作業難度

32x32は、16x16よりも一段広い表現領域を持てます。
床材の差、壁の厚み、屋根の段差、木箱や柵の立体感などを入れ込みやすく、見た目を現代寄りの2D RPGに近づけたいときに向きます。
単なる記号ではなく、素材感や陰影で説得力を出せるのが強みです。

このサイズになると、影の扱いも少し変わります。
16x16では1pxの影が骨格になりますが、32x32では2px幅の陰影が効く場面が増えます。
段差の落ち影、壁際の暗がり、屋根の厚みなどは、2pxぶん確保したほうが面として安定します。
実制作でも、32x32で1pxだけの影にすると線っぽさが勝ちやすく、立体より輪郭の強さが先に見えてしまいます。
2px幅で影を置くと、奥行きとして読まれやすくなります。

1タイル内の情報量の目安も、16x16より少し増やせます。
影は2px幅、必要に応じて軽いハイライトを入れると、床や壁の材質差を出しやすくなります。
模様は2〜3px周期くらいにすると暴れにくく、石畳や板張りのリズムも整います。
ただし、描けるからといって情報を詰め込むと、今度はタイル間の整合が崩れます。
左端だけ模様が濃い、上辺だけ光源が違う、角タイルだけ石のサイズ感が変わる、といったズレが起きるのは32x32の典型です。

作業難度が上がるのはここです。
1枚ごとの完成度を上げやすい反面、隣り合ったときの陰影、模様の周期、輪郭の段差まで揃える必要があります。
制作中は「単体で映えるか」より「敷き詰めても面として続くか」の比重が大きくなります。
32x32を選ぶなら、最初から大きい町を作るより、4x4〜8x8枚の最小セットで床・道・壁・角だけ先に通し、15x15程度の小マップで接続を検証する進め方のほうが崩れにくくなります。

OrthogonalかIsometricかの選択

タイルの規格を決める段階では、1枚のサイズだけでなく、グリッドの見せ方も一緒に決めます。
Unityのタイルマップは正方グリッドのOrthogonalだけでなく、Isometricにも対応していますが、両者は絵作りの考え方が違います。

Orthogonalは、真上から見下ろしたような正方グリッドです。
床は四角く並び、上下左右の接続をそのまま考えればよいので、道の曲がり、壁の端、建物の入口も整理しやすい構造になります。
RPGの町やダンジョンを初めて自作するなら、こちらのほうが設計が素直です。
タイル1枚の中で考えるべきことが、接続と読解性に集中するからです。

Isometricは、斜め見下ろしの立体感を出せる反面、高さ・前後関係・当たり判定の見え方まで同時に扱う必要があります。
床のひし形表現、壁面の見せ方、オブジェクトがどのマスに属するかといった整理が増えるため、タイル単体の絵が描けてもマップ全体では迷いやすくなります。
立体感は魅力ですが、制作前の設計判断としては難度が一段上がります。

そのため、最初の一式を組む段階ではOrthogonalを基準にしたほうが、タイル接続の基本が身につきます。
16x16でも32x32でも、この判断は変わりません。
まず正方グリッドで地面、道、壁、建物を破綻なくつなげられる状態を作り、そのあとでアイソメの見せ方に進むほうが順序として自然です。

エンジン側グリッド設定

制作前に決めた16x16か32x32かの規格は、絵の中だけで完結させず、エンジン側のグリッド設定と一致させます。
ここがずれると、タイルは描けているのに配置した瞬間にサイズ感が合わず、マップ全体の修正が増えます。
タイルマップはグリッド上に小さな画像を並べて構成する仕組みなので、1タイル=16x16または32x32という基準を最初から統一しておく必要があります。

Unityでは、Pixels Per Unit(PPU)はスプライトの表示スケールに影響します。
実務上の慣例として、タイル1枚を1 Unity unit として扱いたい場合はタイルサイズに合わせて PPU(例: 16 や 32)をプロジェクト内で統一する運用がよく使われます。
Unity 自体が特定の値を公式に必須または推奨しているわけではないため、最終的にはプロジェクト基準として値を統一することを推奨します。
詳細は Unity の公式ドキュメントを参照してください:

スプライトの取り込み時は、Texture TypeをSprite (2D and UI)にし、タイルシートならSprite ModeをMultipleにして、Sprite EditorのGrid By Cell Sizeで16または32に切ります。
ドット絵をそのまま出すならFilter ModeはPoint、圧縮は使わずに持ち込む構成が噛み合います。
こうしておくと、描いたピクセルの輪郭がそのままマップに反映されます。

カメラ側も規格に連動します。
たとえば縦720pxを基準に32x32タイルを等倍で見せる設計なら、orthographicSizeは11.25になります。
こういう基準値が先に決まっていると、1マス移動、1タイル分の段差、壁1枚ぶんの厚みが画面上で素直に読めます。
グリッド、PPU、カメラがひとつの規格に揃っている状態こそ、タイル制作の土台です。

ℹ️ Note

練習用の最初の実装は、15x15程度の小マップに地面・道・壁・装飾を置ける最小構成で十分です。4x4〜8x8枚のセットを先にUnityへ通すと、絵の修正と実装確認が短い周期で回り、規格のズレも早い段階で見つかります。

RPGマップチップの最小構成を作る手順

最初のセットは、1枚ごとの見栄えより「並べたときに破綻しないか」を軸に進めると完成まで止まりません。
練習用なら4x4〜8x8タイル程度の小さな束で十分です。
ベースとして無限に繰り返すタイルと、曲がり角や境界だけを担う差分タイルを分けて考えると、あとから枚数が増えても整理が崩れません。
私はこの段階で、先に角タイルを4方向ぶん揃えてから直線、T字、十字を足す流れにしています。
接続の難所を先に固めておくと、その後に道や壁の分岐を増やしても、どこで絵が噛み合っていないかがすぐ見えるからです。

ステップ1: 地面

最初に作るのは、どのマップでも土台になる地面の基本タイルです。
ここは共通化する1枚として設計します。
差分を増やすのはまだ後でよく、まずは1枚だけで敷き詰めても継ぎ目が出ないことを優先します。

地面はベース色と影色の2色を主軸にすると、情報量を抑えたまま面の表情を作れます。
4x4や8x8の小さいタイルなら、1px単位のチェッカーか、散らした1pxノイズだけでも十分に地面らしく見えます。
たとえば茶色のベースを全面に置き、影色を1pxずつ斜めに散らす形です。
このとき、上端のピクセル列と下端のピクセル列は同一にします。
左端と右端の列も同一です。
つまり、タイルの最上段に置いた1pxの模様は最下段にも同じ並びで置き、最左列の1px配置は最右列にも同じように置きます。
これで四辺がぴったり接続され、横にも縦にも無限に敷けます。

8x8タイルなら、たとえば1行目と8行目を同じパターン、1列目と8列目を同じパターンに固定し、内側の2〜7行目・2〜7列目だけで少し変化を付けると安定します。
中央付近にだけ1pxノイズを増やし、端は揃える考え方です。
共通化する範囲は四辺、差分にする範囲は内側です。
後で草付き地面や石混じり地面を増やすなら、この基本地面を複製して中央の数ピクセルだけ変えると管理しやすくなります。

図版のalt textを書くなら、「地面タイル—茶2色の1pxチェッカー、四辺が同一」のように、見えている要素をそのまま言葉にすると伝わります。

ステップ2: 道

地面が1枚で成立したら、その上に道を作ります。
道は地面を共通ベースとして使い、境界だけを差分タイル化すると最小構成で回せます。
道そのものを全面描き換えるより、地面の上に「ここからここまでが道」と読める輪郭を置く発想です。

最小構成として揃えたいのは、横直線、縦直線、角4方向、T字4方向、十字です。
道の内部は地面より明るい1〜2色で埋め、境界には1pxの濃色を置いて輪郭を作ります。
この1px縁取りは、上辺だけ太い、左辺だけ薄いというズレが出ると接続が途切れて見えるので、四辺とも同じ太さ、同じ色で統一します。

たとえば8x8タイルで横道を作るなら、2〜3行目を上側の縁取り1px、4〜6行目を道の内部、7行目を下側の縁取り1pxとし、1行目と8行目には地面を残します。
縦道なら同じ考え方を列方向に置き換えます。
角タイルでは、上側の縁取りと右側の縁取りが1マス内で接続するように1pxずつ折り曲げます。
T字は3方向へ開くぶん、閉じる側だけ地面に戻します。
十字は中央で4方向が同じ幅になるよう、内部の明色を十字型に通します。

ここで共通化するのは、道の内部色と1px縁取りのルールです。
差分にするのは、どの辺に道が抜けるかという接続形だけです。
命名もこの時点で付けておくと後で迷いません。
たとえば road-straight-hroad-corner-neroad-t-sroad-cross のように、役割と向きを分けておくと整理が利きます。

ステップ3: 壁

次は壁です。
ここでは建物の外壁そのものではなく、地形の段差や石壁のような繰り返し可能な垂直面として作ると扱いやすくなります。
壁もまずは共通タイルを1枚作り、端部は後から差分に分けます。

壁の厚みは、上端1pxの明色と下端1pxの影色で出します。
上端にはリムライトとして明るい線を1px入れ、下端の接地側には暗い1pxを置きます。
これだけで、平たい模様ではなく「上に面があり、下へ落ちる壁」に見えます。
4x4でも8x8でも成立する方法ですが、8x8なら中央に1pxの石目や縦筋を少し入れると素材感が出ます。

縦方向につながる壁では、上下端の列を反転させず同一配置に保つのがコツです。
上のタイルの最下段と、下のタイルの最上段が違う並びだと、積み上げた瞬間に継ぎ目が見えます。
たとえば最上段に「明色1px、ベース色7px」の並びを置いたなら、最下段にも同じルールを持たせます。
左右方向にも繰り返す予定なら、左右端の列も地面と同じく一致させます。

共通化するのは壁面の模様、上端1pxの明色、下端1pxの影色です。
差分にするのは、壁の終端、崖の切れ目、角との接続です。
ここを最初から1枚に押し込めると、どのケースのための絵なのか判別しにくくなります。

図版のalt textなら、「外壁タイル—上端1pxハイライト、下端1px影」と書くと、何を見ればいいかがすぐ伝わります。

ステップ4: 角タイル

角タイルは、最小セットの中で一番先に形を確定させたい部分です。
内角と外角を4方向ずつ用意すると、その後に直線や分岐を増やしても接続ルールが崩れません。
実際、角を後回しにすると、直線では成立していた境界が曲がった瞬間に破綻して、結局ほぼ描き直しになります。

斜め境界は、1pxを斜線で置くより1-2-1の階段で組むと段差感が弱まり、目に馴染みます。
たとえば8x8で右上へ抜ける外角なら、1行目に1px、2行目に2px、3行目に1pxというリズムで明色や境界線を置き、残りを壁面か地面に戻します。
内角なら逆に、影色を角の内側へ1px食い込ませます。
外角では明色を外へ1px食い込ませると、角の丸まりが自然に見えます。

たとえば北東の内角なら、右上のコーナー付近で暗色を1px内側に入れ、上辺の明るさがそのまま角で止まらないようにします。
南西の外角なら、左下へ向かって1-2-1の段を切り、外側だけ少し明るくして輪郭を立てます。
1px単位で見ると細かい差ですが、実際にマップへ並べると境界の硬さが減って見えます。

共通化するのは、角でも直線でも使う縁色、ハイライト色、影色です。
差分にするのは、内角か外角か、どの方向を向くかです。
命名も wall-corner-newall-inner-sw のように方向込みで分けると、あとでタイル数が増えても迷いません。

ステップ5: 建物外壁

ここからは建物用の外壁です。
先ほどの壁が段差や石壁なら、こちらは家や店の側面に使う壁です。
考え方は同じで、共通の繰り返し面と、開口部の差分を分けるのが基本です。

先に小周期のパターンを決めます。
レンガなら縦目地2px周期、横目地2px周期、板壁なら2pxごとに明暗を揺らす、といった具合です。
周期を先に固定すると、どのタイルを増やしても壁材のリズムが揃います。
左右端の列は一致させ、横方向へ無限にタイルできるようにします。
8x8タイルなら、1列目と8列目の目地位置を同じにし、2〜7列目の中でレンガのずらしを作ると横に並べたときの継ぎ目が消えます。

ここで窓や扉を外壁と一体化して描くと、壁を増やすたびに開口部付きのバリエーションも増えて管理が重くなります。
そこで、共通外壁は「窓も扉もない壁面」として1枚または少数に絞り、窓・扉は別レイヤーに置く差分タイルとして切り出します。
RPGツクールMZやRPGツクールMVでもPNGタイルをレイヤー運用で分ける考え方と相性がよく、Unityでもタイルマップを分けると整理しやすくなります。
絵の段階から分離しておくと、あとで配置の自由度が落ちません。

1px単位の見せ方としては、上端に外光を受ける1pxの明るい帯、窓枠には左右1pxの濃色、窓ガラスには中央寄りに1pxの反射を置くと、少ない情報でも建物として読めます。
ただし、窓そのものは共通壁に埋め込まず差分タイル側に回します。

ステップ6: 屋根

屋根は、建物外壁と同じくらい「共通化」と「差分」の切り分けが効く部分です。
瓦でも板屋根でも、まずは模様の流れる方向を統一します。
横方向に流すのか、縦方向に流すのかが途中で混ざると、同じ建物のはずなのに面ごとの素材感が変わって見えます。

最小構成では、屋根の基本面、棟タイル、軒タイルを分けます。
基本面は繰り返し用の1枚です。
棟は屋根の頂部で、1pxのハイライトを入れて山の線を見せます。
軒は壁にかぶさる下端で、軒下に1pxの影を置いて壁との段差をはっきり出します。
この1px影がないと、屋根と壁が同じ平面に貼り付いて見えます。

斜めに落ちる屋根の端部は、角タイルと同じく1-2-1の階段で処理します。
たとえば右下へ落ちる端なら、濃色の輪郭を1px、2px、1pxの幅でずらし、その内側に屋根のベース色を詰めます。
瓦の線もその階段に合わせて止めると、端だけ浮いた印象になりません。
8x8タイルなら、棟は中央1列または2列を明るくし、左右へ1pxずつ暗く落としていくと高さが読めます。

共通化するのは、瓦や板目の周期、基本色、影の向きです。
差分にするのは棟、軒、角、端部です。
命名も roof-baseroof-ridgeroof-eave-s のように分けると、建物を増やしたときに再利用しやすくなります。

ステップ7: 装飾

装飾は仕上げですが、地面や建物のタイルと同じレイヤーに焼き込まず、前景または装飾レイヤー用の独立タイルとして持たせるのが基本です。
草花、石、看板、樽のような要素を別管理にすると、地面1枚の汎用性を保ったまま見た目だけ変えられます。

接地感を出すには、装飾の右下に1pxの影を置く方法が扱いやすいのが利点です。
たとえば小石なら、灰色の本体を2〜3px置き、その右下に暗い1pxを添えます。
看板なら支柱の足元の右下に1px影を置くと、地面から少し立ち上がって見えます。
影が本体の真下ではなく右下に寄ることで、地面の模様と混ざり切らず、独立した物体として読めます。

装飾は数を増やせば豊かになるわけではありません。
2〜3タイルに1枚程度の密度に抑えると、繰り返しの周期が見えにくくなります。
すべてのマスに草や石を置くと、今度は地面の基本パターンが見えず、どこが共通タイルでどこが差分なのかも曖昧になります。
最小セットでは、草1種、石1種、看板1種くらいでも十分です。

この段階でタイルセット全体を見ると、共通化するべきものは地面、外壁、屋根のベース面で、差分にするべきものは道の接続、壁の端と角、窓や扉、棟や軒、装飾物です。
ベースを1枚で繰り返せる設計にしておくと、マップの面積が広がっても増えるのは差分だけで済みます。
図版のalt textも、「道タイル—縁1px濃色、内部明色で横直線」のように、境界、色、向きを具体語で書くと情報が伝わります。

繰り返しても破綻しないタイルの描き方

シーム(継ぎ目)を消すコツ

タイル制作で最初に崩れやすいのは、1枚で見たときではなく、並べた瞬間に出る継ぎ目です。
地面でも壁でも、四辺のつながりが取れていないと、マップ上で縫い目のような線が走ります。
基本は単純で、上下端の画素列、左右端の画素列をそれぞれ一致させます。
端の色と形がつながっていれば、横にも縦にも繰り返せます。

ただ、端の1pxだけをぴったり合わせても、まだ破綻することがあります。
原因は端列そのものより、端に寄った強いコントラストです。
端の1pxにだけ濃色や明色が偏ると、並べたときにそこで線が立ちます。
そこで私は、端から2px目に中間色を1px置いて、端と内部の差をならす形をよく使います。
輪郭をぼかすのではなく、エッジコントラストを均す感覚です。
これだけで、継ぎ目の黒線や白線が目立たなくなります。

制作中の確認方法も、完成後にまとめて見るより、その場で潰したほうが早いです。
実務では端列を複製して反対側に貼り付ける“オフセット確認”をルーチンにしています。
左端の列を右側へ、上端の列を下側へ仮置きすると、作業途中でもシームの発生がすぐ見えます。
1枚表示では気づかなかった色段差が、この確認で一発で出ます。
描いて、ずらして、試し貼りする流れを何度も回すと、後戻りが減ります。

1枚だけ眺めて判断せず、3x3以上で試し貼りするのも欠かせません。
中央のタイルだけでなく、上下左右と斜め方向まで同時に見えるので、継ぎ目の線、色の段差、模様のつながり方が露出します。
とくに地面タイルは、単体では自然でも、9枚並ぶと十字の交点だけ不自然になることがあります。
そこで初めて、四辺だけでなく四隅の印象まで揃える必要が見えてきます。

境界タイルでも同じ考え方が効きます。
地面と道、壁と床のように異なる素材が接する場所では、境界に中間色の1px緩衝帯を入れると、急な切り替わりが和らぎます。
さらに双方の模様を1pxずつ食い合わせると、別素材なのに浮かずにつながります。
境界タイルは「線で分ける」より、「両方の面が少しだけ入り込む」と考えたほうが自然です。

パターン周期とノイズ量の制御

繰り返しタイルが人工物っぽく見える原因の多くは、周期が見えすぎることです。
とくに1枚の中で模様を細かく入れすぎると、タイル自体はにぎやかなのに、マップ全体では同じ塊が等間隔で並んで見えます。
ここでは、2タイル、3タイル、4タイル周期で敷き詰められる状況を先に想定しておくと安定します。
1枚の中の模様も、2pxや3px単位の短い反復に抑えておくと、広い面にしたときに破綻しません。

典型的に避けたいのが、完全なチェッカーボードです。
明暗が交互に並ぶ配置は1枚では整って見えますが、横にも縦にも続けると規則が強すぎて、床というより記号になります。
そこで、2x1や1x2の短いラインを混ぜて、連続方向を少し崩します。
明るい点と暗い点を均等に散らすより、短い線や塊を交ぜたほうが、石畳や土のムラとして読めます。

ノイズ量も絞ったほうがタイル運用では強いです。
色数は2〜3色に留め、境界付近のノイズを減らすと、面としての読み取りが安定します。
ベースと影の面積比はおおむね7:3くらいにすると、暗く沈みすぎず、明るすぎて平坦にもなりません。
初心者ほど「単調に見えるのが怖い」と感じて粒を足しがちですが、広い面積に敷く前提では、その粒がそのまま周期の印になります。
1枚の情報量より、並んだときの静けさを優先したほうが成功率が上がります。

角タイルと境界タイルを作るときも、この周期感を壊しすぎないことが必要です。
直線タイルだけ模様のリズムが整っていて、角に入った瞬間に模様密度が変わると、曲がり角だけ別素材に見えます。
角は形状の差分であって、材質の差分ではありません。
地面の粒、壁の目地、屋根の筋といったベースの周期を保ったまま、進行方向だけを変える発想で組むと、タイルセット全体のまとまりが出ます。

斜め線と角タイルのジャギ対策

タイルで斜めを描くときは、線を滑らかに見せようとして中途半端な階段を置くより、規則を決めたほうが崩れません。
45度近似なら、1-2-1のステップ配置を基本にすると、限られたピクセル数でも角度が安定します。
1px進む、2px進む、1px進むという階段を繰り返すと、輪郭が暴れず、屋根端や石壁の斜面が読み取りやすくなります。

ここで厄介なのが角タイルです。
直線タイルの斜め処理をそのまま角へ持ち込むと、内角と外角でジャギの見え方が変わります。
外側の角は輪郭が張り出すのでギザつきが強く見え、内側の角は暗部が詰まって潰れやすくなります。
そこで、内側と外側で段差を1pxずらします。
外角では輪郭の折れを少し内側へ寄せ、内角では影の折れを少し逃がすと、両方の角度感が揃います。

境界タイルの設計でも、この1pxのずらしは効きます。
道が曲がる角、壁際の床、草地から土道への切り替えなどでは、境界線をきっちり同じ段で折ると、角だけ硬く見えます。
片側の素材を1px食い込ませ、中間色をその外側に入れると、ジャギが輪郭線ではなく質感の差として読まれます。
角タイルと境界タイルは別物に見えて、実際には同じ問題を扱っています。
どちらも「線を描く」のではなく、「面の境目をどう見せるか」です。

私自身、角だけ違和感が消えないときは、直線タイルの出来を疑うより先に、角専用の段差位置を見直します。
角は直線の延長ではありますが、視線が集中する場所でもあります。
だからこそ、直線のルールをそのまま当てはめるのではなく、角でだけ1pxずらす設計を最初から持っておくと、後の修正が少なく済みます。

光源と影方向の統一

タイルセット全体を並べたときの違和感は、色よりも光源の不一致で出ることがあります。
地面は左上から光が当たっているのに、壁だけ右上、屋根だけ真上という状態になると、1枚ごとの完成度が高くてもマップ全体が落ち着きません。
RPG向けの俯瞰タイルでは、光源を左上に固定し、右下に1pxの接地影を置くと統一が取りやすくなります。

このルールは地面だけでなく、壁や屋根にもそのまま通します。
壁の出っ張りなら右側と下側を1px深く、屋根の軒なら壁にかかる下側へ影を落とす、といった具合です。
面の向きによって1pxと2pxの差をつけると、同じ左上光源でも素材の高さが読めます。
たとえば屋根の棟や壁の柱は2pxぶん暗部を確保し、床の段差や小物の接地は1pxに留めると、奥行きの階層が整理されます。

装飾物でも方向がぶれると、タイル面の統一感が崩れます。
石、草、看板、樽のような小物はサイズが小さいぶん、影方向の情報が見た目を支配します。
右下に1pxの接地影というルールを共通化しておくと、別タイル同士でも同じ世界の物体として並びます。
逆に、ある小物だけ真下影にすると、その1枚だけ照明条件が違って見えます。

明暗方向の統一は、境界タイルの説得力にも直結します。
壁と床の境界、地面と道の境界で、どちらの素材も同じ左上光源で描かれていれば、中間色の1px緩衝帯も自然に見えます。
片方だけ反対向きの明暗だと、境界色をどれだけ丁寧に置いても、素材が噛み合いません。
繰り返しに強いタイルは、四辺のつながりだけでなく、光の向きまで四方で矛盾しない状態で成立します。

レイヤー設計と当たり判定の考え方

基本レイヤー構成

RPG向けのタイルマップは、見た目の完成度だけで組むより、最初から実装単位でレイヤーを分けておくほうが後で破綻しません。
私が基準として置くのは、床・壁・前景・装飾・コリジョンの5層です。
絵としての役割と、プレイヤーが通れるかどうかというゲーム上の役割を分離すると、修正のたびにマップ全体を触り直す事態を避けられます。

床レイヤーには、地面、石畳、土道、室内の床板のように「そのマスの基準面になるもの」を置きます。
ここはマップの土台で、歩行可能領域の視覚的なベースでもあります。
壁レイヤーには、崖、家の壁、柵、樹木の幹、柱のような構造物を置きます。
地面の上に高さを持って立つものをここへ集めると、どこが遮蔽物なのかが整理されます。

前景レイヤーは、プレイヤーの頭上にかぶさる表現を担当します。
たとえば木を1枚絵で置くと、キャラクターが木の前にいるのか後ろにいるのかが曖昧になります。
そこで、木の幹は壁レイヤー側に置き、葉だけを前景レイヤーに分けると、幹の前を歩いているのに葉は頭上にかかる、というRPGらしい前後関係が自然に作れます。
茂みの上端、橋の屋根、アーチの天井でも同じ考え方がそのまま使えます。

装飾レイヤーには、草花、看板、樽、小石、室内の小物のような、地形の骨格ではない要素を置きます。
装飾は置き換えや削除が多いので、床や壁と混ぜないほうが調整が軽く済みます。
草の色味だけ差し替えたい、看板の位置を1マスずらしたい、といった修正が地面や建物に影響しない構成にしておくと、量産段階で効いてきます。

コリジョンレイヤーは見た目のためではなく、歩行可能と歩行不可を決めるための層です。
ここを描画レイヤーと同一視すると、見た目を直しただけで当たり判定まで変わる事故が起きます。
逆に、コリジョンを独立させておけば、絵はそのままで通行ルールだけ直せます。
壁、水面、建物の内部、崖の外側のような不可領域は、コリジョン側で同じ形に塗り、描画側は見た目の表現だけに集中させるのが安定します。

歩行可能と歩行不可を分けて考えると、装飾の扱いも決めやすくなります。
たとえば花壇の花は見た目としては盛り上がって見えても、プレイヤーを止めない演出にするなら装飾レイヤーだけに置き、コリジョンは置きません。
逆に大岩や井戸のように視覚的にも物理的にも障害物であるものは、壁か装飾に描画しつつ、コリジョン側にも対応する形を置きます。
この分離があると、マップを眺めたときの情報量と、実際の移動ルールを別々に調整できます。

RPG Maker系のA〜D層を理解する

RPGツクールMVやRPGツクールMZ系の運用を理解しておくと、タイルの置き場を決める感覚が身につきます。
細かな仕様差はありますが、考え方としてはA系に床や地面の基礎、B〜D系に建物や装飾、前後関係を持つ要素を振り分けるのが基本です。
RPG向けタイルの整理法として長く使われてきた枠組みなので、自作タイルでもその発想を借りると迷いが減ります。

A系はマップの下地を構成する場所です。
草地、土、砂、床板、水辺の縁のような、面として敷き詰める要素をここに置くと、地形の読み取りが安定します。
A5のように単純な床材を置く発想もこの延長です。
まずAで地面を成立させ、その上に何を載せるかを考えると、マップの骨格がぶれません。

B〜D系は、Aの上に重なる物を担当させると整理しやすくなります。
家の外壁、屋根、机、看板、柵、樽、木、街灯のように、地面の上に存在するものをここへ振るイメージです。
実制作では「これは地面か、地面の上に置く物か」でまず分けると判断が速くなります。
床模様までBに置き始めると、地形修正のたびに上物との重なりが複雑になります。

前景表現も、RPG Maker系のレイヤー感覚で考えると理解しやすくなります。
木の幹を下層側に、葉を上層側に分ける典型パターンはその代表です。
プレイヤーが木の中心付近へ入ったとき、足元は幹の前に見え、頭だけ葉に隠れると、立ち位置が一瞬で伝わります。
1枚の木をそのまま置くより、幹と葉を分けたほうが「キャラクターが空間の中にいる」感覚が出ます。
私は森マップを組むとき、この分割を先に決めておくことで、後から通行設定を詰めても前後関係が崩れないようにしています。

RPG Maker Uniteでも、マップ制作の考え方としてA〜Dの整理は有効です。
床系はA、建物や装飾はB〜Dという分け方を先に意識しておくと、タイルセットを作る段階で「どの素材を何枚用意すべきか」が見えてきます。
RPG向けのマップは、絵の種類を増やすことより、配置先のルールを固定することのほうが効きます。
同じ木、同じ家、同じ看板でも、置き場のルールが揃っているとマップ全体が読みやすくなります。

Unityでの複数Tilemap運用

Unityでタイルマップを扱う場合は、1つのGridの子として複数のTilemapを持たせる一対多の構成が扱いやすいのが利点です。
床用、壁用、前景用、装飾用、コリジョン用をそれぞれ分けると、どの層を描いているのかが常に明確になります。
見た目のレイヤーとゲームルールのレイヤーを同じTilemapに押し込まないことが、実装段階での混乱を防ぐ近道です。

描画用Tilemapとコリジョン専用Tilemapは、分けておく前提で設計したほうが安定します。
描画用は床や壁や装飾を見せるためのもの、コリジョン用は歩行可能か不可かだけを持つもの、と役割を切り分けます。
たとえば水面タイルは見た目としては美しく並べたい一方で、移動ルールとしては一律で侵入不可にしたい場面が多いです。
このとき描画側で水面を表現し、コリジョン側で同じ範囲を塗っておけば、見た目の差分を増やしても通行ルールはぶれません。

壁や建物の内部も同じです。
家の壁を何枚かの装飾付きタイルで描いていても、コリジョン側では単純な不可領域として連続した形にしておいたほうが扱いやすいのが利点です。
見た目では窓があったり凹凸があったりしても、プレイヤーが入れない外壁なら、コリジョンは素直な面で持たせたほうがトラブルが減ります。
描画は情報量を担い、コリジョンはルールを担う、と役割を分ける発想です。

この構成は、後から通行設定を詰めるときにも効きます。
たとえば草花を増やした結果、見た目は密集しているのに通れる場所と通れない場所が混在すると、プレイヤーは迷います。
そこで、通したい草は装飾だけ、止めたい茂みは装飾に加えてコリジョンも置く、という運用にすると視覚とルールが一致します。
歩行可能と歩行不可を描画から独立させておくと、「見えるけれど通れる」「見た目は軽いが止まる」といったズレを意図して管理できます。

💡 Tip

Unityでコリジョン用Tilemapを使うなら、Tilemap Collider 2Dを付け、必要に応じてCompositeCollider2Dと組み合わせると、隣接タイルごとの当たり判定をまとめて扱えます。不可領域を1マスずつ細かく置いても、物理形状を整理した状態で運用できます。

複数Tilemap運用は、制作面でも利点があります。
床だけをロックして装飾だけ調整する、前景だけ非表示にして通路確認をする、といった作業がすぐできます。
自作タイルをAsepriteで組み、実装をUnityに持ち込む流れでも、この分離を守っていると移植が楽です。
AsepriteのTilemap Layerで視覚的なまとまりを作り、Unityではそのまとまりを描画用とコリジョン用に分配する、と考えると、制作と実装の境目で迷いません。

私自身、UnityでRPG風のマップを組むときは、タイル画像を入れた直後から1枚ごとの見た目より先にTilemapの役割名を決めます。
床、壁、前景、装飾、コリジョンが先にあると、タイルを増やしても置き場がぶれません。
逆にここが曖昧なまま描き始めると、同じ木がマップによって壁扱いになったり装飾扱いになったりして、通行ルールまで不統一になります。
レイヤー設計は見た目の整理だけでなく、ゲームとしての一貫性を守るための設計図でもあります。

Unity・Aseprite・RPGツールへ持ち込むときの実務ポイント

AsepriteでのTileset/書き出し

AsepriteでRPG向けタイルを組み始めるなら、通常レイヤーに1枚ずつ並べるより、New Tilemap LayerとTilesetを先に使う流れが実務向きです。
Aseprite のタイル機能は v1.3 系で整備されており、公式ドキュメントも参考になります。

実際の作業では、まず新規ファイルの段階でグリッドをタイルサイズに合わせ、Tilemap Layerを作成してからTilesetを登録します。
草、土、石畳、壁、屋根のような基本セットをここへまとめ、タイル単位で再利用しながらマップの見え方を確認していきます。
Asepriteの中で「繰り返し配置したときのつながり」を見ながら直せるので、単体で見たときは良くても敷き詰めると破綻する、という事故を減らせます。

書き出しでは、完成したタイルをSprite Sheetとしてグリッド基準で切り出せる配置に整えておくのが前提になります。
Unity側でSprite EditorのGrid by Cell Sizeを使うため、タイルの並びはセル境界にぴったり揃っている必要があります。
途中で見栄え優先の余白や不規則な間隔を入れると、インポート後のスライスで手直しが発生します。
制作時点で「あとで機械的に切る」前提を持っておくと、実装工程まで一気につながります。

私自身、Asepriteでは見た目の完成度より先に「書き出した画像をそのままエンジンへ流し込める形か」を見ています。
ここが曖昧だと、絵はできているのに実装で詰まります。
タイル制作はアート作業でありつつ、同時にデータ設計でもあります。

UnityでのインポートとTile Palette運用

Unityへ持ち込んだら、最初にテクスチャのインポート設定を固めます。
タイルシートはTexture TypeをSprite (2D and UI)、Sprite ModeをMultipleにし、Pixels Per Unitはタイルサイズに合わせて16または32へ統一します。
さらにドット絵ならFilter ModeはPoint(no filter)、CompressionはNoneにして、補間と圧縮によるにじみを避けます。
ここで別タイルだけPPUが違う状態を残すと、同じ32x32画像でもシーン上の大きさがずれて、Tilemap運用が崩れます。

スライスはSprite EditorでGrid by Cell Sizeを選び、16x16または32x32で一括分割します。
Aseprite側でグリッドに沿って書き出してあれば、この工程は短時間で済みます。
逆に、1枚ずつ手動で切らないといけない状態だと、修正のたびに作業が増えていきます。

その後はWindow > 2D > Tile Paletteでパレットを作り、分割済みスプライトをドラッグしてTileアセット化します。
マップ配置用の受け皿としてはGameObject > 2D Object > Tilemap > RectangularからGridとTilemapを作成し、床用、壁用、前景用と分けて塗っていく流れが安定します。
前のセクションで触れたレイヤー設計が、そのままここで生きます。

運用面で見逃しにくいのが、Tileアセットを一度作った後の整理方法です。
既存のTileアセットを削除すると、Tile Palette側の参照が切れて置けなくなることがあるので、あとから差し替える前提でもTilesフォルダの構成を先に決めておいたほうが安全です。
名前を変える、場所を移す、不要分をまとめて消す、といった整理は気軽に見えて、制作途中のパレット運用に直結します。

もうひとつ実務で効くのが、PPUをタイルサイズと一致させた後にカメラのOrthographic Sizeも基準解像度に合わせて揃えることです。
たとえば縦720px想定で32pxタイルなら、Sizeは11.25に合わせるとタイル1枚が1 unit基準で並び、ピクセル等倍表示の運用に乗せやすくなります。
私はこの組み合わせを先に決めてからマップを置き始めます。
Filter Modeだけ整えても、カメラ側の縮尺が中途半端だと輪郭が揺れて見えるためです。

⚠️ Warning

Tile PaletteやSprite Editor周りのメニューが見当たらないときは、2D Tilemap Editorの導入状態を確認すると原因を切り分けやすくなります。新しい環境を立ち上げた直後は、ここが未導入のまま止まることがあります。

Tilemap Collider 2DとRendererモード

当たり判定は、描画用Tilemapにそのまま持たせるより、コリジョン専用Tilemapを分けてTilemap Collider 2Dを付ける構成が実務では扱いやすいのが利点です。
見た目の装飾量と通行ルールを切り離せるので、壁の模様を変えたり草花を増やしたりしても、歩ける範囲の管理がぶれません。
視覚上は不要なTilemapであれば、そのTilemap Rendererを無効化して非表示のまま使えます。

この分離は、RPGのマップでとくに効きます。
見た目では段差や影を細かく描いていても、プレイヤーが止まる境界線はもっと単純な形のほうが自然です。
コリジョン側では余計な凹凸を持たせず、ゲームルールとして明快な面を置く感覚です。
必要ならCompositeCollider2Dと組み合わせて、隣接タイルの当たり判定をひとまとまりにする運用も取りやすくなります。

描画側のTilemap Rendererにはモードの選択もあります。
Chunkは描画効率を優先する場面向けで、通常のタイル敷き詰めマップならこちらが基本です。
地形、壁、床のように大量のタイルをまとめて描く用途では、Chunkの相性が良いです。
いっぽうで、Individualは他のSpriteとの前後関係をタイル単位で細かく扱いたい場面に向いています。
たとえばキャラクター、オブジェクト、背の高い草や柵の重なりを1枚ごとに制御したいケースです。

私はまずChunkで組み、前後関係に違和感が出るレイヤーだけIndividualへ切り替えることが多いです。
全部をIndividualに寄せると、タイルマップの強みであるまとまった描画の利点が薄れます。
床と壁はChunk、キャラクターに絡む前景だけIndividual、という分け方にすると、意図がはっきりした構成になります。

Sprite Atlas最適化と注意点

タイル用スプライトはSprite Atlasへまとめておくと、描画コールとメモリ運用の両面で利があります。
とくに地面、壁、装飾、小物が別画像に分散していると、見た目は同じタイルマップでも内部では参照先が増え、管理が散りやすくなります。
タイル系の素材はあとから増えやすいので、Atlas前提で束ねておくと運用が安定します。

Tilemapの利点は、絵を並べる方法そのものにもあります。
Unityの比較事例では、Spriteを個別に大量配置したケースがRAM約1.1GB、Tilemapベースのケースが約21MBという差になっています。
もちろんマップの作り方は作品ごとに違いますが、2D RPGのように同じ絵を繰り返し使う構造では、TilemapとAtlasの組み合わせが効きやすいのは確かです。
見た目の作り方が同じでも、データの持ち方で負担は大きく変わります。

注意したいのは、最適化の前に参照構造を壊さないことです。
タイルの差し替え作業で既存のTileアセットを削除してしまうと、Tile Paletteに登録済みの参照が崩れます。
結果として、パレット上では見えていても塗れない、既存マップ上の参照がMissingになる、といった面倒が起きます。
差し替えは元アセットを維持したまま画像を更新するか、フォルダ構成を固めてからまとめて行うほうが事故が少なくなります。

制作後半ほど「整理のために一度消す」が危険になります。
私はタイル名と保存場所を早い段階で固定し、完成間際に大掃除をしないようにしています。
タイルマップは1枚の画像より参照の網が広いので、片付け方まで実装前提で考えたほうが崩れません。

RPGツールへの持ち込みメモ

RPGツクールMZやRPGツクールMVへ持ち込む場合は、Unity のように自由な Grid 運用へそのまま移せるとは限りません。
ツールごとにタイルシートの規格(領域の分け方、セルサイズ、パディング/余白、オートタイルの期待配置など)が異なるため、16x16/32x32 がそのまま取り込める「標準値」であるとは限らない点に注意してください。
画像形式は PNG が一般的ですが、最終的には対象ツールの公式ドキュメントや付属サンプル(公式ヘルプやサンプル素材)に合わせてシートを再配置する必要があります。
まずは各ツールの公式ヘルプやサンプルタイルを確認してから書き出し形式やセル配置を決めることを推奨します。

最初につまずきやすいのは、1タイルの中に説明したい情報を詰め込みすぎることです。
床タイルに石目、ひび、汚れ、段差、強いハイライトまで全部入れると、単体では描き込めて見えても、敷き詰めた瞬間に面としてうるさくなります。
とくに小さい規格ではこの失敗がそのまま可読性の低下になります。
WOLF RPGエディター系の16x16を意識するなら、陰影は1px単位でまとめ、模様は2色までに留めたほうが崩れません。
32x32でも情報量を増やせるからといって自由に足すのではなく、主色、影、ハイライトの3色基調で骨格を作り、割れ目や草混じりのような装飾は別差分に逃がすほうが、連続配置したときの見え方が整います。

私は32x32で描き始めた人ほど、余白があるぶん全部を描き切りたくなる場面を何度も見ています。
実際には、床の役割は「歩ける面を読ませること」であって、1枚で世界観を説明し切ることではありません。
ベースタイルは静かに保ち、見せ場になる模様だけを差分として載せたほうが、マップ全体の密度をコントロールできます。

影方向の不一致も、初心者の絵が急に寄せ集めに見える原因です。
床では左上から光が来ているのに、壁の出っ張りだけ左下へ影が落ちている、といった食い違いが起きると、同じタイルセット内でも別作品の素材のように見えます。
基準はひとつに固定したほうがよく、RPG向けの見下ろしでは左上光源で揃え、右下へ1pxぶん影を置く設計にすると判断がぶれません。
壁、屋根、柱、草、装飾のどれも同じ方向で暗部がつながっているかを見るだけで、統一感は一段上がります。

角だけ浮いて見える問題もよく出ます。
直線の壁はまともなのに、外角や内角に入った瞬間だけ線が細く見えたり、逆に角だけ太って見えたりする状態です。
こういうときは、角の形を無理に斜めで処理するより、1-2-1の階段状に中間色を1px追加して、直線境界と同じ太さへ戻すと収まりやすくなります。
直線が1px幅なら角も1px基準、直線が2px幅なら角でもその厚みを守る、という考え方です。
角は形の特殊さに目が行きますが、実際に見た目を決めているのは太さの連続性です。

繰り返し模様が目立つのも、完成直前に気づきやすい失敗です。
1枚で整った床ほど、マップ全体ではスタンプのような反復が出ます。
ここはベースタイル自体を荒らしすぎるより、デカールの感覚で差分を2〜3枚用意して混ぜるほうが効きます。
石床なら小さな割れ目、草地なら草叢、土なら踏み跡の差分を別に持たせると、面の均一さがほどけます。
さらに、ノイズをタイル端ぴったりではなく端から2px目あたりに寄せると、グリッド線だけが強調される見え方を避けられます。
端に直接模様を置くと、隣接タイルとの境界が線として読まれやすくなるからです。

レイヤー/当たり判定の失敗と修正

レイヤー設計では、前景に置くべき要素を床や壁に描き込んでしまう失敗が定番です。
たとえば木の葉がキャラクターの頭にかぶさる表現や、屋根のひさしが手前へ突き出す表現は、見た目だけ見ると1枚のタイルにまとめたくなります。
ただ、それを床や壁タイルの中に焼き込むと、キャラクターが常に奥に見えたり、逆に不自然に貫通したりして、前後関係の整理が破綻します。
キャラの手前に来る要素は、最初から前景レイヤーへ分けて持つのが正攻法です。
葉、屋根の先端、橋の欄干、背の高い草の上部など、前に出る可能性があるものをひとまとめの考え方で管理すると、重なりのルールが安定します。

UnityでTilemapを組んでいると、床と前景を同じTilemapに置いたままSortingだけで解決したくなることがありますが、この方法は運用の途中で詰まりやすくなります。
前景を独立させておけば、描画順もコライダーの有無も切り分けられますし、キャラクターとの前後関係もレイヤー単位で見直せます。
RPGツクールMZやRPGツクールMVでも、領域や配置挙動の考え方が分かれているので、絵の都合で混ぜるより役割で分けたほうが事故が減ります。

当たり判定と絵のズレも、見た目ができてから露出する厄介な失敗です。
壁は1マス分描いてあるのに、実際には半マス手前からぶつかる、崖のふちが見えているのに一歩踏み出せてしまう、という状態です。
これが起きる原因の多くは、描画用Tilemapとコリジョン用Tilemapの基準線が一致していないことです。
コリジョンは別レイヤーに分けつつ、同じグリッド上で管理し、壁や崖のベース線を絵と同じ座標に揃える必要があります。
見た目の輪郭でなく、「どこから通行不可にするか」という基準線を先に決めると、絵側も迷いません。

私は崖や壁を置いたあと、見た目の上端ではなく足元の基準線を先に見る癖をつけています。
プレイヤーが接地しているラインと、コライダーが立ち上がるラインが一致していれば、多少描き込みを増やしても違和感が出にくいからです。
Unityなら実行中にギズモ表示でコライダーを重ねて見ると、ズレはすぐ見つかります。
Tilemap Collider 2Dを使う構成でも、絵が合っているように見えることと、歩行感覚が合っていることは別です。

実装時の失敗と運用チェック

実装段階では、タイル画像の更新後にどこが壊れたのか分からなくなることがよくあります。
1枚の角を直したつもりが、T字や十字の接続まで連鎖して崩れるからです。
こういうときは、直線、角、T字、十字の順で破綻を見ていくと、原因タイルの切り分けが速くなります。
直線が正常なら基本辺は生きていて、次に角で曲がり処理を確認し、そのあと分岐形状へ進めば、どの接続ルールで崩れたかを追いやすくなります。
私はタイルセットを差し替えた日にこの順で確認するだけで、迷子になる時間がだいぶ減りました。

💡 Tip

タイル更新後の検査順を固定すると、見た目の違和感を「どの接続で起きたか」に分解できます。直線で辺、角で曲がり、T字と十字で分岐を見る流れにしておくと、修正対象が散りません。

実装時には、絵の修正とインポート設定の不整合が混ざることもあります。
Unityでタイルを扱うなら、Texture TypeをSprite、Sprite ModeをMultipleにして、Sprite EditorのGrid By Cell Sizeで規格どおりに切り出しておく必要があります。
ここでセルサイズがズレると、タイル自体は正しく描けていても、配置後に境界や判定が噛み合いません。
PPUもプロジェクト内で統一しておかないと、同じ32x32の絵でも別アセットだけ大きさが変わります。
実際、32x32スプライトはPPUを32にすれば1 unit四方、16にすれば2 unit四方になるので、混在した瞬間に配置感覚が崩れます。

ピクセル表示の崩れをタイルの絵のせいだと思い込む失敗もあります。
ぼやけやにじみが出ているのに、陰影の置き方ばかり直してしまう状態です。
Unity側ではFilter ModeをPoint、圧縮を使わない設定に寄せておくと、ドットの輪郭が保ちやすくなります。
32px基準のRPGマップなら、PPUを32に揃えたうえで、縦720px表示を前提にしたときのCamera.orthographicSizeは11.25になります。
この組み合わせにしておくと、タイル1枚が1 unitで扱え、マップ座標と表示感覚のズレが出にくくなります。
私はこの基準を先に置いてから絵の差し替えに入るので、表示の問題なのかタイル設計の問題なのかを切り分けやすくなります。

運用面では、見た目のTilemapとコリジョンTilemap、前景Tilemapの役割が途中で混ざると修正履歴が追えなくなります。
名前だけ分けても中身の責務が曖昧だと、誰が見ても理解できる構成になりません。
床は床、前景は前景、判定は判定と役割を固定し、崖や壁の基準線も最初に合わせておくと、あとからタイル差分を増やしても破綻箇所が限定されます。
見た目の完成度は絵だけで決まるように見えますが、実際には「どのレイヤーに何を置くか」が固まった時点で半分以上決まっています。

次に挑戦したい応用

いまの最短ルートは、1セットを完成品として閉じることではなく、増やせる設計にしておくことです。
床・壁・角を描けるようになったら、次は「どう拡張すると実戦で強いか」に目を向けると、作品の密度が一段上がります。
タイル制作は描画力だけで伸びる分野ではなく、選択ルールや配置ルールまで含めて設計した瞬間に、量産できる素材へ変わります。

オートタイルの設計思想

次に触れておきたいのがオートタイルです。
発想の中心は、1枚ずつ手で選ぶことではなく、境界、角、端部の組合せから、必要な見た目が自動で選ばれるように絵を分解することにあります。
草と土、水辺と地面、崖のふちと平地のように、隣接関係で見た目が変わる場所ほどこの考え方が効きます。

ここで意識したいのは、1枚の完成絵を描く感覚から少し離れることです。
たとえば水際なら、中央の面、横辺、縦辺、外角、内角といった役割に分けて考えると、どこを差し替えれば接続が保てるのかが見えてきます。
オートタイルはパターン数を覚える作業だと思われがちですが、本質は「どの接続条件でどの断片を出すか」という整理です。
必要パターン数は採用するエンジンや運用方式で変わるので、数だけ先に固定せず、まず接続ルールを紙に描いてから組むほうが崩れません。

私が最初にオートタイルへ進んだときも、うまくいったのは絵が上手く描けたからではなく、境界の役割を言葉で分けたからでした。
中央、端、外角、内角という名前が付いた瞬間に、修正対象が曖昧でなくなります。
見た目の情報量を増やす前に、接続単位で分解して管理できるかを確認すると、あとで差分を増やしても収拾がつきます。

Isometricへの展開

Isometricへの展開も、タイル表現を一段押し広げる題材です。
見栄えは豊かで、町やダンジョンに立体感が出ますが、そのぶん座標の取り方、前後の重なり、高さ表現が一気に難しくなります。
平面のつもりで置いた床が、視覚上は斜面に見えたり、壁の足元とキャラクターの接地点がずれて見えたりするからです。

ここで遠回りに見えて効果が高いのが、先に正方グリッドで考えを固めることです。
床1枚、壁1枚、段差1段という単位を通常のタイルで整理してから、同じ役割をIsometric用のひし形レイアウトへ移します。
そうすると、見た目は斜めでも、頭の中では「床」「壁」「前景」「高さ1段」が分離されたまま残ります。
いきなりIsometric専用の豪華な町並みを作るより、まずは正方グリッドで成立した最小セットを変換するほうが、重なり事故を減らせます。

特に高さの扱いは、絵より先にルールを決めるべき箇所です。
どこを床の基準線にするのか、壁の立ち上がりを何段として扱うのか、前に被さるオブジェクトをどの層へ置くのか。
この約束が曖昧なまま進めると、建物の角だけ妙に浮いたり、階段で前後関係が壊れたりします。
Isometricは「描けるかどうか」より「整理された平面ルールを斜め投影へ持ち込めるかどうか」で成否が分かれます。

アニメーションタイル

静止タイルが揃ったら、アニメーションタイルを入れるだけでマップの空気が変わります。
最初の題材として向いているのは、水や滝、焚き火です。
どれも「少ない枚数でも動いて見える」モチーフで、手数の割に画面効果が高いからです。
まずは3〜4枚を循環させ、8fps前後のゆっくりした切り替えで試すと、落ち着いたRPG画面に馴染みます。

水面はとくにおすすめです。
波の形を毎フレーム描き直さなくても、ハイライトの1pxを位相ずらしで循環させるだけで、ちゃんと揺れて見えます。
私は水のアニメを作るとき、明るい線を横へ少しずつ送るだけのパターンから始めることが多いです。
これだけでも「止まっている青い面」から抜け出せるので、最小工数で動きを体験するには水が向いています。
波紋も同じで、1pxの輪郭をわずかに移動させるだけで、小さな呼吸のような揺れが出ます。

滝は水面より動きが大きいぶん、縦方向の流れを優先して読むとまとまります。
白い筋を上下に送る、飛沫だけ別位相でずらす、落ち口と着水点で明度差を付ける、といった整理をすると、少ない枚数でも流速が出ます。
焚き火は逆に輪郭を大きく変えすぎないほうが安定します。
炎の外形より、明るい芯と暗い外周の揺れを交互に動かしたほうが、タイル上でのちらつきが抑えられます。

💡 Tip

アニメーションタイルは「形を描き直す」より「明るい場所を少しずらす」から始めると、枚数を増やさなくても動きが成立します。

ランダム配置とAtlas最適化

量産段階で差が出るのが、ランダム配置とSprite Atlas最適化の発想です。
床や草地を1種類だけで敷き詰めると、接続が正しくても同じ模様の反復が目に入ります。
そこで、同一カテゴリの差分タイルを3〜5種ほど用意し、手動で散らしていくと、面の単調さが一気に薄れます。
石畳ならひびの位置違い、草なら濃淡違い、土なら小石の位置違いといった差分で十分です。

Unityで組む場合、パレットに同系統の差分を固めて置くと、無意識に左上ばかり選んで偏りが出ます。
私は配置前にパレット側の並べ順を少しシャッフルして、連続して同じ絵を選びにくい状態にしておきます。
ランダム配置をツール任せにしなくても、選択導線を崩すだけで見た目の偏りは減ります。
整いすぎた床より、少しだけ揺らいだ床のほうが、RPGの歩行画面では自然に見えます。

そのうえで見逃せないのがSprite Atlas最適化です。
タイルと小物スプライトを全部ひとまとめにせず、床や壁などのタイル群と、樽・看板・草むらのような小物群をAtlas単位で分けておくと、運用が整理しやすくなります。
マップ全体で常時使うタイル群と、シーンごとに入れ替わりやすい装飾群を分離しておけば、差し替え範囲が限定されますし、描画の切替頻度も抑えやすくなります。
見た目の制作と実装最適化を別工程にせず、素材をまとめる段階でAtlasの境界まで意識しておくと、後半の負担が軽くなります。

タイル制作は、描いた枚数より「どう増やせる形で持つか」で伸び方が変わります。
オートタイル、Isometric、アニメーションタイル、ランダム配置、そしてSprite Atlas最適化まで視野に入ると、1枚のドット絵がマップ全体の質感へつながっていきます。
次に手を動かすなら、新しい絵を増やす前に、いま持っているタイルをどのルールで拡張するかを決めるところから始めるのが近道です。

シェア

高橋 ドット

ゲーム会社でドット絵グラフィッカーとして10年以上の経験を持つ。ファミコン・スーファミ時代のレトロゲームに影響を受け、現在はインディーゲームのアート制作を手がける。制作テクニックの体系化に情熱を持つ。

関連記事

ゲーム開発

スプライトシートの作り方|サイズ・PPU・書き出し

歩行アニメのドット絵は描けているのに、ゲームに入れた瞬間にガタつく、輪郭がぼやける、拡大するとにじむ。そんなつまずきは、絵そのものよりもスプライトシートの切り方と取り込み設定で起きていることが多いです。

ゲーム開発

Unity 2Dドット絵設定|ぼやけないPixel Perfect

Unity 6で同じ32x32素材がぼやけたり輪郭がにじんだり、動かすとチラついたりする場合、原因の多くは設定同士の不整合です。まずは Game ビューを Free Aspect にし、Run in Edit Mode を有効にして、ズームを変えながら Filter Mode を Point に切り替え、

ゲーム開発

ドット絵UIの作り方|サイズ・色数・5状態(default/hover/active/disabled/focus)

タイトル画面の32×16ボタンは、上に1pxのハイライト、下に1pxの影を入れた瞬間に、ただの長方形が「今すぐ押せる部品」に変わります。16×16の虫眼鏡アイコンも、1pxアウトラインと中抜き1pxを整えるだけで、検索の記号として一気に読み取れるようになります。

ゲーム開発

RPGツクール ドット絵素材の規格とサイズ|MV/MZ対応

RPGツクールMVRPGツクールMZのキャラ素材は、まず48x48pxタイル、816x624px画面、PNG透過を基準に置くと、サイズの迷いが止まります。歩行キャラも4方向×3パターンの12コマと決まっているので、単体なら144x192px、