html5 canvas игра - как добавить поддержку сетчатки

Я создаю HTML5-игру для iPhone. Я хотел бы поддержать как сетчатки и не сетчатки дисплеи.

У меня вопрос, как я могу поддерживать дисплеи сетчатки и не сетчатки?

Т.е. какова общая реализация для этого? Я пишу игру, используя измерение iPhone, а затем добавляю поддержку сетчатки? Или я создаю игровой размер сетчатки и добавляю поддержку без сетчатки? Лучше ли иметь два изображения, одно сетчатое, одно сетчатое? или просто уменьшите изображение сетчатки? У меня есть отдельные размеры холста для сетчатки и не сетчатки? Нужно ли масштабировать ввод мыши?

По сути, я понятия не имею об общей идее / логике реализации обоих.

Ура, J

 jondavidjohn23 окт. 2013 г., 17:53
Этот polyfill обрабатывает большинство основных операций рисования на холсте ...github.com/jondavidjohn/hidpi-canvas-polyfill

Ответы на вопрос(3)

I know this is now an old post but thought I'd update it with the solution I implemented.

1: я использовал два набора изображений:

one for non retina displays (sized 1:1), and another set for retina which are twice as big.

в зависимости от того, какое устройство используется, зависит от того, какой набор загружен.

2: я затем изменяю размер холста (это ключ к нему)

NON 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 одинаковы независимо от того, используете ли вы сетчатку или нет.

And that's really all there is to it!

 15 мая 2016 г., 12:11
Вы спасли мою жизнь
 28 дек. 2013 г., 05:31
Привет, я использую это, и это работает хорошо. Но при использовании this.target.getContext ("2d"). GetImageData (x, y, 1,1) .data; это не даст правильные значения, это даст не значения сетчатки.
 05 дек. 2014 г., 11:57
один совет - установить базовую высоту / ширину для холста, а затем умножить наwindow.devicePixelRatio, что должно означать масштабировать его соответствующим образом. напримерcanvas.width = baseWidth * window.devicePixelRatio; canvas.style.width = baseWidth + "px"
Решение Вопроса

Вы используете devicePixelRatio для отделения дисплеев сетчатки от обычных дисплеев

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

Ваши игровые логические координаты (позиции спрайтов и т. Д.) Должны работать независимо от экранных координат, которые всегда будут умножены в 2 раза на дисплее сетчатки.

Ваши графические ресурсы должны иметь две версии. Версия с высоким разрешением и уменьшенная на 50% нормальная версия. Когда вы работаете с Retina Display, вы рисуете холст 2x размера, изменяете размеры с помощью CSS и на этом холсте используете ресурсы с высоким разрешением.

 Jarrod02 сент. 2012 г., 21:07
Отлично. Спасибо!
 10 апр. 2013 г., 16:23
Джаррод, интересно, как твоя сетчатка HTML5 игра для iPhone. Можете ли вы получить достаточно высокий FPS для хорошего геймплея сетчатки?

Недавно была опубликована новая статья на html5rocks.com:

HIGH DPI CANVAS

upsize your canvas width and height by devicePixelRatio / webkitBackingStorePixelRatio and then use CSS to scale it back down to the logical pixel size you want. Taking our above case where Chrome reports a webkitBackingStorePixelRatio of 1 and a devicePixelRatio of 2 we would scale the dimensions of the canvas by 2 / 1, i.e. multiply them by 2, then we would use CSS to scale it back down.

Ваш ответ на вопрос