如何将场景缩放到全屏？答案

【问题标题】：How do I scale the scene to fullscreen?如何将场景缩放到全屏？
【发布时间】：2018-09-17 21:29:47
【问题描述】：

我目前正在学习 Phaser 3。但是，我能找到的所有文档都是关于 Phaser2 的。

当您创建游戏时，您必须在配置中设置宽度和高度：

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
};

如何将场景缩放到全屏？

【问题讨论】：

标签： phaser-framework

【解决方案1】：

更新

Phaser 3.16 现已发布（2019 年 2 月），它内置了 Scale Manager。它提供了多种方法来扩展您的游戏。在尝试下面的代码之前检查一下。 Phaser.Scale Docs Notes on Scale Manager

旧答案

您可以使用代码 sn-p 中提到的resize 函数调整canvas 元素的大小，并在开始游戏之前和调整屏幕大小时执行该函数。这样可以保持 800:600(4:3) 的纵横比，并根据屏幕比例将 canvas 元素调整为全屏。

在全页模式下运行代码 sn-p 并调整浏览器的大小以查看画布元素的大小。蓝色矩形的大小是画布（游戏）的大小。

var game;
var gameWidth = 800;
var gameHeight = 600;

window.onload = function() {
  var config = {
    type: Phaser.CANVAS,
    width: gameWidth,
    height: gameHeight,
    scene: [intro]
  };
  game = new Phaser.Game(config);
  resize();
  window.addEventListener("resize", resize, false);
};

function resize() {
  var canvas = document.querySelector("canvas");
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  var windowRatio = windowWidth / windowHeight;
  var gameRatio = game.config.width / game.config.height;
  if (windowRatio < gameRatio) {
    canvas.style.width = windowWidth + "px";
    canvas.style.height = (windowWidth / gameRatio) + "px";
  } else {
    canvas.style.width = (windowHeight * gameRatio) + "px";
    canvas.style.height = windowHeight + "px";
  }
}

var intro = new Phaser.Scene('intro');
intro.create = function() {
  var rect = new Phaser.Geom.Rectangle(0, 0, 800, 600);

  var graphics = this.add.graphics({
    fillStyle: {
      color: 0x0000ff
    }
  });

  graphics.fillRectShape(rect);
};

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    body {
      background: #000000;
      padding: 0px;
      margin: 0px;
    }
    
    canvas {
      display: block;
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/phaser@3.6.0/dist/phaser.min.js"></script>
</head>

<body>
</body>

</html>

您应该查看this post。它详细解释了这段代码。

【讨论】：

【解决方案2】：

css 样式（在 index.html 中）应该很简单

body { margin:0; padding:0; overflow:hidden }
body>canvas { width:100%!important; height:100%!important; 
  position:fixed; top:0; left:0 }

需要!important后缀来覆盖动态html样式
例如

<canvas width="800" height="600"
 style="width: 681.778px; height: 511.333px;
  margin-left: 0px; margin-top: 0px;"></canvas>

index.js 中的相位器配置

const config = {
  parent: "phaser-example",
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create
  },

  // https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scalemanager/
  scale: {

    // ignore aspect ratio:
    mode: Phaser.Scale.RESIZE,

    // keep aspect ratio:
    //mode: Phaser.Scale.FIT,
    //mode: Phaser.Scale.ENVELOP, // larger than Scale.FIT
    //mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH, // auto width
    //mode: Phaser.Scale.WIDTH_CONTROLS_HEIGHT, // auto height

    autoCenter: Phaser.Scale.NO_CENTER,
    //autoCenter: Phaser.Scale.CENTER_BOTH,
    //autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
    //autoCenter: Phaser.Scale.CENTER_VERTICALLY,

  },
  autoRound: false,
};

【讨论】：