Pixi.js: 多边形包装

创建于 2015-12-13 · 33评论 · 资料来源: pixijs/pixi.js

我很慢，但它TexturePacker 支持多边形。现在我们需要新的 SpriteRenderer。请为 v4 标记那个东西。

格式

{"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

资料来源

ivanpopelyshev

🎉1

最有用的评论

它将在 v5 中添加，我会提供。

ivanpopelyshev 于 2017-06-26

👍6 ❤1

所有33条评论

人家说是1年前统一加的

ivanpopelyshev 于 2015-12-13

惊人的。
手机总是内存不够。
所以需要那个..
你如何看待多边形纹理包装的性能

SeminYun 于 2016-01-19

这太棒了！ @SeminYun如果您没有找到有关性能的信息，这里是他们在 iphone 4s 上进行的测试：https://www.codeandweb.com/blog/2015/10/01/cocos2d-x-performance-optimization
图像未修剪 36 fps，修剪 60 fps！谈改进！这种纹理支持在 pixi 中非常非常受欢迎！！ :)

Friksel 于 2016-04-30

注意：性能优势是以 CPU 为代价的。 JS 中已经严格限制了一些东西。我很想在 pixi 中对此进行基准测试，看看有什么不同。

englercj 于 2016-04-30

好的。除了希望这种性能优势之外，这肯定会使一些 spritesheet 变小，而图像可以放入 alpha 孔！所以很多精灵表会加载得更快。好东西！

Friksel 于 2016-04-30

我很快就会在 WIP 分支 v4.1 中实现它:)

ivanpopelyshev 于 2016-04-30

👍3

这不能通过网格渲染而不是创建新功能吗？

englercj 于 2016-09-28

@englercj 100% 正确。新的 Sprite 设置也将很好地适应这一点！

GoodBoyDigital 于 2016-09-28

uvs 和几何体必须在“纹理”或“模型”一侧，而不是在实例中，因此 Mesh 不是解决方案。

ivanpopelyshev 于 2016-10-01

任何更新？

nikolayh 于 2017-02-22

👍1

由于 PixiJS 数据格式默认情况下仍然禁用多边形模式，因此看起来 Pixi 不支持多边形。

正如最后几条评论所暗示的那样，从 4.1 版开始，它应该在 PixiJs 的发布议程上。有人可以确认这个功能已经进入 PIXI 4.* 了吗？

如果支持，有人知道如何在 TexturePacker 中为 PixiJS json 格式启用此功能吗？

Jorisslagter 于 2017-06-26

它将在 v5 中添加，我会提供。

ivanpopelyshev 于 2017-06-26

👍6 ❤1

精彩的！太感谢了。

Jorisslagter 于 2017-06-27

伟大的@ivanpopelyshev ！

Friksel 于 2017-07-24

这里有消息吗？

gle6as 于 2017-09-15

没有消息，但没有人证实他们真的需要它。我可以将它作为 v4 的插件，但谁会测试它并确认它有效？而且 v5 处于 alpha 阶段，所以如果我在那里添加它，几个月内没有人会使用它。

ivanpopelyshev 于 2017-09-16

没有消息，但没有人证实他们真的需要它。

嗯？你是说，除了我们？

我确信对于很多项目，这可以优化具有不同图像格式的“电子表格”，因为每个图像可以彼此更接近。我已经需要它几次了，以便能够创建电子表格，将小图像放在大图像的透明部分，以获得更小的电子表格输出图像。

不能代表其他人，但我会经常使用这个功能

Friksel 于 2017-09-16

👍1

请给@GoodBoyDigital写电子邮件，如果他同意，那么我会专注于那件事。

ivanpopelyshev 于 2017-09-16

我需要这个功能。

finscn 于 2017-10-09

👍5

我认为是时候为 v5 标记它了。

finscn 于 2017-12-14

👍3

它可以作为 v4.x 的插件使用吗？还是我应该等待 v5 才能使用此功能？

sudhalucky 于 2018-06-06

V5 肯定，这将非常容易在新系统中实现！
（带批处理！）

在星期三，2018年6月6日在10:05 AM 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 于 2018-06-06

❤2 👍2

我需要这个功能

djmisterjon 于 2018-06-06

本插件支持多边形打包： https :

使用PIXI.heaven.Sprite

ivanpopelyshev 于 2018-06-29

@ivanpopelyshev感谢您提供有关 pixi-heaven 的好提示。一定要看看。但是对于仅多边形打包，该插件对于多边形打包似乎有点过载。 README 声明它甚至需要 Spine 插件（尽管我们不在项目中使用 Spine）并且它说使用它会降低性能。我只是快速浏览了那个 repo，所以我可能在这里遗漏了一些东西，但我看不出有任何理由为什么多边形打包需要在动画期间妥协性能并且需要 Spine。

我正在寻找的是一种使 spritesheets 在宽度和高度上尽可能小和高效的方法，以加快加载时间。我认为对于很多项目，精灵表中有很多空白，因为图像在大区域上是 100% 透明的。可以用较小的图像填充，这些图像现在必须超出这些透明图像的矩形。

通过多边形打包，我们可以使 spritesheets 小很多，就像这个简化的例子（每个不同的颜色都是不同的 sprite）：
polygon packing
你可以在这里看到大圆形现在允许小形状填充透明孔，通常只是大的缺失空间。在右侧，您会看到两个三角形可以使用相同的空间，从而导致已用空间减少 50%。
对于普通的 spritesheet，这将导致非常大的 spritesheet，其中所有图像都需要完整的矩形，即使它们对于大区域是透明的，这会导致更大的 spritesheet 并且需要更多的时间来加载。

在很多情况下，此功能不仅可以使 spritesheet 变得更小，例如上面的帖子，甚至绘图调用也可以更快，因为不需要绘制大矩形，只需绘制较小的多边形即可。但是对于后者，您对此了解得比我多得多。

Texturepacker 网站上还有一篇关于使用多边形打包大幅提升性能的文章：
https://www.codeandweb.com/texturepacker/tutorials/cocos2d-x-performance-optimization

他们提供了另一个非常有用且非常有效的真实示例：
tp-screenshot-2652

所以总结一下; 我不相信 PIXI.heaven.Sprite 是一个解决方案，我希望性能会上升，而不是下降。

Friksel 于 2018-07-02

👍1

+1 此功能

kane-mason 于 2019-02-19

此问题已自动标记为陈旧，因为它最近没有活动。如果没有进一步的活动发生，它将被关闭。感谢你的贡献。

stale[bot] 于 2019-05-20

我在这里看到了一些+1，2018年 6 月 6 日
“当然，V5，这将非常容易在新系统中实现！
（带批处理！）”

现在我们读到 'Resolution: Won't Fix' 标签已被陈旧的机器人添加并且问题已（自动）关闭。早些时候我们被告知这些“机器人”将被一粒盐带走，所以我不确定：

这个功能还是很受欢迎的。 v5 还在筹备中吗？

Friksel 于 2019-06-05

我认为@CodeAndWeb需要首先在 pixijs 框架的
它似乎禁用。

djmisterjon 于 2019-06-05

您可以使用“JSON (Hash)”格式来尝试它——它启用多边形打包器但禁用一些特定于 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 于 2019-06-06

👍2

@djmisterjon自己更改 texturePacker 中的输出模板或为输出创建自己的自定义模板也并不困难（实际上非常棒！）：
https://www.codeandweb.com/texturepacker/documentation/custom-exporter

Friksel 于 2019-06-06

👍1

@Friksel很有趣，感谢您的提示，它对许多自定义系统非常有用。

djmisterjon 于 2019-06-06

👍1

您好，PixiV5 中对此有任何支持吗？如果没有，也许有人可以强调使用 Pixiv5 中的哪些功能来实现它？可能有兴趣为我的项目实现这个。

cloudmark 于 2020-08-25

👍2

此页面是否有帮助？

0 / 5 - 0 等级

Pixi.js: 多边形包装

最有用的评论

所有33条评论

>

相关问题