RPGスプライトメーカー — RPGキャラクター・スプライト・タイルセットを無料で生成

RPGスプライトメーカーは、文章で書いた説明を使えるゲーム素材に変えます。「年老いた漁師、青いコート、麦わら帽子、見下ろし型、32×32、4フレームの歩行」のように入力すると、生成器が透過背景のPNGとしてキャラクタースプライト、スプライトシート、またはタイルセットを返します。その裏側にあるツールがエージェント・スプライト・フォージで、Neta Studioの中でブラウザ上で動作します。インストール不要、ペンタブ不要、別ウィンドウでピクセルエディタを開く必要もありません。

RPGの素材づくりで難しいのは品質ではありません。数です。小さなゲームでもプレイヤー1人、NPC8人、店主4人、敵のバリエーション20体が必要で、そのほとんどは少なくとも2方向を要します。木を一本描く前に、およそ40体のキャラクターになるわけです。RPGを作っている人のほとんどは、そのうちの一体も描けません。一貫した、やや素朴な32×32のスプライトを数秒で生み出す生成器は、週末をかけて描いた一枚の美しいイラストよりも、完成したプロジェクトにとって価値があります。

自分では描けない配役を生成する

ヒーローではなく、配役から始めましょう。ヒーローは、実際に描いたり手を加えたりするのが楽しい唯一のキャラクターです。プロジェクトが息絶えるのは配役のところです。鍛冶屋、その見習い、少しずつ鎧の違う衛兵3人、商人、子ども、犬、スライム6体、そして狼。どれも小さな絵の作業で、それが40個積み重なると壁になります。エージェント・スプライト・フォージは、その壁を越えるために存在します。勢いが尽きる前に、世界に人を住ませておくためです。

入力は説明文で、その説明文がインターフェースのすべてです。よい説明には四つのことを書きます。誰なのか、何を着ているか、配色、そして視点です。「衛兵、鎖帷子の上に濃紺のタバード、槍、見下ろし型、32×32、2方向」なら使えます。「かっこいい戦士」では使えませんし、失敗は予測できます。生成器が凡庸なディテールを選び、灰色の騎士が出てきて、リロールボタンで説明の問題を直そうと5回も再生成することになります。

二つ目の失敗の型は、説明しすぎです。幅32ピクセルでは、キャラクターはおおよそ頭、胴、脚2本です。マント、リュック、マフラー、肩当て、光るお守りは、同じ12ピクセルほどのシルエットを奪い合います。小さなサイズでは、小道具はディテールを足すのではなく、ノイズを足します。最初の生成が判読できない塊になったら、他を変える前に文から要素を削ってください。3Dゲームビルダーや、Mini Worldやサイクロプスの島のような世界も同じ原則を使っています。読める形が先、飾りは後です。

生成例

三つの出力形状で、RPGに必要なものはほぼすべて網羅できます。どれもアルファチャンネル付きのPNGとして書き出され、それぞれ置かれる場所が異なります。差はアートスタイルよりも重要です。グリッドが間違ったシートは、スプライトがどれほどよく見えても使えないからです。

1体、1フレーム、1ファイル。透過付きの32×32のPNGが、最小の有用な単位です。立ちNPC、カウンター越しの店主、道しるべ、宝箱、まったく動かない敵のために生成するのがこれです。単一セルのPNGとして書き出されます。

平面やカメラを向くビルボードにテクスチャとして載せられます。3Dゲームビルダーでは、ビルボード上の単一ポーズのスプライトだけで、静止したNPCの村一つをまかなえます。アニメーションの状態がないので、壊れるものもありません。キャラクターの数が多く、時間が短いなら、これが既定にすべき形式です。

左から右へ並べた4フレームを、帯またはグリッドとして書き出します。32×32の4フレームを1行にすると128×32のPNGです。4方向なら4×4のグリッドで128×128、2方向なら4×2のグリッドで128×64になります。歩行サイクルは時間とともにフレーム番号を進めてループさせます。毎秒8フレームなら、4フレームの歩行は1歩の周期に0.5秒をかけ、通常の移動速度で正しく見えます。

1枚のPNGと、フレームサイズ、フレーム数、列数、方向を記した任意のJSONサイドカーとして書き出します。サイドカーはただのメタデータで、独自形式ではありません。使いたくなければ、数値はPNGの寸法から読み取れます。128を32で割れば4フレームです。

1枚の画像に収めた地形タイルのグリッドです。草、草の縁、土の道、水と水際、壁の上面、床のつなぎ目など。16×16のセルなら、8×8のアトラスは64タイルを収めた128×128のPNGです。32×32なら、同じ64タイルに256×256が必要です。

1枚のアトラスPNGとして書き出します。Tiledのマップレイヤー、GodotのTileSet、Three.jsのタイルメッシュに載ります。重要なのは、セルサイズがマップのグリッドと正確に一致することです。32×32のタイルを生成して16単位のグリッドに置くと、1枚おきのタイルが半マスずれて、その継ぎ目は遠くからでも見えます。

キャラクタースプライト・スプライトシート・タイルセットの違い

この三つは会話では同じように使われますが、プロジェクトでは互換ではありません。キャラクタースプライトは1フレームで、タイミングの情報を持ちません。スプライトシートは1体のキャラクターのフレームのグリッドで、フレームの順序を持ちます。タイルセットは異なる地形のピースのグリッドで、代わりに隣接の情報を持ちます。間違ったものを選ぶと、タイルセットをアニメーションフレームに切り分けたり、歩行サイクルのフレームを床として置いたりすることになります。

