0

我正在通过 Phaser.io 创建一个简单的游戏如何让它在不同的屏幕上正确显示?

当我使用这个时:

var w = window.innerWidth * window.devicePixelRatio,
h = window.innerHeight * window.devicePixelRatio;

var avaProfile = game.add.image(w/1.66, h/6.3, 'avaProfile');
avaProfile.fixedToCamera = true;

发生这样的事情:

在此处输入图像描述

我什至无法想象如何让所有元素都具有自适应性

4

1 回答 1

2

首先,如果你想根据游戏大小来定位你的按钮,你可能应该使用更可靠的 game.width/game.height。

现在,如果您想根据屏幕大小调整按钮的位置,没有什么神奇的解决方案。例如,这是一篇关于该主题的通用文章。您应该决定每个 UI 元素的位置,无论是屏幕角落、屏幕中心、游戏对象等,并预测分辨率变化后的结果。

例如,如果您想在屏幕中央显示一个方形弹出窗口,您将执行以下操作:

var popup = game.add.sprite(game.width/2, game.height/2, 'popup');
popup.width = 400;
popup.height = 400;
popup.anchor.set(0.5, 0.5);

现在给它一个标题,你可能想根据弹出窗口本身来定位它:

 var text = game.add.sprite(popup.x, popup.y + 10, 'Hello world');
 text.anchor.set(0.5, 0);

等等。没有一种万能的解决方案,但要明确什么是使用什么作为原点,希望在调整屏幕大小时不会有意外。

于 2015-04-30T21:05:04.563 回答