Pixi.js: ポリゴンパッキング

作成日 2015年12月13日  ·  33コメント  ·  ソース: pixijs/pixi.js

私はslowpokeですが、 TexturePackerはポリゴンをサポートしています。 ここで、新しいSpriteRendererが必要です。 そのことをv4にタグ付けしてください。

dude

フォーマット

{"frames": {
"animal_extractor.png":
{
    "frame": {"x":2,"y":326,"w":164,"h":136},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":164,"h":136},
    "sourceSize": {"w":164,"h":136},
    "pivot": {"x":0.5,"y":0.5},
    "vertices": [ [140,34], [164,76], [164,88], [95,127], [74,136], [50,136], [0,108], [0,62], [32,19], [86,15], [101,0], [106,0] ],
    "verticesUV": [ [142,360], [166,402], [166,414], [97,453], [76,462], [52,462], [2,434], [2,388], [34,345], [88,341], [103,326], [108,326] ],
    "triangles": [ [9,10,11], [3,8,9], [7,3,5], [3,0,1], [5,6,7], [5,3,4], [3,7,8], [3,9,0], [3,1,2], [0,9,11] ]
}
}
Stale 🙏 Feature Request 🥶 Low Priority
ソース
picture ivanpopelyshev
🎉1

最も参考になるコメント

それはv5で追加されるでしょう、私はそれを提供します。

picture ivanpopelyshev 2017年06月26日
👍6 ❤1

全てのコメント33件

1年前に一丸となって追加されたと言われています

ivanpopelyshev picture ivanpopelyshev 2015年12月13日

驚くばかり。
モバイルは常に十分なメモリではありません。
だからそれが必要です。
ポリゴンテクスチャパッキングによるパフォーマンスについてどう思いますか

SeminYun picture SeminYun 2016年01月19日

これはブリリアントです！ @SeminYunパフォーマンスに関する情報が見つからなかった場合は、iphone 4sで行ったテストを次に示します：https：//www.codeandweb.com/blog/2015/10/01/cocos2d-x-performance-optimization
画像は36fpsをトリミングせず、60fpsをトリミングしました。 改善について語る！ このtexturesupportはpixiで大歓迎です!! :)

Friksel picture Friksel 2016年04月30日

注：そのパフォーマンスの利点は、CPUを犠牲にしてもたらされます。 JSではすでに何かがひどく制限されています。 これをpixiでベンチマークして、違いがどのようなものかを確認したいと思います。

englercj picture englercj 2016年04月30日

良い。 うまくいけば、このパフォーマンスの利点に加えて、画像がアルファホール内に収まる一方で、これによりいくつかのスプライトシートが確実に小さくなります！ したがって、多くのスプライトシートはより速くロードされます。 良いこと！

Friksel picture Friksel 2016年04月30日

すぐにWIPブランチv4.1に実装します:)

ivanpopelyshev picture ivanpopelyshev 2016年04月30日
👍3

これは、新しい機能を作成する代わりにメッシュを介してレンダリングできませんでしたか？

englercj picture englercj 2016年09月28日

@englercj 100％正解です。 新しいスプライトのセットアップもこれにうまく対応します！

GoodBoyDigital picture GoodBoyDigital 2016年09月28日

uvとジオメトリは、インスタンスではなく「テクスチャ」側または「モデル」側にある必要があるため、メッシュはソリューションではありません。

ivanpopelyshev picture ivanpopelyshev 2016年10月01日

すべてのアップデート？

nikolayh picture nikolayh 2017年02月22日
👍1

PixiJSデータ形式ではポリゴンモードがデフォルトで無効になっているため、Pixiではポリゴンがサポートされていないようです。

最後のいくつかのコメントが示唆しているように、バージョン4.1以降のPixiJsのリリースアジェンダのどこかにあるはずです。 この機能がすでにPIXI4。*に組み込まれていることを誰かが確認できますか？

また、サポートされている場合、PixiJS json形式のTexturePackerでこの機能を有効にする方法を誰かが知っていますか？

Jorisslagter picture Jorisslagter 2017年06月26日

それはv5で追加されるでしょう、私はそれを提供します。

ivanpopelyshev picture ivanpopelyshev 2017年06月26日
👍6 ❤1

