Pixi.js: 망막 지원

이 버그에 동의합니다. 참고로 이것이 일반적으로 처리되는 방법입니다. http://www.html5rocks.com/en/tutorials/canvas/hidpi/

이것은 또한 텍스트의 문제입니다.

devicePixelRatio가 2인 망막 화면이 있고 선명한 400x300 캔버스를 원한다고 가정해 보겠습니다. 이를 얻으려면 원하는 캔버스 크기에 devicePixelRatio(800x600)를 곱한 PIXI 렌더러를 초기화한 다음 CSS를 사용하여 수동으로 캔버스를 400x300으로 축소해야 합니다. 그리고 물론 위치, 글꼴 크기, 선 너비, 로드된 자산 등 모든 계산에 이 크기 조정을 통합해야 합니다.

나는 다음과 같은 것을 사용하고 있습니다.

var canvas = document.getElementById('game'),
    scale = window.devicePixelRatio,
    width = 400,
    height = 300,
    renderer = PIXI.autoDetectRenderer(width * scale, height * scale, canvas);
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

+1

이 문제를 곧 해결할 계획이 있습니까? 모든 크기, 위치, 글꼴 크기를 조정해야 하는 것은 정말 고통스럽습니다. 특히 표준 캔버스로 이 작업을 수행하는 매우 간단한 방법이 있는 경우.

스프라이트가 hidpi인지 아닌지에 따라 달라지기 때문에 이 라이브러리 크기를 수행하는 것은 어렵습니다. 당신의 스프라이트가 hidpi를 위해 확장되어야 하는지, 그리고 언제 확장될지 모르기 때문에 우리는 그것을 userland에 보관했습니다. 하지만 당신은 할.

안녕하세요 @englercj 입니다. 스프라이트는 사용자가 로드한 자산을 의미합니까?

@dcascais 네

@englercj 답변 감사합니다.

현재 렌더러 보기가 적절한 디스플레이 해상도를 얻기 위해 CSS 트릭(이전 링크에서 설명)으로 크기가 조정된 경우 스테이지에 추가된 다음 크기가 조정된 렌더러 보기로 렌더링되는 모든 항목은 그에 따라 크기가 조정되지 않고 픽셀을 유지합니다. 값이므로 기본적으로 절반 크기입니다.

여기에는 그래픽 컨텍스트, 텍스트 및 로드된 자산에서 동적으로 렌더링되는 콘텐츠가 포함됩니다.

다른 플랫폼에서는 다양한 화면 밀도에 대해 적절한 자산을 제공하는 것이 사용자의 책임이라고 가정하지만 내부는 대상으로 삼고 싶은 디스플레이 밀도를 쉽게 결정할 수 있는 축척 계수 속성이 있어 원활하게 작동합니다. 이것이 Pixi 사용자에게 더 간단한 접근 방식인지 궁금합니다. 적절한 자산에 대해서만 걱정하게 하고 축척 비율이 올바르게 설정되었는지 확인합니다.

스테이지에 추가된 콘텐츠의 예상 크기를 달성하는 방법에 대한 제안이 있습니까?

표시 목록에 있는 모든 항목의 x, y, 너비 및 높이 값을 수동으로 조정하고 텍스트의 경우 적절한 크기의 글꼴 이름을 가진 다른 문자열을 정의하면 매우 번거롭고 버그가 발생하기 쉽습니다. 프로젝트.

감사 해요.

흥미롭게도 이러한 시스템 중 일부가 어떻게 작동하는지 보고 싶습니다. 각 항목을 개별적으로 확장하는 한, 그것은 갈 길이 아닌 것 같습니다. 이것은 장면 그래프이므로 루트 DOC를 적절하게 확장할 수 없습니까?

@englercj , 나는 이것을 샌드박스에서 시도했고 적절한 크기로 다시 불어나는 동안 픽셀화되었습니다. 다른 행동을 기대하시겠습니까?

@bmantuano 선택한 알고리즘(가장 가까운, 선형, 쌍삼차 등)으로 확장될 것으로 예상합니다.

Chad, 여기에 응답해 주셔서 감사합니다. 스케일링 알고리즘에 관해서는 PIXI.scaleModes를 참조합니까? 그렇다면 쌍입방 옵션이 없는 것 같습니다.

@englercj 다음은 고해상도 디스플레이에서 선명한 텍스트와 그래픽(자산이 아닌 동적으로 그려짐)을 얻기 위해 우리가 무엇을 하려고 하는지 보여주는 몇 가지 JSFiddle입니다.

캔버스 크기 조정 및 크기 조정된 기본 표시 개체 컨테이너(크기는 정확하지만 흐릿하고 일부 문제 있음)
http://jsfiddle.net/hsv8Q

캔버스 크기 조정(선명하지만 잘못된 크기와 일부 문제가 있음)
http://jsfiddle.net/hsv8Q/1

스케일링 없음(크기는 정확하지만 흐릿함)
http://jsfiddle.net/hsv8Q/2

이것이 우리가 의미하는 바를 이해하는 데 도움이 되기를 바랍니다. 우리가 시도해야 할 다른 것이 있으면 알려주십시오.

바이올린을 추가해 주신 @dcascais 에게 감사드립니다. @englercj , 첫 번째 것은 당신이 제안한 것입니다. 맞습니까? 거기에 높은 DPI 장치에서 픽셀 화를 볼 수 있습니까?

@bmantuano 불행히도 테스트할 HDPI 장치가 없습니다 :( @GoodBoyDigital 또는 @photonstorm 이 볼 수 있도록 이 장치를 남겨두겠습니다.

@englercj , 지금까지 @arahlf 및 @n1313 , 해결 방법을 찾았습니까?

아니, 아직 :(

@bmantuano , 나는 여전히 이전 의견에 설명된 접근 방식을 사용하고 있으며 아무런 문제가 없습니다.

이에 대한 움직임이 있었습니까? 언급한 @n1313 크기 조정 방법을 사용했지만 레티나 장치에서 FPS를 파괴하고 있습니다.

어떤 아이디어?

@arahlf 및 @n1313 , thx 답장.

@GoodBoyDigital , 이것이 레이더에 있습니까? 향후 업데이트에서 예상할 수 있는 기능인지 또는 이를 해킹해야 하는지 여부에 대한 아이디어를 얻는 데 도움이 될 것입니다.

@GoodBoyDigital 여기에 내 목소리를 추가하고 싶었습니다. 저는 Pixi.js를 사용하여 대규모 멀티플레이어 온라인 게임을 개발하고 있습니다. 왜냐하면 우리가 Pixi.js를 가장 성능이 좋은 렌더링 엔진으로 식별했기 때문입니다.

이렇게 하면 레티나 지원을 추가하는 중입니다. :) 이 공간을 지켜보세요.

최고:+1:

@GoodBoyDigital , 환상적입니다! 업데이트해주셔서 감사합니다. 기대됩니다.

@GoodBoyDigital 멋지네요! 너무 빨리 돌아와 주셔서 감사합니다. 일반적으로 말하기 어렵다는 것을 압니다. 하지만 Pixi에 대한 망막 지원이 완료될 것이라고 생각하는 시기에 대해 매우 느슨한 예상을 저에게 알려주실 수 있습니까?

그 기간 내에 완료되지 않으면 견적을 기다리거나 불평하지 않을 것입니다. 일반적으로 우리가 얼마나 오래 기다릴 것이라고 생각하는지 궁금합니다!

안녕하세요, 새로운 "dev-retina" 브랜치를 git 허브에 업로드했습니다. 모두가 연극을 할 수 있다면 에이스가 될 것입니다. 거기에는 움직이는 부분이 많이 있으므로 dev 분기에 병합하기 전에 실제 프로젝트로 테스트하는 것이 좋을 것이라고 생각했습니다.

이제 렌더러에 옵션 매개변수가 있습니다. 새로운 옵션 중 하나는 해상도입니다. 따라서 렌더러를 망막으로 설정하려면 다음과 같이 렌더러를 만들 수 있습니다.

PIXI.autodetectRenderer(100, 100, {resolution:2})

모든 것이 동일하게 보일 것입니다. 그러나 해상도는 더 높을 것입니다 :)

BaseTextures에도 이제 해상도가 있습니다. 이미지가 고해상도인 경우 해상도를 2로 설정해야 합니다. 로드 시 해상도를 자동으로 2로 설정하는 방법은 이미지 이름에 @2x 가 있는 이미지를 추가하는 것입니다.

