衝突ポリゴン生成

アルファのシルエットから衝突ポリゴンを作り、頂点数と誤差を数値で確認します。

スプライトのアルファからなぞった衝突ポリゴンは、ボックスよりもシルエットに沿います。Nerulioはフレームごとに、アルファのしきい値(既定127、つまり半分以上不透明なピクセルが対象)でピクセルの境界に沿って輪郭をなぞり、輪郭が自己交差しないようにしながら頂点数の上限(既定12、3〜64)に収まるまで単純化し、フレームごとに最大8個のポリゴンをフレームキャンバスのピクセルで保存します。ポリゴンはGodotバンドルのメタデータと汎用JSONに書き出され、CollisionPolygon2DノードやUnityのコライダーは作りません。

画像をここにドロップ複数のファイルをまとめて処理できます
アップロードなし · この端末で処理

なぞる、単純化する、エンジンに点を渡す

輪郭はピクセルの中心ではなく、不透明と透明のピクセルの境目をたどるので、どの頂点も整数ピクセルの角に乗ります。16 × 16の不透明な正方形は、ちょうど (0, 0)、(16, 0)、(16, 16)、(0, 16) になります。外側の輪郭は画面上で時計回り(yは下向き)になり、4px²未満の粒は捨てます。

単純化(Ramer–Douglas–Peucker)は直線に近い点を取り除きます。許容誤差は1pxから始まり、頂点数が上限以下になるまで引き上げられ、輪郭を自己交差させる誤差は採用しません。自己交差した輪郭は物理形状として使えないからです。誤差は段階的に上がるので、上限より少ない頂点数で止まることがあり、上限が低いと両脚のあいだのようなすき間がつぶれます。

エンジンはこうしたポリゴンを、オブジェクト基準の点のリストとして受け取ります。GodotのCollisionPolygon2Dは凹ポリゴンも受け付け、既定のソリッドモードでは自分で凸の部品に分けます。Area2Dか物理ボディの子である必要があります。UnityのPolygonCollider2Dはローカル空間の点を受け取り、スプライトのCustom Physics Shapeから独自の輪郭を作ることもできます。どちらもまずフレームのピボットを引き、Unityではさらにyを反転してPixels Per Unitで割ります。

アルファしきい値
透明とみなす最大のアルファ値。127なら半分以上不透明なピクセルが残る。
頂点数の上限
単純化後のポリゴンが持てる点の最大数。
許容誤差
単純化で輪郭を動かしてよい距離(ピクセル)。

例:32 × 48のキャラクター1フレーム、3つの設定

頭・胴・4pxのすき間をあけた両脚と、頭のまわりの淡い光(アルファ60)。Nerulioの輪郭追跡で計算した値:

なぞった輪郭(アルファ > 127)          頂点48、面積544px²
上限64   誤差1px      頂点16、面積540px²(−0.7%)、最大偏差1.0px、両脚は分かれたまま
上限12   誤差3.8px    頂点5、面積428px²(−21%)、最大偏差3.8px、脚のすき間が消える
しきい値40、上限12   光も含む:面積628px²、誤差2.0pxで頂点12

Godot、ピボット (16, 48)  ポリゴンの点 (22, 48) → ノード空間 (22 − 16, 48 − 48) = (6, 0)

この例では上限12でも頂点は12になりませんでした。次の誤差の段階で一気に5まで減ったからです。形が大事なら上限を上げ、アルファから自動生成したあとにStudioが示す頂点数を比べてください。

ポリゴンの行き先

書き出し先書き出しに入るポリゴンエンジンで作るもの
Godot 4metadata/nerulio のフレームごとの collision。ポリゴンごとに x0, y0, x1, y1 … の平らなリストArea2Dかボディの下のCollisionPolygon2D。スクリプトでフレームごとに、リストからピボットを引いた値を polygon に設定
汎用JSONframes[key].collision:ポリゴンごとに [[x, y], …]点のリストを受け取るどのエンジンでも
Unity 6なし。書き出しの注記が汎用JSONを案内する汎用JSONの点でPolygonCollider2D、またはUnity独自のCustom Physics Shape
Aseprite、Phaser、PixiJS、LÖVE、Spine、Starling、Defold、GameMaker、CSSなしアトラスの隣に汎用JSONも読み込む

