Pixi.js: Упаковка полигонов

Созданный на 13 дек. 2015  ·  33Комментарии  ·  Источник: pixijs/pixi.js

Я медленный, но 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

Самый полезный комментарий

Он будет добавлен в v5, я его предоставлю.

Все 33 Комментарий

Говорят, что его добавили в Unity 1 год назад.

классно.
мобильному всегда не хватает памяти.
так нужно это ..
как вы относитесь к производительности за счет упаковки текстур полигонов

Это великолепно! @SeminYun, если вы не нашли информацию о производительности, вот тест, который они сделали на iphone 4s: https://www.codeandweb.com/blog/2015/10/01/cocos2d-x-performance-optimization
без обрезки изображение получилось со скоростью 36 кадров в секунду и с обрезкой 60 кадров в секунду! Кстати об улучшении! Такая поддержка текстур будет очень и очень приветствоваться в pixi !! :)

Примечание. Это преимущество производительности достигается за счет использования ЦП. Что-то уже строго ограничено в JS. Я хотел бы протестировать это в pixi и посмотреть, в чем разница.

Хороший. Наряду с улучшением производительности, это определенно уменьшит размер некоторых таблиц спрайтов, в то время как изображения могут поместиться в альфа-отверстия! Таким образом, многие таблицы спрайтов будут загружаться быстрее. Хорошая вещь!

Скоро добавлю в WIP ветку v4.1 :)

Нельзя ли отрендерить это через сетку вместо создания новой функции?

@englercj на 100% правильно. Новая установка Sprite прекрасно подойдет и для этого!

УФ и геометрия должны быть на стороне «текстуры» или «модели», а не, например, поэтому сетка не является решением.

Есть обновления?

Поскольку режим многоугольника по-прежнему отключен по умолчанию для формата данных PixiJS, похоже, что многоугольники не поддерживаются в Pixi.

Как следует из последней пары комментариев, он должен быть где-то в повестке дня выпуска PixiJ, начиная с версии 4.1. Может ли кто-нибудь подтвердить, что эта функция уже вошла в PIXI 4. *?

И если он поддерживается, кто-нибудь знает, как включить эту функцию в формате TexturePacker for PixiJS json?

Он будет добавлен в v5, я его предоставлю.

Чудесно! Большое спасибо.

Отличный @ivanpopelyshev !

Есть новости здесь?

Новостей нет, но никто не подтвердил, что это им серьезно нужно. Я могу сделать это как плагин для v4, но кто когда-нибудь его протестирует и подтвердит, что он работает? А v5 находится в стадии альфа, поэтому никто не будет использовать его несколько месяцев, если я добавлю его туда.

Новостей нет, но никто не подтвердил, что это им серьезно нужно.

Хм? Вы имеете в виду, кроме нас?

Я уверен, что для многих проектов это может значительно оптимизировать "электронные таблицы" с различными форматами изображений, потому что каждое изображение может быть намного ближе друг к другу. Мне уже это было нужно несколько раз, чтобы иметь возможность создавать электронные таблицы, в которых я помещал маленькие изображения в прозрачную часть большого изображения, чтобы получить меньшее изображение для вывода в электронную таблицу.

Не могу говорить за других, но я бы часто использовал эту функцию

Пожалуйста, напишите электронное письмо @GoodBoyDigital , если он согласится, я сосредоточусь на этом.

Мне нужна эта функция.

Думаю, пора пометить его для v5.

Доступен ли он как плагин для v4.x? или мне следует дождаться v5 для этой функции?

V5 наверняка, это будет невероятно легко реализовать с новыми системами!
(с дозированием!)

В среду, 6 июня 2018 г., в 10:05, 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
Адрес: блок B1, пристань сватов, Хомертон-роуд, Лондон, E9 5FF.

мне нужна эта функция

Этот плагин поддерживает упаковку полигонов: https://github.com/gameofbombs/pixi-heaven

