関連ツール スプライトラボ スプライトシート作成 なぞる、単純化する、エンジンに点を渡す 輪郭はピクセルの中心ではなく、不透明と透明のピクセルの境目をたどるので、どの頂点も整数ピクセルの角に乗ります。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 4 metadata/nerulio のフレームごとの collision。ポリゴンごとに x0, y0, x1, y1 … の平らなリストArea2Dかボディの下のCollisionPolygon2D。スクリプトでフレームごとに、リストからピボットを引いた値を polygon に設定 汎用JSON frames[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 Shape Unity専用。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のドキュメントに従います。
参照した公式ドキュメント 衝突ポリゴン生成 アルファのシルエットから衝突ポリゴンを作り、頂点数と誤差を数値で確認します。
使い方 画像を追加 設定を調整して結果を確認 新しいファイルを保存 対応形式 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アドレスなどの接続情報は配信元に伝わります。
作業は自動保存されますか? いいえ。画像と編集状態はこのタブに保持され、メディア出力は端末の一時保存を利用する場合があります。言語を変えても作業は残りますが、再読み込み、タブを閉じる操作、別のページへの移動で失われることがあります。