我目前正在学习 Phaser 3。但是，我能找到的所有文档都是关于 Phaser2 的。
创建游戏时，您必须在配置中设置宽度和高度：
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
};
如何将场景缩放至全屏？
UPDATE
Phaser 3.16现已发布（2019年2月），内置了规模经理。它提供了各种方法来扩展您的游戏。在尝试下面的代码之前先检查一下。Phaser.Scale 文档 https://photonstorm.github.io/phaser3-docs/Phaser.Scale.html
秤管理器注意事项 https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scalemanager/
旧答案
您可以调整大小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/[email protected] /cdn-cgi/l/email-protection/dist/phaser.min.js"></script>
</head>
<body>
</body>
</html>
你应该检查一下这个帖子 http://www.emanueleferonato.com/2018/02/16/how-to-scale-your-html5-games-if-your-framework-does-not-feature-a-scale-manager-or-if-you-do-not-use-any-framework/。它详细解释了这段代码。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
