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

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

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

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

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

Cheers, J

Ответ 1

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

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

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

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

Ответ 2

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

HIGH DPI CANVAS

увеличьте ширину и высоту холста с помощью devicePixelRatio/webkitBackingStorePixelRatio, а затем используйте CSS, чтобы масштабировать его до нужного размера логического пикселя. Принимая наш вышеприведенный случай, когда Chrome сообщает о файле webkitBackingStorePixelRatio 1 и devicePixelRatio из 2, мы бы масштабировали размеры холста на 2/1, т.е. Умножали их на 2, затем мы использовали бы CSS для его уменьшения.

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

И это действительно все, что есть!