素晴らしい！ どうもありがとう。

Jorisslagter picture Jorisslagter 2017年06月27日

素晴らしい@ivanpopelyshev ！

Friksel picture Friksel 2017年07月24日

ここに何かニュースはありますか？

gle6as picture gle6as 2017年09月15日

ニュースはありませんが、真剣にそれが必要であることを誰も確認していません。 v4のプラグインとして作成できますが、誰がテストして機能することを確認しますか？ また、v5はアルファ段階にあるため、そこに追加しても、数か月間は誰も使用しません。

ivanpopelyshev picture ivanpopelyshev 2017年09月16日

ニュースはありませんが、真剣にそれが必要であることを誰も確認していません。

は？ つまり、私たちを除いて？

多くのプロジェクトで、これにより、さまざまな画像形式の「スプレッドシート」を最適化できると確信しています。これは、すべての画像が互いに非常に接近している可能性があるためです。 大きな画像の透明な部分に小さな画像を入れて小さなスプレッドシート出力画像を作成するスプレッドシートを作成できるようにするために、すでに数回必要でした。

他の人のことを話すことはできませんが、私はこの機能をたくさん使います

Friksel picture Friksel 2017年09月16日
👍1

@GoodBoyDigitalにメールを書いてください。彼が同意すれば、私はそのことに集中します。

ivanpopelyshev picture ivanpopelyshev 2017年09月16日

この機能が必要です。

finscn picture finscn 2017年10月09日
👍5

v5用にタグを付ける時が来たと思います。

finscn picture finscn 2017年12月14日
👍3

v4.xのプラグインとして利用できますか？ または、この機能のためにv5を待つ必要がありますか？

sudhalucky picture sudhalucky 2018年06月06日

確かにV5、これは新しいシステムで信じられないほど簡単に実装できます！
（バッチ処理あり！）

10:05の水曜日、2018年6月6日にはsudhalucky [email protected]書きました：

v4.xのプラグインとして利用できますか？ または、これをv5で待つ必要があります
特徴？

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/pixijs/pixi.js/issues/2243#issuecomment-394998933 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AC998nI2I61yvKnAEcwik_-jBCsiGUnvks5t55tigaJpZM4G0VPE
。

>>

技術指導者

ホーム： www.goodboydigital.com
電話番号：020 8533 1177
住所：Unit B1、Matchmakers Wharf、Homerton Road、London、E9 5FF

GoodBoyDigital picture GoodBoyDigital 2018年06月06日
❤2 👍2

この機能が必要です

djmisterjon picture djmisterjon 2018年06月06日

このプラグインはポリゴンパッキングをサポートしています： //github.com/gameofbombs/pixi-heaven

PIXI.heaven.Sprite使用する

ivanpopelyshev picture ivanpopelyshev 2018年06月29日

@ ivanpopelyshevpixi -heavenについての素晴らしいヒントをありがとう。 間違いなくそれを見てください。 しかし、ポリゴンパッキングだけの場合、そのプラグインはポリゴンパッキングだけの場合は少し過負荷になります。 READMEには、Spineプラグインも必要であると記載されており（プロジェクトではSpineを使用していませんが）、使用するにはパフォーマンスが必要であると記載されています。 そのリポジトリをざっと見ただけなので、ここで何かが欠けている可能性がありますが、ポリゴンパッキングがアニメーション中のパフォーマンスを妥協し、Spineを必要とする理由はわかりません。

私が探しているのは、スプライトシートの幅と高さをできるだけ小さく効率的に保ち、読み込み時間を短縮する方法です。 多くのプロジェクトでは、画像が広い領域で100％透明であるため、スプライトシートに多くの空白があると考えました。 それは、これらの透明な画像の長方形の外側に出なければならない小さな画像で埋めることができます。

ポリゴンパッキングを使用すると、この単純化された例のように、スプライトシートをはるかに小さくすることができます（色が異なればスプライトも異なります）。
polygon packing
ここで、大きな丸い形状により、通常は大きな欠落スペースである透明な穴を小さな形状で埋めることができます。 右側には、2つの三角形が同じスペースを使用できるため、使用スペースが50％減少していることがわかります。
通常のスプライトシートでは、これにより非常に大きなスプライトシートが作成され、すべての画像に完全な長方形が必要になります。ただし、大きな領域では透明であるため、スプライトシートがはるかに大きくなり、読み込みに時間がかかります。

