PIXI 렌더러를 브라우저 너비와 높이에 맞추는 방법은 무엇입니까?

debugcn 에 게시 Dev

알렉산더 파버

나는 PIXI.js 를 사용하여 게임 보드를 그리고 그 위와 아래에 버튼과 선택 메뉴와 같은 몇 가지 jQuery 요소를 그리는 Wordpress 프론트 페이지에 포함 된 단어 게임을 작업 하고 있습니다.

잘 따라가는 동안 내가 해결하는 방법을 모르고 다른 PIXI 개발자가 어떻게 해결하는지 궁금해하는 한 가지 문제가 있습니다. 일부 브라우저에서는 하드 코딩 된 캔버스 크기 (내가 1020 x 1080으로 설정)가 너무 큽니다.

예를 들어 다음은 Macbook Air에있는 2 개의 Google Chrome 스크린 샷입니다.

또한 내 게임을 Facebook Canvas에 임베드하여 화면 공간을 더욱 부족하게 만들 계획입니다.

다음은 내 JavaScript 코드의 일부입니다. 어떻게 개선해야합니까?

    var renderer = new PIXI.autoDetectRenderer(1020, 1020 + 60, { 
            view: document.getElementById('board')
    });
    renderer.view.style.padding = '4px';
    renderer.backgroundColor = 0xFFFFFF;

    var charm = new Charm(PIXI);

    var stage = new PIXI.Sprite();
    stage.interactive = true;
    stage
            .on('mousedown',  onDragStart)
            .on('touchstart', onDragStart)
            .on('mousemove', onDragMove)
            .on('touchmove', onDragMove)
            .on('mouseup',         onDragEnd)
            .on('mouseupoutside',  onDragEnd)
            .on('touchend',        onDragEnd)
            .on('touchendoutside', onDragEnd);

Georgsh

사용 window.innerWidth하고 window.innerHeight당신의 할 board요소 최적이 크기.

내 솔루션은 다음과 같습니다 (원시 캔버스 만 사용하고 프레임 워크 없음)

var context = document.getElementById('game');
function gameResize()
    {
    if (window.innerWidth/window.innerHeight > 1280/720)
        {
        context.height = window.innerHeight;
        context.width = 1280*context.height/720;
        }
    else
        {
        context.width = window.innerWidth;
        context.height = 720*context.width/1280;
        }
    }

또한 boardPIXI를 사용하여 직접 크기 를 변경할 수도 renderer.resize()있지만 어느 것이 더 정확한지 잘 모르겠습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-11

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

PIXI 렌더러를 브라우저 너비와 높이에 맞추는 방법은 무엇입니까?

PIXI 렌더러를 브라우저 너비와 높이에 맞추는 방법은 무엇입니까?

컨테이너 크기에 따라 너비와 높이를 설정하는 방법은 무엇입니까?

나머지 높이와 너비를 채우는 방법은 무엇입니까?

제 경우에는 백분율 높이와 너비로 div를 설정하는 방법은 무엇입니까?

브라우저에서 라이브 비디오를 재생하는 방법은 무엇입니까?

슬라이더를 100 % 너비와 높이로하는 방법은 무엇입니까?

Angular를 사용하여 많은 양의 데이터에 대한 브라우저 렌더링 속도를 높이는 방법은 무엇입니까?

CSS-콘텐츠를 단락의 너비 / 높이에 맞추는 방법은 무엇입니까?

(CSS) 브라우저 크기와 비교하여 브라우저 오른쪽 하단에 Div를 배치하는 방법은 무엇입니까?

여러 바이너리 파일을 브라우저에 보내는 방법은 무엇입니까?

브라우저의 너비를 줄이더라도 화면 하단에 바닥 글을 유지하는 방법은 무엇입니까?

창의 정확한 높이를 차지하는 웹 브라우저에서 비디오를 표시하는 방법은 무엇입니까?

다른 브라우저에 대해 다른 높이를 설정하는 방법은 무엇입니까?

Tabulator 테이블을 높이와 너비가 고정 된 div에 맞추는 방법은 무엇입니까?

슬라이더 높이를 화면 하단에 자동으로 맞추는 방법은 무엇입니까?

Unity Web GL HTML 컨테이너 : 브라우저 너비를 기준으로 너비 창을 "확장"하는 방법은 무엇입니까?

브라우저에서 .pdf를 저장하는 방법은 무엇입니까?

가로 세로 비율을 유지하면서 브라우저 너비와 높이에 맞게 조정되는 동적 캔버스 / 그리드 / 행 / 열을 만드는 방법은 무엇입니까?

가로 세로 비율을 유지하면서 브라우저 너비와 높이에 맞게 조정되는 동적 캔버스 / 그리드 / 행 / 열을 만드는 방법은 무엇입니까?

div를 전체 너비에 맞추는 방법은 무엇입니까?

보기의 높이와 너비를 얻는 방법은 무엇입니까?

JS에서 "require is not defined"의 의미와 브라우저에서 라이브러리를 사용할 수있는 방법은 무엇입니까?

ImageView를 하단에 정렬하고 너비와 높이를 채우고 종횡비를 유지하는 방법은 무엇입니까?

CRA에서 열린 브라우저를 비활성화하는 방법은 무엇입니까?

브라우저 콘텐츠를 비디오에 기록하는 방법은 무엇입니까?

브라우저 창의 높이에 맞도록 이미지를 자르거나 자르는 방법은 무엇입니까?

React Native에서 uri에서 이미지 높이와 너비를 얻는 방법은 무엇입니까?

SwiftUI에서 이미지의 너비와 높이를 설정하는 방법은 무엇입니까?

드래그 가능한 이미지에 너비와 높이를 설정하는 방법은 무엇입니까?

창 크기를 조정하기 전에 너비와 높이를 확인하는 방법은 무엇입니까?