結果の確認

  • アルファから自動生成すると、通知に作ったフレーム数と頂点数が出ます。タグをコマ送りしてフレームごとの輪郭を見ます。
  • 光や煙のあるフレームで、しきい値を127と低い値のあいだで切り替えて輪郭を比べます。
  • GodotでArea2Dの下に変換した点でCollisionPolygon2Dを追加し、Debug › Visible Collision Shapesをオンにしてスプライトに重ねて確認します。

トラブルシューティング

症状考えられる原因確認方法対処
ポリゴンが両脚のあいだなどのすき間を埋める頂点数の上限のせいで、すき間より大きな誤差が使われた自動生成後の頂点数が上限よりかなり少ない、または輪郭がすき間をまたぐ上限を上げて(例:24)自動生成し直す
光や煙が衝突形状に入るそのピクセルのアルファがしきい値より高いしきい値を上げ下げして比べるしきい値を上げて、淡いピクセルを透明扱いにする
エンジンで形状がずれる点はピボットではなくフレームキャンバスの左上を基準にしたピクセル例と点を1つ比べるピボットを引く。Unityではさらにyを反転しPixels Per Unitで割る
一部の部位にしかポリゴンがない離れた形状はフレームごとに8個まで、4px²未満の粒は捨てる自動生成のメッセージに捨てた粒や超過した形状が出る絵の上で部位をつなぐか、足りないポリゴンを手で描く

ほかの方法

方法こんなときに向いています
UnityのSprite EditorのCustom Physics ShapeUnity専用。Unityが輪郭を作って編集し、Polygon Collider 2Dがスプライトの新しいインスタンスでそれを使います。
フレームごとにボックスか円を1つ多くのプラットフォーマーの体。細かいポリゴンより軽く安定します。ヒットボックスエディターで描くか、従来のスプライトラボの凸包・矩形・円の選択肢を使ってください。

この方法の限界

  • ポリゴンは書き出しにデータとして入るだけで、CollisionPolygon2DノードやUnityのコライダーは作りません。
  • 衝突ポリゴンはUnity、Aseprite、アトラス形式には入りません。汎用JSONを使ってください。
  • 形状の中の穴はStudioのポリゴンに含まれません。

バージョンと出典

輪郭の追跡と例の数値はNerulio自身のモジュール(src/game/contour.js)によるものです。メタデータ入りのGodotバンドルはGodot 4.7.2で読み込みましたが、その実行で衝突ポリゴンを物理形状として使ったわけではありません。エンジンの動作はGodot 4.7とUnity 6のドキュメントに従います。

参照した公式ドキュメント

衝突ポリゴン生成

アルファのシルエットから衝突ポリゴンを作り、頂点数と誤差を数値で確認します。

使い方

  1. 画像を追加
  2. 設定を調整して結果を確認
  3. 新しいファイルを保存

対応形式

PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — 入力のデコードはブラウザ対応と追加エンジンに依存します。

このツールでできること

アルファのシルエットから衝突ポリゴンを作り、頂点数と誤差を数値で確認します。

処理方式と検証状況

advanced · Studio Sprite workspace: measured grid (margin, spacing) or alpha islands, colour key, previewed import decisions; GIF/APNG/.aseprite decoders; timeline, pivots, boxes, alpha contour collision. 品質検証中です。Pro・Flagship水準はまだ実証されていません。

書き出す前に

凸分解は行いません。凸形状が必要な場合は凸包を使ってください。

よくある質問

このツールにはどのような制限がありますか?

凸分解は行いません。凸形状が必要な場合は凸包を使ってください。

ファイルはアップロードされますか?

このツールで開いたファイルはアップロードせず端末で処理します。コミュニティの投稿に明示的に添付する画像は別途アップロードされます。一部のエンジンやモデルは外部から取得するため、IPアドレスなどの接続情報は配信元に伝わります。

作業は自動保存されますか?

いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。