10

我正在为 iPhone 创建一个 HTML5 画布游戏。我想同时支持视网膜和非视网膜显示器。

我的问题是，我如何同时支持视网膜和非视网膜显示器？

IE，这样做的一般实现是什么？我是否使用 iPhone 尺寸编写游戏，然后添加视网膜支持？还是我要创建游戏视网膜尺寸并添加非视网膜支持？最好有两张图像，一张视网膜一张非视网膜？或者只是缩小视网膜图像？视网膜和非视网膜是否有单独的画布尺寸？我需要缩放鼠标输入吗？

基本上，我不知道实现两者的一般想法/逻辑。

干杯，J

4

3 回答 3

11

您使用 devicePixelRatio 将视网膜显示器与普通显示器分开

您的游戏逻辑坐标（精灵位置等）必须独立于屏幕坐标运行，屏幕坐标在视网膜显示器上始终是 2 倍。

您的图形资源必须有两个版本。高分辨率版本和 50% 缩小的普通版本。当您在视网膜显示器上操作时，您绘制 2 倍大小的画布，使用 CSS 调整大小，并在此画布上使用高分辨率资源。

于 2012-09-02T17:50:57.747 回答
7

一篇关于该主题的新文章刚刚在 html5rocks.com 上发表：

通过 devicePixelRatio / webkitBackingStorePixelRatio 增大画布宽度和高度，然后使用 CSS 将其缩小到所需的逻辑像素大小。以 Chrome 报告的 webkitBackingStorePixelRatio 为 1 和 devicePixelRatio 为 2 为例，我们将画布的尺寸缩放 2 / 1，即将它们乘以 2，然后我们将使用 CSS 将其缩小。

于 2012-09-06T04:05:51.303 回答
7

我知道这现在是一篇旧帖子，但我想我会用我实施的解决方案来更新它。

1：我使用了两组图像：

  • 一个用于非视网膜显示器（尺寸 1:1），
  • 另一组视网膜是两倍大。

取决于正在使用的设备取决于加载的设备。

2：然后我调整画布的大小（这是它的关键）

非视网膜

    var canvas = document.createElement('myCanvas');

    canvas.width = 320;
    canvas.height = 480;
    canvas.style.width = "320px";
    canvas.style.height = "480px";

视网膜

    var canvas = document.createElement('myCanvas');

    canvas.width = 640;
    canvas.height = 960;
    canvas.style.width = "320px";
    canvas.style.height = "480px";

请注意，无论您是否使用视网膜， canvas.style.width&都是相同的。height

这就是它的全部内容！

于 2013-05-07T22:26:56.363 回答