[英]HTML5 canvas height and width 100% distorts the game animation
我不确定,我如何才能更具体,但我正在尽我最大的努力来解释它。我试图理解,我应该寻找什么才能更具体,所以这就是我此刻所拥有的.
我正在探索 HTML5 JavaScript 游戏,我注意到,使画布高度和宽度 100% 会扭曲其中的动画。 我从这里得到的一个简单例子。 如果我将画布大小更改为 100%(在我提供的示例中),它会破坏游戏的动画(例如小行星)。
我想知道,HTML5 的哪个属性负责这种行为,我应该寻找什么才能使 HTML5 动画适合整个屏幕尺寸?
编辑
我尝试运行cordova来将游戏构建到本机平台,但我遇到的第一个问题是画布不适合屏幕尺寸。 (这就是为什么我希望它完全适合浏览器屏幕,但是当使用cordova 将为浏览器屏幕制作的画布呈现给本机时,我发现完全不适合)。
我探索了 phaser,了解他们如何解决这个问题,并发现这个游戏使用了一种叫做ScalingManager 的东西。
所以,我的问题是
1. 什么是游戏规模化?
2. Phaser 的缩放管理器是如何工作的
3. 不使用缩放管理器,为什么即使正确提到画布高度和宽度,游戏仍然不适合moile屏幕尺寸?
4. 是否有一个小实验(不使用任何移相器或类似的 javascript 游戏框架)可以让我了解使用简单的 HTML5 javasctipt 和cordova 进行缩放的需要?
画布有两种不同的尺寸:
为了避免失真并获得像素完美的图形,您需要确保它们最终相等......例如:
function redraw() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
...
}
对于您只想在画布中绘制所有内容的单页 HTML 游戏,一个简单的方法是:
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
* {
margin: 0;
padding: 0;
border: none;
}
body,html {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<script>
var canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
var body = document.body;
body.insertBefore(canvas, body.firstChild);
var context = canvas.getContext('2d');
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = context.webkitBackingStorePixelRatio
|| context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio
|| context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
redraw();
window.addEventListener('resize', redraw, false);
window.addEventListener('orientationchange', redraw, false);
function redraw() {
width = (window.innerWidth > 0 ? window.innerWidth : screen.width);
height = (window.innerHeight > 0 ? window.innerHeight : screen.height);
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
width *= ratio;
height *= ratio;
if (canvas.width === width && canvas.height === height) {
return;
}
canvas.width = width;
canvas.height = height;
}
//draw things
</script>
</body>
</html>
如果您的应用程序的某些部分您只是在等待用户交互(而不是在调用redraw
循环),并且用户改为调整浏览器窗口大小或倾斜手机/标签,您还需要检查innerWidth
/ innerHeight
变化。
使用 Phaser 3,我成功地将window.innerWidth
和window.innerHeight
添加到 Scale 对象到我的配置中:
config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser-game',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: window.innerWidth,
height: window.innerHeight
},
scene: [MainScene],
parent: 'gameContainer',
physics: {
default: 'arcade',
arcade: {
gravity: {y: 0}
}
}
};
目前我没有看到任何问题,这就是诀窍。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.