アイソメトリックピクセルアートガイド — タイル、スプライト、キャラクター

アイソメトリックピクセルアートは2:1のダイヤモンドグリッドの上に描きます。すべてのタイルは幅が高さのちょうど2倍で、高さは遠近法のカメラで再現するのではなく、縦に並んだピクセルで表現します。32×16が主力のタイルサイズで、大きなシーンには64×32、小さな小物やキャラクターには16×8を使います。2:1の比率を受け入れれば、スプライトの設置面積、歩行サイクル、継ぎ目、奥行きソートといった他のすべての判断は、そこから導かれます。

このページでは、グリッド、タイル、スプライト、そして4方向と8方向のキャラクターセットを、実際に作る順番どおりに解説します。その後、多くのチュートリアルが省いてしまうステップ、つまり同じダイヤモンドグリッドをブラウザの中で実際に歩ける3Dの世界に変える方法を扱います。そこではカメラの俯角をアートに合わせて固定し、タイルがジオメトリになります。Neta Studioの3Dゲームビルダーは、その最後のステップで使うツールであり、だからこそここで説明する投影の細部を正確に押さえる価値があるのです。

早わかり：ピクセルアートを「アイソメトリック」にするものは何か？

アイソメトリックピクセルアートは回転投影であり、透視投影ではありません。世界のX軸とY軸はどちらも画面上で斜めに走り — 一方は右下へ、もう一方は左下へ — 垂直軸は単一ピクセルのまま真上に伸びます。何も収束せず、消失点もなく、奥行きは手作業で保つ約束事です。キャンバス上でより下にあるほど近く、ピクセルの積みが高いほど上を意味します。

比率は地面の両軸とも横2に対して縦1で、これによりすべての地面の辺は水平から約26.57°になります。厳密にはこれは二軸投影（ダイメトリック）です。真のアイソメトリックは3軸すべてで等しい短縮がかかり、地平線から約35.264°で、地面タイルは約1.732:1になります。それでも「アイソメトリック」という名称が定着したのは、人々がそう呼ぶからであり、見つけられるほぼすべてのタイルセットは2:1で描かれています。

2:1グリッド

2:1が存在するのは、それが正方形ピクセルに対応するからです。横2、縦1の辺はきれいな階段状になります — 右に2ピクセル、下に1ピクセルを繰り返す — ので、タイルを貼るときすべての辺のピクセルが整数ピクセルに乗ります。真の30°投影は約1.732対1の比率で、横に2ピクセル進むごとに下へ1.155ピクセル動きます。これはピクセルグリッドに乗らないため、辺は1ピクセルと2ピクセルの連なりを交互に繰り返し、線がよれてしまいます。主役級の小物が1つなら手作業でピクセルを置けますが、何千枚も複製を貼るタイルセットではそうはいきません。

実際によくある失敗は、正方形のキャンバスを45°回転させて、それをアイソメトリックと呼ぶことです。45°回転した正方形はやはり正方形で、ダイヤモンドは幅と高さが等しくなり、上面と側面が同じシルエットになり、隣り合う奥行きの行がきれいに分かれなくなります。最初のピクセルから2:1のダイヤモンドを描きましょう。タイルを作るために16×16や32×32のスプライトを回転させてはいけません。

タイルの歩幅をオフセットとして頭に入れておきましょう。32×16では、画面空間で東に1タイル動くのはxに+32、yに+16です。北に1タイル動くのはxに+32、yに-16です。この1組のオフセットが、配置にも、スプライトの移動にも、奥行きソートにも使う値です。

最初のアイソメトリックタイルを描く

タイルセットを描く前に、まず1枚のタイルを描きましょう。目標は、修正し直さずに複製を貼れるタイルです。つまり、すべての辺のピクセルが2:1の歩幅に乗り、見える3つの面が1つの明度ランプを共有します。上面は基準の明度、片側は1段暗く、もう片側は2段暗くします。

アイソメトリックに見えるのは2つの側面のおかげです。両側が同じ明度だと、立方体は平らな六角形になり、目が高さを読み取れなくなります。光源の向きを1つ決め — 左上が慣例です — プロジェクト内では決して変えないでください。そうすれば、すべてのタイルとスプライトで光の位置が一致します。

アイソメトリックスプライトとスプライトシート

横視点のスプライトは長方形の設置面積をもち、水平に歩きます。アイソメトリックのスプライトはダイヤモンドの設置面積をもち、足はそのダイヤモンドの内側に収まります。シートに関するすべてはそこから導かれます。基準点はダイヤモンドの中心、あるいは足を基準に考えたいならダイヤモンドの下端の角で、スプライトは立っている地面タイルと同じタイル原点に描画されます。

画面上の移動は斜めになります。マップで東に1タイル動くと右へ+32ピクセル、下へ+16ピクセル、北に1タイル動くと右へ+32、下へ-16です。つまり東向きの歩行サイクルは水平なループではありません — 脚が回るあいだ、体は2:1の斜面に沿って流れます。各フレームのオフセットを水平な線の上に描くと、キャラクターはタイルの上を滑ってしまいます。対角線上に4体を並べ、足がタイルの中心をたどるか確認してテストしましょう。

シートは行を向き、列をフレームとして、均一なセルに並べます。32×16の設置面積と高さ32ピクセルのキャラクターは、幅32、高さ48のセルに収まります。ダイヤモンドに16ピクセル、その上に体のぶん32ピクセルです。アルファは2値、つまり0か255に保ちましょう。半透明の辺のピクセルは、シートを詰めたり拡大縮小したりすると後ろの色を拾ってしまい、暗いタイルを背景にすべてのキャラクターの周りへ薄い光の縁が出ます。

アイソメトリックのキャラクター（4/8方向）

4方向が標準なのは、地面グリッドに南東、南西、北東、北西という4つの対角線があるからです。これらの向きはマップの軸に沿ったすべての移動をカバーします。8方向は画面の四方位 — 北、南、東、西 — を追加しますが、これらはキャラクターがグリッドを斜めに横切り、両方の軸に同時に沿って歩くときだけ現れます。アートは2倍になり、追加の4行はプレイヤーが2つのキーを押しているあいだしか見られません。

エンジンには決まった参照方法が必要です。行が向きのインデックス、列がフレームに対応するか、あるいは directionIndex × framesPerDirection + frame という一次元のインデックスです。順序をシートの隣のテキストファイルに書き留めましょう。よくある不具合は、東を先頭に作ったシートを南を先頭として読み込んでしまい、1つの向きが後ろを向き、報告が「歩行アニメーションがおかしい」という形で返ってくるものです。

フレーム数とタイミング

歩行サイクルは毎秒8〜12フレームで自然に読めます。毎秒8フレームで4フレームなら1フレームあたり125ミリ秒、6フレームにすれば接地ポーズと通過ポーズを描けて、大した手間をかけずに2:1の対角線に沿ってより滑らかに動きます。メタデータが向きごとのフレーム数を保存しているのでなければ、すべての向きの行でフレーム数を同じにしましょう — 6フレームの行が4フレームの行の隣にあると、コードが均一なグリッドを前提にした瞬間に間違った速さで再生されます。待機はゆっくりしたループで1〜2フレームです。攻撃やインタラクションは同じセルサイズの別シートに置き、基準点が変わらないようにします。

反転は安上がりだが、たいてい間違い

東から西へ鏡映すると描く量は半分になります。しかし光も鏡映されます。光源が左上から来ているなら、反転したスプライトは右上から照らされ、非対称なディテール — 盾を持つ腕、鞘、肩掛け鞄のストラップ — が逆側にきてしまいます。キャラクターが対称で、陰影が平坦で誰も気づかないときだけ鏡映し、強い方向性のあるハイライトをもつスプライトは決して鏡映しないこと。

オブジェクト、小物、高さ

小物のアートの枠は、その設置面積より縦に長くなります。1×1の設置面積（32×16）で、上に40ピクセルの樹冠が伸びる木には、幅32、高さ約56のセルが必要です。ダイヤモンドに16、その上に立ち上がるぶんに40です。そのセルサイズを一度決めたら、すべての小物を同じモジュール内に収めましょう。そうしないと、インポーターが小物ごとにスプライト単位のオフセットを必要とします。

複数タイルにまたがる小物は、より大きなダイヤモンドの上に描きます。2×2の建物は4タイルを覆うので、アートが上に48や64ピクセル伸びていても、地面の設置面積は64×32のダイヤモンドです。原点は設置面積の中心 — 2×2の小物なら4つのタイルが出会う点 — に置き、スプライトの外接矩形の中心には置かないこと。外接矩形の中心に合わせると、土台が半タイルずれ、建物は自分の敷地の片隅に浮いているように見えます。

2Dアイソメトリックレンダラーでの奥行きソートは画家のアルゴリズムです。tileX + tileYで並べ、同点はオブジェクトごとの優先度で決めます。背の高い小物がこれを破ります。行2に置かれた高さ6タイルの塔は、本来それを隠すべき行5の壁の上に描かれてしまいます。対処法は2つ。背の高い小物を土台と上部に分け、それぞれが実際に覆う行で並べ替えるか、すべてのスプライトにタイル単位の占有マスクを与え、レンダラーがどの行と重なるか分かるようにするかです。

繰り返しが目立たないタイルセット

アイソメトリックのセットには2種類の継ぎ目があり、それぞれ別の対処が必要です。明度の継ぎ目は、側面が下にあるタイルの上面と接する箇所です。壁の土台が地面の上面より明るいと、マップ上のすべての壁に沿って明るい線が出ます。模様の継ぎ目は、同じ地面タイルの並びが繰り返される箇所です — 2:1の歩幅は規則的すぎて、3タイルほどで目がそのリズムに固定されてしまいます。

辺のバリエーションが模様を隠します。最小限役立つセットは9枚です。中心のタイル1枚、1辺だけに移行があるタイル4枚、隣り合う2辺に移行があるタイル4枚です。移行は直線ではなく、2〜4ピクセルの柔らかく途切れた帯として描きましょう。そうしないと、継ぎ目を消すのではなく移動させただけになります。配置は連続する乱数生成器ではなく、タイル座標のハッシュでランダム化し、同じ世界が毎回同じように再生成されるようにします — これは世界が書かれた記述から再構築されるときに重要です。

隣接グラフは直交タイルセットと同じで、タイルごとに辺で隣り合う4つと斜めに隣り合う4つです。だから47タイルのブロブセットは、アートだけが異なり、直交の作業からそのまま流用できます。対角線だけのケースを描いていないなら有効にしないこと。そうしないと角の不具合や、2つの地面タイルが食い違う1ピクセルの隙間が生じます。

• 47タイルのブロブセット9タイルセットが省いてしまう対角線だけのケースを含め、4近傍と8近傍のあらゆる組み合わせをカバーします。タイル数は直交のブロブセットと同じで、変わるのはアートだけです。
• 9タイルセット中心1枚、1辺のみ4枚、角4枚。描くのが安上がりでほとんどの地面の移行をカバーし、配置ルールで対角線だけのケースを生成しないようにしていれば、そこだけが弱点です。
• 鏡映バリエーション地面タイルを水平に反転するのは、光の手がかりがないタイルならただのバリエーションです。壁や光を受けた小物は決して鏡映しないこと。光の向きも一緒に反転し、タイルが隣り合うタイルと合わなくなります。

2Dアイソから遊べる3Dアイソの世界へ

2:1のダイヤモンドは、ヨー45°、俯角30°の平行投影カメラから得られます。30°では縦方向の縮みがちょうどsin(30°) = 0.5なので、正方形の地面タイルは幅が高さの2倍のダイヤモンドに投影されます — 描いたピクセルと同じ比率です。真のアイソメトリックの俯角35.264°では1.732:1になり、2:1のタイルセットとは合いません。したがって32×16のタイルは1×1のワールド単位にきれいに対応し、2Dセット全体を平らな四角形のテクスチャとして使うか、何も描き直さずに箱へ押し出せます。

カメラが動くと2つのことが破綻します。1つ目は自由な周回です。ヨー37°ではタイルの辺がピクセルの間に落ち、マップ全体がちらつきます。俯角は30°に固定し、ヨーは90°刻みにスナップし、回転をアニメーションする場合も収まる前にスナップして戻します。2つ目はライティングです。アートには左上からの光が焼き込まれています。キーライトがワールド空間に固定されたままカメラが90°回転すると、アートの陰影がシーンと食い違います。キーライトをカメラの子にするか、陰影をテクスチャに焼き込み、ライトを画面基準に保ちましょう。

WebGLでピクセル感を保ちたいなら、低い内部解像度で描画し、最近傍フィルタリングで拡大し、カメラの位置を画面上の整数ピクセルにスナップします。そうしないとテクセルの中心がフラグメントの間に落ち、キャラクターが歩くあいだアートが這うように揺れ、アート自体は問題なくてもテクスチャの不具合に見えます。

Neta Studioの3Dゲームビルダーは、書かれた記述から、固定した俯角の平行投影カメラを使ってブラウザの中に本物のThree.jsワールドを構築します — 歩けて、ローカルのツールチェーンは不要です。Mini Worldはその小規模版で、大きなマップに着手する前にタイルセットとキャラクターセットが正しく読めるか試す最速の方法です。『サイクロプスの島』は完成した作例の世界で、歩き回って投影が機能しているのを確かめられます。キャラクターについては、Agent Sprite Forgeが選んだセルサイズでスプライトシートを生成し、それが向きをまたいで基準点を一定に保ちます。

アイソメトリックピクセルアートのソフトウェア

このページのことはすべて、グリッド機能のあるラスターエディターで実現できます。専用ツールが加えるのはタイルへの配慮です。描いているタイルを隣のタイルと並べて表示するタイルマップモードがあり、200回複製してからではなく、描いている間に継ぎ目が見えます。

機能一覧ではなく、何を作る必要があるかで選びましょう。タイルにはグリッド、タイルプレビュー、安定したパレットが必要です。キャラクターにはオニオンスキン、均一なセル、基準点を保持するシート書き出しが必要です。マップにはタイル座標を保存するツールが必要です。PNGはマップではないからです。

• Asepriteタイルマップモード、タイルグリッド、オニオンスキン、フレームタグと基準点を保持するJSON付きのシート書き出しを備えたラスターエディター。タイルプレビューがあるからタイルセットに使われるのです。描きながら継ぎ目を確認できます。
• LibreSprite同じコードベースのオープンソースエディター。タイルの作業手順はほぼ同じですが、後から追加された機能は少なめだと考えてください。
• KritaとPhotoshop汎用のラスターエディター。グリッドガイドと対称機能でダイヤモンドは描けますが、どちらにもタイルマップモードがないので手作業で複製します。オフセットフィルター — キャンバスをタイルサイズの半分ずらして中央を見る — は、今でも明度の継ぎ目を見つける最短の方法です。
• Tiledアートツールではなくマップエディター。タイル座標を保存し、2:1のタイルサイズでアイソメトリック表示に対応し、レイヤーデータを書き出します。描くのは一方のツール、配置するのはもう一方です。
• Neta Studioの3Dゲームビルダーブラウザベース。書かれた記述がThree.jsの遊べるアイソメトリックの世界になるので、ローカルのツールチェーンとインポートの工程を完全に省き、アートが正しいカメラの俯角で読めるかを試せます。
• Agent Sprite Forgeキャラクターのスプライトシートを生成します。これは通常アイソメトリックのセットで最も時間のかかる部分です。生成する前にセルサイズと方向数を決めてください。違うセルサイズで作られたシートはタイルに合いません。

それが属する世界へ、歩いて入ろう

スプライトは、立つ場所のないキャラクターです。最後のステップは他にはないものです。作ったばかりのシートを、誰かが歩き回れる世界 — 小さな島、惑星、雨の街角 — に置くのです。このサイトのすべての世界は、1つの書かれた記述から作られ、遊べるページとして公開されています。

FAQ