Используйте PIXI.heaven.Sprite

@ivanpopelyshev Спасибо за хороший отзыв о pixi-heaven. Обязательно взгляните на это. Но для простой упаковки полигонов этот плагин кажется немного перегруженным для простой упаковки полигонов. README заявляет, что ему даже требуется плагин Spine (хотя мы не используем Spine в проекте), и говорится, что его использование требует затрат производительности. Я только что бегло просмотрел это репо, так что, возможно, я что-то здесь упускаю, но я не вижу причин, по которым упаковка полигонов должна ставить под угрозу производительность во время анимации и нуждаться в Spine.

Я ищу способ сделать таблицы спрайтов как можно меньшими и эффективными по ширине и высоте, чтобы ускорить загрузку. Я полагал, что для многих проектов в таблицах спрайтов есть много пустых мест, потому что изображения на 100% прозрачны на больших участках. Его можно заполнить меньшими изображениями, которые теперь должны выходить за пределы прямоугольников этих прозрачных изображений.

С помощью упаковки в многоугольники мы могли бы сделать таблицы спрайтов намного меньше, как в этом упрощенном примере (каждый разный цвет - это отдельный спрайт):
polygon packing
Вы можете видеть здесь, что большая круглая форма теперь позволяет маленьким формам заполнять прозрачное отверстие, которое обычно является просто большим недостающим пространством. А справа вы видите, что два треугольника могут использовать одно и то же пространство, что приводит к уменьшению используемого пространства на 50%.
С обычными таблицами спрайтов это привело бы к очень большой таблице спрайтов, где всем изображениям нужны полные прямоугольники, даже если они прозрачны для больших областей, что приведет к гораздо большему размеру таблицы спрайтов и займет гораздо больше времени для загрузки.

Эта функция не только сделает таблицы спрайтов намного меньше во многих случаях, например, сообщение о себе выше, но даже вызовы отрисовки могут быть быстрее, потому что вместо рисования большого прямоугольника нужно рисовать только меньшие многоугольники. Но что касается последнего, вы знаете об этом намного больше, чем я.

На сайте Texturepacker также есть статья о большом увеличении производительности за счет упаковки полигонов:
https://www.codeandweb.com/texturepacker/tutorials/cocos2d-x-performance-optimization

И они предоставляют еще один пример из реального мира, где это очень полезно и очень эффективно:
tp-screenshot-2652

Итак, чтобы заключить; Я не уверен, что PIXI.heaven.Sprite - решение этой проблемы, и я бы ожидал, что производительность вырастет, а не упадет.

+1 за эту функцию

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Я вижу здесь несколько +1, и 6 июня 2018 года @GoodBoyDigital написал:
«V5 наверняка, это будет невероятно легко реализовать с новыми системами!
(с дозированием!) "

Теперь мы читаем, что ярлык «Решение: не исправить» был добавлен устаревшим ботом, и проблема была (автоматически) закрыта. Ранее нам сообщили, что к этим «ботам» следует относиться с недоверием, поэтому я не уверен:

Эта функция по-прежнему очень приветствуется. Это все еще в разработке для v5?

Я думаю, что @CodeAndWeb сначала нужно включить многоугольник в texturePacker для структуры pixijs.
Вроде отключили.

Вы можете использовать формат «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 - это вершины в текстурном атласе
  • треугольники - это треугольники, построенные из вершин

@djmisterjon Также не так сложно изменить шаблон для выходных данных в texturePacker самостоятельно или создать свой собственный шаблон для выходных данных (что на самом деле довольно здорово!):
https://www.codeandweb.com/texturepacker/documentation/custom-exporter

@Friksel интересно, спасибо за подсказки, может быть очень полезно для многих кастомных систем.

Привет, есть ли поддержка этого в PixiV5? Если нет, возможно, кто-то может выделить, какую функцию из Pixiv5 использовать для ее реализации? Возможно, будет интересно реализовать это для моего проекта.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги