Question

我做错了什么？当我向舞台添加简单文本时，它在桌面上看起来很好，但在移动设备上它呈现的方式完全不同（大小位置等）。

如何让它在不同的设备上始终显示相同的内容？

游戏不能有静态像素大小，需要缩放到浏览器窗口大小，但保持其宽高比。

我设置了一个完整的演示来演示问题：

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

在屏幕分辨率为1920x1080的设备上：在设备上屏幕分辨率为320x480：

当您只是更改浏览器大小时，这不会发生。

Answer 1

如果你想拥有2个完全独立的分辨率，你就不能依赖于文本缩放＆＃39; - 您只需要为textOptions设置不同的参数。 64px的文本在高分辨率下会很好，但在低分辨率时绝对会很大。

在不需要不同设置的情况下覆盖不同分辨率的方法是在创建渲染器时使用分辨率设置。

例如

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

在内部，游戏的所有定位和尺寸均为960x540，输出的渲染速度为960x540。

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

在内部，游戏的所有定位和尺寸均为960x540，输出的渲染速度为1920x1080。

所以这样，你不必担心在不同的地方定位精灵，并改变文字大小;它将在PIXI中自动为您处理。

使用pixi.js进行适当的文本缩放？

1 个答案: