Question

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

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

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

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

干杯， Ĵ

Answer 1

您可以使用devicePixelRatio将视网膜显示与正常显示分开

http://blog.iwalt.com/2010/08/generating-highresolution-graphics-with-html5s-canvas-element.html

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

您的图片资源必须有两个版本。高分辨率版本和50％缩小正常版本。当您使用视网膜显示器时，您绘制2x尺寸的画布，使用CSS调整大小并在此画布上使用高分辨率资源。

Answer 2

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

HIGH DPI CANVAS

通过devicePixelRatio / webkitBackingStorePixelRatio升级画布宽度和高度，然后使用CSS将其缩小回所需的逻辑像素大小。根据我们的上述情况，Chrome报告webkitBackingStorePixelRatio为1，devicePixelRatio为2，我们将画布的尺寸缩小2/1，即将它们乘以2，然后我们将使用CSS将其缩小。

Answer 3

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

1：我使用了两组图像：

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

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

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

NON RETINA

    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＆amp;无论你是否使用视网膜，height都是一样的。

这就是它的全部内容！

html5画布游戏 - 如何添加视网膜支持

3 个答案: