Question

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

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

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

如何将场景缩放到全屏？

Answer 1

<强>更新

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

旧答案

您可以使用代码段中提到的canvas函数调整resize元素的大小，并在开始游戏之前和屏幕大小调整时执行该功能。这样您就可以保持800：600（4：3）的宽高比，并根据屏幕比例将画布元素调整为全屏。

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

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。它详细解释了这段代码。

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

如何将场景缩放到全屏？

2 个答案: