スプライトのサイズが不均一なスプライトシートを処理するにはどうすればよいですか?


14

不均一なスプライト寸法を持つスプライトシートの場合、どのように境界矩形を取得できますか個々のスプライトの(つまり、次の画像の青いボックス/いくつかの例を描いただけですか)。

私が決定したいのは: offset_x, offset_y, width, height

ここに画像の説明を入力してください

これまでのところ、すべてのスプライトのサイズが同じであるスプライトシートのみを使用しました。その場合、特定のスプライトを取得するには、xオフセットとyオフセットを指定するだけです。ただし、不均一な寸法のスプライトシートでは、これは機能しません。

編集:コメントと回答を読んだ後、質問をより包括的にするために言い換えました。ゲームでスプライトシートを使用する実際のプロセス。以前は、この質問には、人々が不均一な寸法のスプライトシートを作成する理由と、その対処方法が含まれていました。


1
それらはすべて同じサイズであり、色で塗りつぶされていないスペースは、アルファがゼロに設定されたピクセルです。
デレク

回答:


8

同一でない次元のほとんどのスプライトシートには、通常、スプライトのアンカーがある場所で何らかのメタデータがあります。フルアルファピクセルを取り除き、必要なデータを提供して、このデータが手動で生成されないようにするようなツールがたくさんあります。

このメタデータがない場合は、自分で作成する必要があります。最も正確な方法は、あなたがあなたの質問で言ったものです、それはただ手でそれをすることです。しばらくかかるかもしれませんが、おそらく新しいスプライトを作成するよりも高速です。


これ-自動検出に基づくアプローチには用途がありますが、実際には細心でエラーが発生しやすくなります。スプライトの起源のメタデータはすでに必要です(あなたのスプライトに起源がありますよね?)アーティストは、個々のスプライトのサイズをアプリよりも常によく知っている必要があります。
スティーブンスタドニッキー

+1。スプライトでメタデータを提供することは、それを正気に解決することが保証されます。
Bartek Banachewicz

5

画像上で解析を実行して各スプライトの境界矩形を特定し、それらの境界矩形を並べ替えることができます(おそらく最小X、次にYを増やすことで)。スプライトシートのフレームに対応する境界領域のセットがあります。

このプロセスは比較的高価になる可能性があるため、たとえばゲームのビルドプロセスの一環として、オフラインで実行することをお勧めします。その後、境界領域情報を、対応するスプライトシートイメージと共に保存するファイルにシリアル化できます。実行時に、イメージと境界定義ファイルの両方をロードし、個々のスプライトにアクセスするために必要な情報を取得します。

しかし、それは言うよりも簡単です。基本的に、マシンビジョンの問題である機能検出、特にブロブ検出を実行する必要があります。また、画像を(白黒に)しきい値処理し、エッジ検出技術を使用することもできますます。これらのテクニックの背後にある関連する数学は、私ができるよりもそれらのリンクではるかによく説明されており、あなたがその数学を自分で実装することを気にしない場合、あなたを助けることができるいくつかのライブラリがあります 次の一連のリンクは、私にとって最も有望だと思われました。


1
+1。正しいスプライトの境界を見つけるには、コンピューター認識/画像操作のスキルが必要になることに同意します。たとえば、亀の甲羅のアニメーションを見ると、不可能なこともあります。他のアニメーションフレームに対する相対的な正しい位置を判断するのは難しいでしょう。そして用として、なぜ:それの最も可能性が高いため、テクスチャ空間の最適な使用の。通常、座標を持つファイルにはこのようなスプライトシートを提供する必要がありますが、Google画像検索から単純に取得する場合は、この情報が不足している可能性があります。
bummzack

あなたは良い点を挙げます:私の答えはスプライトの起源の問題に対処していません。ぴったり合った境界矩形を見つけるだけで、不均一なスプライトを持つシートの場合、各フレームの原点を知ることはかなり重要です。これは、原点が常に(幅/ 2、最大Y)または何かになるなど、いくつかの(おそらくドメイン固有の)仮定をしない限り、自動的に実行するのは難しいでしょう。

4

そのような不均一なスプライトシート用に独自のツールを作成しました。オフセットの編集などが可能です。アイデアを示すスクリーンショットは次のとおりです。

ここに画像の説明を入力してください


これは、非均一アニメーションから1つのアニメーションのみを含む均一スプライトシートを作成するように見えますか?それとも私はこれを誤解していますか?
ベン

いいえ、不均一なスプライトシートを開き、スプライトの周りに長方形を描画します(正しいサイズに自動的に縮小します)。Iveは、各アニメーションを再生し、必要に応じてオフセットを調整できることを繰り返すことで、アニメーションを作成しました。
匿名

あなたがそこで作った非常にきちんとしたツールのようです。ツールを共有することに注意しますか?
-eckyputrady

@eckyputrady、すみませんが、完成にはほど遠いですが、別のツールをお勧めします(基本的に私にインスピレーションを与えました)。ここで見つけることができます:colourclash.com/sprite_buddy/sprite_buddy.html-
匿名

0

texturepackerをご覧ください

http://www.texturepacker.com/

このようなファイルを出力します(事前設定に依存します)

    {
    "filename": "image_front_1",
    "frame": {"x":1,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":2,"w":36,"h":40},
    "sourceSize": {"w":36,"h":40}
},
{
    "filename": "image_front_2.png",
    "frame": {"x":36,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":36,"h":42},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_3.png",
    "frame": {"x":71,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_4.png",
    "frame": {"x":106,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
}

このデータを使用すると、画像から簡単に別の長方形を取得できます。


これは質問を使用する技術ではありません。私の意見では、ツールへのリンクとその出力の例で答えるだけでは十分ではありません。
マイケルハウス

-1

spritebuddy.comは私にとって素晴らしい仕事をしてくれました。サイト自体でヘルプが見つかりませんでしたが、このGoogleグループの投稿ではそれについて非常によく説明しています。スプライトの境界を自動推測し、調整し、アニメーションシーケンスに配置できます。次に、このすべてのメタデータファイルをJSONまたはXMLで出力します。その後、ゲーム内のデータファイルを解析して、正しい境界矩形を取得するだけです。


1
これは質問を使用する技術ではありません。さらに、このツールはすでにコメントの1つで提案されています。
マイケルハウス

回答を更新しましたが、OPの質問「オフセット_x、オフセット_y、幅、高さを判断したい」に答えていないことに同意しません。これがゲームの実行時(ひどく非パフォーマンスになる)または前に発生する必要があるかどうかは指定されていません。「編集:[...]質問を言い換えて、ゲーム内でスプライトシートを使用する実際のプロセスについてより包括的にすること」、これが私のプロセスです。spritebuddyを使用して適切なJSONファイルを生成し、ゲームで解析して必要なデータを取得します。
CletusW

1
@CletusW:良い答えはそのツールがあなたのプロセスにうまく機能する理由、それが何をするのか、どのように役立つのかなどを説明します。お気に入りの例にリンクすると、答えの肉ではなく単なるボーナスになります。
ショーンミドルディッチ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.