この機能は、多くの場合、スプライトシートをはるかに小さくするだけでなく、上記の自分の投稿のように、大きな長方形を描画する代わりに小さなポリゴンのみを描画する必要があるため、ドローコールも高速になる可能性があります。 しかし後者の場合、あなたはそれについてもっとよく知っているので、私はそうです。

TexturepackerのWebサイトには、ポリゴンパッキングによるパフォーマンスの大幅な向上に関する記事もあります。
https://www.codeandweb.com/texturepacker/tutorials/cocos2d-x-performance-optimization

そして、これが非常に便利で非常に効率的な別の実例を提供します。
tp-screenshot-2652

結論として、 私はPIXI.heaven.Spriteがこれに対する解決策であるとは確信していません。パフォーマンスが低下するのではなく、上昇することを期待しています。

Friksel picture Friksel 2018年07月02日
👍1

この機能の+1

kane-mason picture kane-mason 2019年02月19日

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

stale[bot] picture stale[bot] 2019年05月20日

私はここにいくつかの+1を見て、2018年6月6日@GoodBoyDigitalは次のように書いています：
「確かにV5、これは新しいシステムで信じられないほど簡単に実装できます！
（バッチ処理あり！）」

ここで、「解決策：修正しない」ラベルが古いボットによって追加され、問題が（自動的に）クローズされたと読みました。 以前、これらの「ボット」は一粒の塩で撮影されると知らされていたので、よくわかりません。

この機能はまだ大歓迎です。 それはまだv5のパイプラインにありますか？

Friksel picture Friksel 2019年06月05日

私は@CodeAndWebが最初pixijsフレームワークのtexturePackerでポリゴンを有効にする必要があると思います。
無効になっているようです。

djmisterjon picture djmisterjon 2019年06月05日

「JSON（ハッシュ）」形式を使用して試すことができます。これにより、ポリゴンパッカーは有効になりますが、PixiJS固有のもの（アニメーション検出）は無効になります。 残りの形式は同じです。

各スプライトは、3つの追加エントリを取得します。

"vertices": [ [147,74], [194,68], [204,200], [153,266], [56,267], [15,220], [1,180], [11,72], [64,70], [66,3], [132,1] ],
"verticesUV": [ [194,901], [200,948], [68,958], [2,907], [1,810], [48,769], [88,755], [196,765], [198,818], [265,820], [267,886] ],
"triangles": [ [8,9,10], [6,7,8], [5,0,2], [6,0,5], [5,3,4], [6,8,0], [0,1,2], [5,2,3], [0,8,10] ]
  • 頂点は、スプライト座標系のポイントです
  • verticesUVは、テクスチャアトラスの頂点です。
  • 三角形は、頂点から作成された三角形です。
CodeAndWeb picture CodeAndWeb 2019年06月06日
👍2

@djmisterjonまた、texturePackerの出力用のテンプレートを自分で変更したり、出力用の独自のカスタムテンプレートを作成したりすることもそれほど難しくありません（これは実際にはかなり素晴らしいです！）：
https://www.codeandweb.com/texturepacker/documentation/custom-exporter

Friksel picture Friksel 2019年06月06日
👍1

@Friksel興味深い、ヒントのおかげで、それは多くのカスタムシステムに非常に役立ちます。

djmisterjon picture djmisterjon 2019年06月06日
👍1

こんにちは、PixiV5でこれをサポートしていますか？ 誰かがそれを実装するためにPixiv5からどの機能を使用するかを強調することができない場合はどうでしょうか？ 私のプロジェクトにこれを実装することに興味があるかもしれません。

cloudmark picture cloudmark 2020年08月25日
👍2
このページは役に立ちましたか？
0 / 5 - 0 評価

関連する問題

lunabunn picture lunabunn  ·  3コメント
MRVDH picture MRVDH  ·  3コメント
YuryKuvetski picture YuryKuvetski  ·  3コメント
gaccob picture gaccob  ·  3コメント
st3v0 picture st3v0  ·  3コメント