Вопрос по html5, retina-display, html5-canvas, iphone – html5 canvas игра - как добавить поддержку сетчатки

10

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

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

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

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

Ура, J

Этот polyfill обрабатывает большинство основных операций рисования на холсте ...github.com/jondavidjohn/hidpi-canvas-polyfill jondavidjohn

Ваш Ответ

3   ответа
11

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

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

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

Джаррод, интересно, как твоя сетчатка HTML5 игра для iPhone. Можете ли вы получить достаточно высокий FPS для хорошего геймплея сетчатки?
Отлично. Спасибо! Jarrod
7

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

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.

7

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!

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

Похожие вопросы