따라서 [email protected] 를 로드하면 pixi는 해상도가 2라고 가정합니다.

정말 연극을 하는 것이 최고! 하지만 이것이 생각보다 간단하지 않을 수 있으므로 질문해 주세요. :)

+1

헤이 맷. 이것은 좋아 보인다! 나는 Canvas가 멋지고 선명한 텍스트와 자산을 렌더링하도록 할 수 있었습니다. 크기와 위치는 내가 테스트한 한 올바르게 처리된 것 같습니다.

문제가 있는 것 같은 유일한 문제는 Pixi.Graphics 그리기 절차입니다. 나는 그것들을 선명하게 렌더링 할 수없는 것 같습니다. 그러나 렌더링의 크기와 위치는 정확합니다.

그래픽 개체도 망막이어야 합니까? 비트맵으로 캐싱하고 있습니까?
우연히 그래픽 개체? 아니면 바로 PIXI.graphics입니까?

2014년 9월 9일 화요일 오후 5시 32분에 dcascais [email protected]에서 다음과 같이 썼습니다.

헤이 맷. 이것은 좋아 보인다! Canvas를 멋지게 렌더링할 수 있었습니다.
선명한 텍스트와 자산. 크기와 위치가 올바르게 처리된 것 같습니다.
내가 테스트 한 한.

문제가 있는 것 같은 유일한 문제는 Pixi입니다.그래픽
그리기 절차. 나는 그것들을 선명하게 렌더링 할 수없는 것 같습니다. NS
그러나 렌더링의 크기와 위치는 정확합니다.

—
이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
.

매트 그로브

_기술 파트너_

전화: 07708 114496 :: www.goodboydigital.com
First Floor, Unit 9B, Queens Yard, White Post Lane, London, E9 5EN
굿보이©. 판권 소유.

@GoodBoyDigital 문제를 설명할 때 내가 가지고 있는 구성의 일부를 놓쳤습니다. 내가 가지고 있는 설정은 PIXI.Graphics 개체를 기반으로 하는 텍스처가 있는 PIXI.Sprite입니다.

문제와 결과 렌더링을 설명하는 데 도움이 되도록 JSFiddle을 만들었습니다.
이것은 PIXI.Sprite가 PIXI.Graphics에 기반한 텍스처를 얻는 경우 흐릿한 그래픽 출력을 보여줍니다.
http://jsfiddle.net/hsv8Q/13/

PIXI.Graphics를 직접 사용하는 이 설정은 정상적으로 작동합니다.
http://jsfiddle.net/hsv8Q/7/

잡았다! 걱정하지 마십시오. 원인이 무엇인지 정확히 알고 있습니다. :)
조정되면 알려드립니다. 고마워!

@GoodBoyDigital님 , 레티나 지원에 감사드립니다! 우리 고객에게 필요한 만큼 좋은 시기에 옵니다. :)

레티나 브랜치에서 발견한 한 가지 문제: 렌더링은 더 좋지만 히트 영역이 잘못 정렬됩니다. 캔버스의 크기는 조정되지만 적중 영역은 조정되지 않습니다. 따라서 화면 중앙에 있는 버튼을 터치하려면 화면 왼쪽 상단 중앙을 터치해야 실제로 터치됩니다.

이 화면에서 중앙에 있는 버튼을 누르려면 주황색 원(나중에 예제로 추가함)을 눌러야 실제로 누르게 됩니다. hitarea는 나머지와 함께 확장되지 않습니다.

autodetectRenderer 함수의 "해상도" 매개변수 정보 "window.devicePixelRatio"를 사용할 수 있습니까?

위에서 설명한 문제에 대한 빠른/더러운 해결 방법을 찾았습니다. 문제는 InteractionManager의 onTouchStart, onTouchMove 및 onTouchEnd 기능에 있는 것 같습니다. 해당 함수에서 touchData.global.x 및 touchData.global.y의 계산을 변경하고 this.resolution으로 나누어 수정하면 됩니다.

이렇게 하면 문제가 해결되는 것 같지만 훨씬 더 나은 솔루션이 있을 수 있습니다.

안녕하세요 @GillesVermeulen
마지막 커밋에서 히트 영역 항목을 조정했습니다. 최신 버전으로 시도하시겠습니까? 고마워!

