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

Question

나는 워드 보드 앞 페이지에 포함 된 단어 게임에 대해 작업 중입니다. 여기에는 PIXI.js을 사용하여 게임 보드를 그릴 수 있습니다. 버튼과 selectmenu와 같은 jQuery 요소는 거의 없습니다.

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

여기 내 맥북 에어에서 2 개 구글 크롬의 스크린 샷입니다 : 또한

, 나는 화면 재산을도 만들 것입니다 페이스 북 캔버스에 내 게임을 포함 할 계획 더 부족합니다.

여기 내 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); 

Answer 1

사용 window.innerWidth

및 window.innerHeight는 크기 당신의 board 요소가 최적 확인합니다.

내 솔루션은 또한 직접 board 크기를 변경하고 PIXI renderer.resize() 함께 할 수

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; 
     } 
    } 

(단지 원시 캔버스, 아니 프레임 워크를 사용)과 같다,하지만 난 더 정확 어느 모르겠습니다.

Answer 2

renderer.resize()이 있지만 게임 보드를 확장하지 않습니다.

Uisng :

renderer.view.style.width = ...... + 'px'; 
renderer.view.style.height = ...... + 'px'; 

잘 작동하고 컨텐츠를 확장 할 수 있습니다.

$('#board').resizable({ 
     aspectRatio: 1020/(1020 + 60), 
     minWidth: 1020/2 
}); 

:

또한, 나는 jQuery resizable가 PIXI와 잘 작동 발견