html5画布游戏 - 如何添加视网膜支持 [英] html5 canvas game - how to add retina support

问题描述

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

I'm creating an HTML5 canvas game for iPhone. I would like to support both retina and non-retina displays.

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

My question is, how do I support both retina and non-retina displays?

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

I.E., what is the general implementation for doing this? Do I write the game using the iPhone dimension and then add retina support? Or do I create the game retina size and add non-retina support? Is it best to have two images, one retina one non-retina? or just scale the retina image down? Do I have separate canvas sizes for retina and non-retina? Do I need to scale the mouse input?

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

Basically, I have no idea on the general idea/logic to implementing both.

干杯，
J

Cheers, J

推荐答案

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

You use devicePixelRatio to separate retina displays from normal displays

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

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

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

Your game logic coordinates (sprite positions, etc.) must operate independently from the screen coordinates which will be always 2x multiplied on the retina display.

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

Your graphics assets must have two versions. High resolution version and 50% scaled down normal version. When you operate on retina display, you draw 2x size canvas, resized with CSS and on this canvas use high resolution assets.

这篇关于html5画布游戏 - 如何添加视网膜支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！