How do I scale the scene to fullscreen?

风格不统一 提交于 2021-02-07 20:25:19

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!