pixi.js를 사용하여 적절한 텍스트 크기를 조정 하시겠습니까?

내가 뭘 잘못하고 있니? 무대에 간단한 텍스트를 추가하면 데스크톱에서는 잘 보이지만 모바일에서는 완전히 다르게 렌더링됩니다 (크기 위치 등).pixi.js를 사용하여 적절한 텍스트 크기를 조정 하시겠습니까?

동일한 장치를 다른 장치에 일관되게 표시하려면 어떻게합니까?

게임에 정적 픽셀 크기를 사용할 수 없으며 브라우저 창 크기로 조정해야하지만 가로 세로 비율을 유지해야합니다.

나는 문제를 보여주기 위해 완전한 데모를 설정 :

1920 × 1080의 화면 해상도와 장치에

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <style> 
     #game { 
      position: absolute; 
     } 
     html,body { 
      padding:0; 
      margin:0; 
      height:100%; 
      width:100%; 
      background-color: #000000; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="game"></div> 
    <script src="https://raw.githubusercontent.com/pixijs/pixi.js/master/bin/pixi.min.js"></script> 
    <script> 
     var gameElem = document.getElementById('game'); 
     var GAME_WIDTH = Math.max(window.screen.width,window.screen.height); 
     var GAME_HEIGHT = GAME_WIDTH/16*9; 

     var renderer = PIXI.autoDetectRenderer(GAME_WIDTH, GAME_HEIGHT,{backgroundColor : 0x000000}); 
     gameElem.appendChild(renderer.view); 

     // create the root of the scene graph 
     var stage = new PIXI.Container(); 

     var textOptions = { 
      font: 'bold 64px Roboto', // Set style, size and font 
      fill: '#333333', // Set fill color to blue 
      align: 'center', // Center align the text, since it's multiline 
      stroke: '#dddddd', // Set stroke color to a dark blue-gray color 
      strokeThickness: 20, // Set stroke thickness to 20 
      lineJoin: 'round' // Set the lineJoin to round instead of 'miter' 
     } 

     var topText = new PIXI.Text('Some text to do testing!', textOptions); 
     topText.anchor.x = 0.5; 
     topText.anchor.y = 0.5; 
     topText.x = GAME_WIDTH/2; 
     topText.y = GAME_HEIGHT/2-150; 
     stage.addChild(topText); 

     autoSetRenderSize(gameElem); 
     window.addEventListener("resize", function() {autoSetRenderSize(gameElem)}); 

     function autoSetRenderSize(container){ 
      ratio = Math.min(window.innerWidth/GAME_WIDTH, window.innerHeight/GAME_HEIGHT); 
      stage.scale.x = stage.scale.y = ratio; 
      var newWidth = Math.ceil(GAME_WIDTH * ratio); 
      var newHeight = Math.ceil(GAME_HEIGHT * ratio); 
      renderer.resize(newWidth, newHeight); 
      container.style.top = (window.innerHeight-newHeight)/2 + 'px'; 
      container.style.left = (window.innerWidth-newWidth)/2 + 'px'; 
      renderer.render(stage); 
     } 
    </script> 
    </body> 
</html>

: 장치에 320 × 480의 화면 해상도 :

이하지 않는 브라우저 크기 만 변경하면됩니다.

출처

2016-07-26 Forivin

완전히 분리 된 해상도를 2 개 갖고 싶다면 '텍스트 크기 조정'에 의존 할 수 없습니다. 단지 textOptions에 대한 매개 변수가 다를뿐입니다. 64px 인 텍스트는 고해상도에서는 좋지만 낮은 해상도에서는 절대적으로 커집니다.

다른 설정을 요구하지 않고 다른 해상도를 처리하는 방법은 렌더러를 만들 때 해상도 설정을 사용하는 것입니다. 내부적으로

let renderer = PIXI.autoDetectRenderer(960, 540, { 
    resolution: 1 
});

예를 들어

는, 게임의 위치와 크기 모두 960x540으로 될 것이며, 출력은 960x540 될 것입니다 렌더링합니다.

let renderer = PIXI.autoDetectRenderer(960, 540, { 
    resolution: 2 
});

내부적으로 게임의 위치와 크기 모두 960x540으로 될 것이며, 출력은 1920 × 1080 것입니다 렌더링합니다.

그래서 이렇게하면 스프라이트를 다른 위치에 배치하고 텍스트 크기를 변경하는 것에 대해 걱정할 필요가 없습니다. PIXI 내에서 자동으로 처리됩니다.

출처

2016-09-05 10:59:04 themoonrat

pixi.js를 사용하여 적절한 텍스트 크기를 조정 하시겠습니까?

답변

관련 문제