@GoodBoyDigital님 , 빠른 답변과 지원에 감사드립니다. 하지만 말씀하신 커밋이 아직 Github에 없을 수도 있나요?

@GillesVermeulen - 이제 터치가 좋아야 합니다. 마우스 이벤트에 해상도 변경만 적용했습니다. 이제 모든 것이 제대로 작동하는지 알려주세요. 감사 해요!

오후 @dcascais ! 방금 generateTexture 함수의 해상도를 정의할 수 있도록 하는 수정 사항을 레티나 분기에 푸시했습니다.

따라서 멋진 파삭 파삭 한 망막 질감을 위해 다음과 같이 할 수 있습니다.

var retinaTexture = myGraphicsObject.generateTexture(2)
var normalTexture = myGraphicsObject.generateTexture(1)
var smallTexture = myGraphicsObject.generateTexture(0.5)

그것이 나중에 어떻게 작동하는지 알려주십시오. 감사 해요!

@GoodBoyDigital 좋아요 ! 이것은 이제 꽤 잘 작동합니다. 이에 대한 업데이트에 감사드립니다.

일반적인 질문으로. 이 고해상도 업데이트를 기반으로 성능, 메모리 또는 충돌 문제와 같은 다른 문제가 발생했습니까?

고마워요, 맷.

다행!

그에게 마법의 총알이 있었으면 좋겠다! 불행히도 더 높은 해상도는 본질적으로 모든 것이 두 배로 크기 때문에 성능과 메모리 소비에 영향을 미칩니다. Retina 이미지는 2배 많은 메모리를 차지하며 webGL/Canvas는 2배 많은 픽셀로 장면을 렌더링해야 합니다. 낮은 메모리/cpu 장치에서 이것은 진짜 킬러가 될 수 있으므로 고해상도로 무엇이든 할 때 염두에 두는 것이 매우 중요합니다.

4배라고 생각되는거 아님? 또한 레티나 디스플레이를 가진 사람들도 빠른 컴퓨터를 갖게 될 것이라고 거의 보장되지 않습니까?

@iirelu 참으로! 4배!
예, 레티나 디스플레이가 있는 컴퓨터는 상당히 고급형이므로 문제가 없을 것이라고 생각하지 않습니다.

메모리 문제는 레티나 스크린이 있는 모바일 장치에서 더 많이 나타날 수 있습니다.

@GoodBoyDigital , 터치 기능 업데이트에 감사드립니다. 그것은 내 임시 수정과 동일했고 트릭을 수행하는 것 같습니다.

성능: 최근부터 IOS7의 CocoonJS에서 테스트를 해왔습니다. Phonegap과 같은 것들이 사용하는 표준 iOS Webview에 비해 성능은 확실히 더 좋지만 모양을 그리는 것은 매우 부담이 되는 것 같고 모양은 Safari에서와 같이 앤티앨리어싱되지 않습니다. 나는 이것이 CocoonJS와 관련이 있고 Pixi와 거의 관련이 없다고 생각합니다.

레티나(@2x) 텍스처에 필터를 적용하자마자 모든 위치 지정이 해제된 것처럼 보입니다.

감사합니다 @joaomoreno ! 꼭 살펴보세요 :+1:

당신이 제시하는 API에 대한 작은 질문: PIXI.autodetectRenderer(width, height, optionObject) 와 PIXI.autodetectRenderer(width, height, view, antialias, transparent 사이에 충돌이 있지 않습니까?
src/pixi/utils/Detector.js 설명된 대로 optionObject 인수를 두 번째 서명의 여섯 번째 인수로 만들까요? 세 번째 인수가 이미 DOMElement이므로 다른 위치에 넣을 수 있는지 잘 모르겠습니다. 그렇죠?

pixi의 다음 버전은 새로운 메서드 서명을 사용합니다. 이것은 주요 변경 사항입니다.

@englercj 빠른 응답에 감사드립니다. 그렇다면 삭제된 옵션은 여전히 ​​다른 방식으로 액세스할 수 있습니까?

options 객체는 이전의 모든 옵션과 새로운 옵션을 포함합니다. 기능이 제거되지 않고 옵션을 다르게 전달하면 됩니다.

https://github.com/GoodBoyDigital/pixi.js/blob/dev/src/pixi/utils/Detector.js#L14 -L19

오, 편리한! 감사합니다. :+1:

레티나 지원은 현재 dev 브랜치에 있습니다. 문제가 있는 사람이 있으면 알려주세요. +1: 지금은 닫습니다.

레티나 맥북 프로에 문제가 있습니다.

{resolution:2} 사용하지 않습니다.

스테이지 너비는 실제 망막 픽셀을 반환합니다. 제 경우에는 2540 픽셀입니다. 텍스처는 두 배 크기로 렌더링되며 너비도 실제 1:1 망막 픽셀이 아닙니다. 따라서 300 x 200 이미지는 600 x 400 망막 픽셀을 차지하지만 너비는 300을 반환합니다.

이것은 예상된 동작입니까?

@PierBover 예, 개체의 높이/너비는 실제로 변경되지 않았습니다. 다른 해상도로 렌더링됩니다.

@englercj 하지만 실제 픽셀과 2배 픽셀이 혼합된 차원이 있는

얘들 아, 내가 여기서 뭔가 잘못하고 있습니까? 레티나 디스플레이용 CanvasRenderer의 해상도를 2로 설정하면 캔버스 크기가 두 배, @x2 이미지가 네 배가 됩니다.

    <strong i="7">@scale</strong> = window.devicePixelRatio
    width = 960/<strong i="8">@scale</strong>
    height = 556/<strong i="9">@scale</strong>

    renderer = new (PIXI.CanvasRenderer)(width, height,{resolution:@scale})
    container = document.getElementById 'container'
    container.appendChild renderer.view

StackOverflow 질문
http://stackoverflow.com/questions/29142342/pixi-js-retina-display-canvas-is-doubled-in-size

이번 호와 이 블로그 게시물 http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/ 에서 망막 이미지는 확장 전에 @2x 또는 @x2 가 필요하다고 언급되어 있습니다. . 정답은 @2x 라고 가정합니다. 이 올바른지?

@2x 맞습니다. 폴더 이름이거나 이미지 이름에 추가될 수 있습니다.

assets/@2x/image.png or assets/[email protected]

@아디레디 감사합니다. 그것은 절반의 전투입니다. 내 캔버스가 해상도가 증가하지 않고 크기가 조정되는 이유를 알고 있습니까?

레티나에 대한 동일한 문제, 해상도 사용: 2, 일부 PIXI.Text 앵커 위치 지정이 잘못됩니다. CSS에서 캔버스의 크기를 다시 조정하는 것은 별로 도움이 되지 않습니다. 해상도를 1로 설정하고 텍스트 글꼴 크기를 두 배로 한 다음 절반으로 축소해야 했습니다.

그럼에도 불구하고 텍스트는 여전히 매끄럽지 않습니다.

안녕 Elyx0, 여기에서 사용 가능한 모바일용 텍스트 플러그인을 사용해 볼 수 있습니다: https://github.com/JiDW/pixi-cocoontext

문제가 해결됩니까?

안녕하세요 @JiDW , 드디어

@GillesVermeulen

내 프로젝트에서 High DPI 장치를 지원하는 것을 고려 중이므로 다음 사항이 궁금합니다.

캔버스의 크기는 조정되지만 적중 영역은 조정되지 않습니다.

이것이 PixiJS에서 해결되었습니까? (예: 최신/최신 버전)

안녕하세요 @tobireif , 그렇게 생각합니다. 오랫동안 문제가 없었지만 Pixi v2에 문제가 있습니다. 최신 버전도 문제가 아닌 것 같아요.

@GillesVermeulen 잘 들리

캔버스를 사용하여 나를 위해 일한 CSS 방법(pixi.js 제외)
canvas { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }
이것이 누군가를 도울 수 있는 경우를 대비하여.

안녕하세요 !

내 마지막 프로젝트에 문제가 있습니다 .

내 개체에서 올바른 픽셀 해상도를 얻을 수 없습니다... 렌더러에 관한 것인지 아니면 텍스처를 생성한 그래픽에 관한 것인지 모르겠지만 두 경우 모두 window.devicePixelRatio를 추가했지만 보이지 않습니다. 어떤 영향을 미치기 위해.

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를 여십시오.