Pixi.js: 폴리곤 패킹

에 만든 2015년 12월 13일 · 33코멘트 · 출처: pixijs/pixi.js

Im slowpoke 하지만 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
이미지는 트리밍되지 않은 36fps, 트리밍된 60fps! 개선에 대한 이야기! 이 텍스처 지원은 pixi에서 매우 환영받을 것입니다!! :)

Friksel 에 2016년 04월 30일

참고: 성능 이점은 CPU 비용으로 발생합니다. JS에서 이미 심각한 제한 사항이 있습니다. 나는 이것을 pixi에서 벤치마킹하고 그 차이가 어떤지 보고 싶습니다.

englercj 에 2016년 04월 30일

멋진. 이 성능 이점 외에도 이미지가 알파 구멍 안에 들어갈 수 있는 동안 일부 스프라이트 시트는 확실히 작아질 것입니다! 따라서 많은 스프라이트시트가 더 빨리 로드됩니다. 좋은 것!

Friksel 에 2016년 04월 30일

곧 WIP 브랜치 v4.1에서 구현하겠습니다 :)

ivanpopelyshev 에 2016년 04월 30일

👍3

새 기능을 만드는 대신 메시를 통해 렌더링할 수 없습니까?

englercj 에 2016년 09월 28일

@englercj 100% 맞습니다. 새로운 Sprite 설정은 이것을 잘 수용할 것입니다!

GoodBoyDigital 에 2016년 09월 28일

uvs 및 지오메트리는 인스턴스가 아닌 "텍스처" 또는 "모델" 쪽에 있어야 하므로 메시는 솔루션이 아닙니다.

ivanpopelyshev 에 2016년 10월 01일

모든 업데이트?

nikolayh 에 2017년 02월 22일

👍1

폴리곤 모드는 여전히 PixiJS 데이터 형식에 대해 기본적으로 비활성화되어 있기 때문에 폴리곤은 Pixi에서 지원되지 않는 것처럼 보입니다.

마지막 몇 가지 의견에서 알 수 있듯이 버전 4.1에서와 같이 PixiJ의 릴리스 의제 어딘가에 있어야 합니다. 누군가 이 기능이 PIXI 4.*에 이미 포함되었는지 확인할 수 있습니까?

그리고 지원되는 경우 누군가가 이 기능을 PixiJS json 형식용 TexturePacker에서 활성화하는 방법을 알고 있습니까?

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는 알파 단계이므로 거기에 추가하면 아무도 몇 달 동안 사용하지 않을 것입니다.

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 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, Matchmaker Wharf, Homerton Road, London, E9 5FF

GoodBoyDigital 에 2018년 06월 06일

❤2 👍2

이 기능이 필요합니다

djmisterjon 에 2018년 06월 06일

이 플러그인은 폴리곤 패킹을 지원합니다: https://github.com/gameofbombs/pixi-heaven

PIXI.heaven.Sprite

ivanpopelyshev 에 2018년 06월 29일

@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가 이에 대한 솔루션인지 확신하지 못하며 성능이 저하되지 않고 향상될 것으로 기대합니다.

Friksel 에 2018년 07월 02일

👍1

이 기능에 대해 +1

kane-mason 에 2019년 02월 19일

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

stale[bot] 에 2019년 05월 20일

여기에서 +1이 표시되고 2018년 6월 6일 @GoodBoyDigital이 다음과 같이 썼습니다.
"V5는 확실히 새로운 시스템으로 구현하기가 엄청나게 쉬울 것입니다!
(배칭으로!)"

이제 '해결: 수정하지 않음' 레이블이 오래된 봇에 의해 추가되었고 문제가 (자동으로) 종료되었음을 읽었습니다. 이전에 우리는 이 '봇'을 소금 한 알과 함께 섭취해야 한다는 정보를 받았으므로 확실하지 않습니다.

이 기능은 여전히 환영합니다. 아직 v5용 파이프라인에 있습니까?

Friksel 에 2019년 06월 05일

내가 @CodeAndWeb 처음 pixijs 프레임 워크 texturePacker의 폴리곤 수 있도록 필요가 있다고 생각합니다.
비활성화 된 것 같습니다.

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 에 2019년 06월 06일

👍2

@djmisterjon 또한
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 댓글

>

관련 문제