Правильное масштабирование текста с помощью pixi.js?

Что я делаю неправильно? Когда я добавляю простой текст на свою сцену, он отлично выглядит на рабочем столе, но на мобильном устройстве он отображается совершенно по-разному (позиция размера и т. Д.).Правильное масштабирование текста с помощью pixi.js?

Как заставить его последовательно отображать одно и то же на разных устройствах?

Игра не может иметь размер статического пикселя, ее необходимо масштабировать до размера окна браузера, но сохранить ее соотношение сторон.

Я создал полную демонстрацию, чтобы продемонстрировать эту проблему:

<!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>

В устройстве с разрешением экрана 1920х1080: На устройстве разрешение экрана 320x480:

Это не произойдет, когда вы просто измените размер своего браузера.

источник

2016-07-26 Forivin

Если вы хотите, чтобы у вас было 2 совершенно разных разрешения, вы не можете полагаться на «масштабирование текста» - вам просто нужно иметь разные параметры для ваших текстовых элементов. Текст размером 64 пикселя будет хорошим с высоким разрешением, но абсолютно огромным при низком разрешении.

Способ покрытия различных разрешений без необходимости использования разных настроек - использовать настройки разрешения при создании средства визуализации.

Например

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?

ответ

Смежные вопросы