How do I scale the scene to fullscreen?

问题

I'm currently learning Phaser 3. However, all the documentation I can find is about Phaser2.

When you create a game you have to set the width and height in the config:

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

How can I scale the scene to fullscreen?

回答1:

UPDATE

Phaser 3.16 is released on now (Feb, 2019), which has inbuilt Scale Manager. It provide various methods to scale your game. Check it out before trying the code below. Phaser.Scale Docs Notes on Scale Manager

Old Answer

You can resize the canvas element using resize function mentioned in code snippet and execute that function before starting game and whenever screen is resized. This way you can maintain the aspect ratio of 800:600(4:3) and fit the canvas element to full-screen according to screen ratio.

Run code snippet in Full Page Mode and resize your browser to see how canvas element is resized. Size of blue rectangle is the size of your canvas(game).

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>

You should check out this post. It explains this code in detail.

回答2:

css style (in index.html) should be as simple as

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

!important suffix is needed to override the dynamic html style
for example

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

phaser config in 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,
};

来源：https://stackoverflow.com/questions/49716741/how-do-i-scale-the-scene-to-fullscreen

标签

phaser-framework