形式を決めるのは生成器ではなく、それを使う側です。ファイルを読むのは何かを問いましょう。キャラクターシートのスロットは、左上のセルから始まる、余白もマージンもない固定グリッドを求めます。タイルレイヤーは、原点が既知の均一なセルを求めます。UI画像ノードは1フレームを求めます。最も多い書き出しの失敗は余白です。安全のために足した1ピクセルのマージンが、すべてのフレーム番号を1つずらし、アニメーション全体をずらします。

2方向（左右のみで、反対側はスプライトを鏡像にする）はシートを半分にし、横視点のゲームの標準的な近道です。4方向（下、左、右、上）は見下ろし型の既定で、正方形のグリッドが必要なので、4フレームの歩行×4方向は16フレームになります。8方向は、ほとんどの小さなチームが立ち止まって考え直すべきところです。シートは1体あたり32フレームに増え、斜めのポーズは32ピクセルでは最も見栄えが悪いものです。

うまくいくフレーム数：硬い待機の上下動なら2、歩行なら4、より滑らかな歩行なら6、走りなら8。4未満だと歩行は足を引きずっているように見えます。8を超えると、プレイヤーが意識して見ることのないフレームにコストを払うことになります。

使い方

5つの手順を、この順番で。手順4のシルエット確認を飛ばすことが、20回生成しても使えるものが何も残らない理由です。

世界に配置する

ダウンロードフォルダに入ったPNGは製品ではありません。多くのスプライト生成器がここで止まり、そしてここが、実際に何かを完成させられたかを決める手順です。シートは、グリッドに置かれ、衝突判定のボリュームが与えられ、アニメーションのタイマーで動かされて初めて、ゲームになります。

3Dゲームビルダーでは、シートを生成したのと同じブラウザセッションでそのまま配置できます。タイルセットのセルサイズが世界のグリッドを決めるので、32×32のタイルならすべての衝突ボックスが32単位の刻みに吸着します。この一つの決断が、バグのカテゴリを丸ごと消します。角に半タイルの隙間はできず、プレイヤーが2枚の床タイルの間に挟まることもありません。スプライトシートは四角形上のアニメーションするビルボードになり、カメラを2:1のアイソメトリック角（約26.57度）に設定すると、32×16の菱形タイルが正方形の床として見えます。

このやり方で作った世界は、インストールするエンジンのランタイムもビルド手順もなく、ブラウザで動きます。Mini Worldもサイクロプスの島も、書いた説明が遊べるThree.jsのシーンになる例で、生成した配役がたどるのと同じ道です。うまくいく順番はこうです。まずタイルセットを生成し、次に配役を生成し、三番目にプレイヤーを配置し、それからNPCを足します。先に配役を作ると、地面のサイズが分からなくなります。

無料・オンライン・インストール不要：RPGスプライトメーカーはブラウザで動く

スプライトメーカーは無料で、オンラインで動きます。インストーラーも、デスクトップアプリも、プラグインも、買うべきお絵かきソフトもありません。ページを開き、説明を入力すれば、PNGが手に入ります。ブラウザのキャンバスとWebGL2を使うので、すでに手元にあるマシンで十分です。

出力はあえて地味なものにしています。書き出しは、選んだフレームサイズとシート寸法の、アルファチャンネル付きの標準的なPNGファイルで、加えてフレームサイズ、フレーム数、列数、方向を記した任意のJSONファイルです。独自のコンテナはありません。アートがNeta Studioに縛られることもありません。明日そのPNGを別のツールに持って行っても、開きます。

含まれていないものも、先に計画できるように挙げておきます。骨格のリギングも、ボーンアニメーションも、自動の中割りもありません。すべてのフレームは平坦な画像です。4フレームの歩行は4枚の画像です。これは制約であり、同時にファイルが移植しやすい理由でもあります。平坦なフレームは、存在するすべての2Dパイプラインで動くからです。

RPGのスプライトサイズ — RPGスプライトメーカーでグリッドを選ぶ

16、32、48ピクセルの3つのサイズで、RPGの作業はほぼ網羅できます。16×16は密なマップとレトロな見た目をもたらし、640×360のビューポートなら世界の広い範囲を一度に表示できますが、顔は判読できなくなります。32×32は安全な既定で、読める頭、胴、脚のための余地が十分にあり、すべての一般的なシートサイズにきれいに割り切れます。48×48は、目に見える顔のディテールが必要なキャラクター、タップできるほど大きくしたいモバイルやタッチの対象、画面上のタイル数が少ないゲーム向けです。

選ぶサイズよりも重要なルール：フレームサイズはシート幅を均等に割り切れなければなりません。幅256ピクセルのシートは32ピクセルのフレームをちょうど8枚収めます。48ピクセルのフレームは収まりません。256÷48は5.33なので、6列目が半分に切れ、サンプラーが隣のフレームまで読み取ります。実際には現在のポーズの左端に次のポーズの1ピクセルの列が見え、レンダリングのバグのように見えますが、実際には算数の誤りです。テクスチャフィルタも最近傍に設定しましょう（Three.jsではNearestFilter、Godotではフィルタをオフ、UnityではフィルタをPoint）。線形フィルタはフレームの境界をまたいで隣接ピクセルを混ぜ、くっきりしたスプライトをにじみに変えてしまいます。

このサイトのスプライトサイズのガイドには、それぞれのシートの計算を含む一覧が載っています。セルが正方形ではなく32×16や64×32になるアイソメトリックの菱形のサイズも含まれます。

それが属する世界に入って歩き回る

スプライト単体は、立つ場所のないキャラクターです。大事なのはエディタが与えてくれない手順、つまり今作ったシートを誰かが歩ける世界に置くことです。このサイトのアイソメトリックの世界はすべて、そうやって作って公開しました。

FAQ