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

Question

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

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

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

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

干杯,J

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上发表了一篇关于该主题的新文章:

• 高DPI帆布

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

Answer 3

我知道这是一个旧帖子,但我想我会用我实现的解决方案更新它.

1:我使用了两组图像:

• 一个非视网膜显示器(大小为1:1),
• 视网膜的另一组是两倍大的视网膜.

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

2:然后我调整画布大小(这是它的关键)

非RETINA

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

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

RETINA

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

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

注意canvas.style.width:height是,无论同您是否使用视网膜与否.

这就是它的全部内容!