Работа с холстом на экранах разных размеров

Question

Я планирую создать простую игру с использованием тега HTML5 <canvas> и скомпилировать код в собственное приложение, используя Phonegap, но проблема в том, что canvas использует координаты, которые не относятся к ее размеру,поэтому 20,20 на экране 960x640 отличается от экрана 480x800.

Поэтому я хочу знать, как работать с <canvas> (который будет в полноэкранном режиме) на экранах разных размеров.

Answer 1

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

Это обычная проблема с довольно простым разрешением.Часто это делается путем отделения жестких координат холста от того, что иногда называют «модельными» координатами.

Это действительно зависит от того, как организован ваш код, но я предполагаю, что игра имеет некоторую высоту и ширину для мира, который занимаетвверх большую часть или весь экран.Два соотношения сторон экранов, на которые вы нацеливаетесь, составляют 1,5 и 1,666, так что вы захотите выбрать меньшее

. Поэтому вы действительно захотите сделать свою игру в наборе «моделей».координаты, которые не имеют никакого отношения к размеру экрана или холста.Поскольку вы ориентируетесь только на два размера экрана, координаты вашей модели могут быть 960x640, поскольку это меньшее из двух соотношений сторон.Это не должно быть.Это может быть 100x50 для вашей модели координат вместо этого.Но в этом примере мы будем использовать 960x640 в качестве координат нашей модели.

Внутренне вы никогда не будете использовать ничего, кроме этих координат модели.При создании игры вы никогда не будете думать ни о каких других координатах.

Когда размер экрана составляет 960x640, вам вообще не придется ничего менять, поскольку это отображение 1: 1, что удобно.

Затем, когда размер экрана на самом деле составляет 800x480, когда приходит время рисовать на экране, вы захотите перевести все координаты модели на (3/4), чтобы игра была сделана и использовала внутренне 960x480., но он будет нарисован в области (720x480).Вы также захотите взять любую мышь или сенсорный ввод и умножить его на (4/3), чтобы превратить координаты экрана в координаты модели.

Этот перевод может быть так же прост, как и вызов ctx.scale(3/4, 3/4) перед рисованиемвсе.

Таким образом, на обеих платформах будет написан весь код, предполагая, что игра имеет размер 960x640.Единственные моменты времени, когда координаты модели становятся экранными координатами, - это при рисовании на холст (который имеет другой размер) и преобразовании координат мыши / касания холста в координаты модели.

Если вас это смущает, я могу попробоватьобразец.

Answer 2

Использование innerWidth/innerHeight из window объекта:

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

Это автоматически настроит любой экран;Вы должны проверить совместимость между платформой и экраном!

Кроме того, вместо использования предварительно определенных координат x,y используйте что-то вроде этого:

var innerWidth = window.innerWidth;
x = innerWidth / 3;

Answer 3

Поскольку у вас всего 2 размера экрана, вы можете иметь 2 разных холста (и их логику) с разными размерами.
Если вам не нравится это решение, я думаю, что вы можете использовать только размеры в% вместо абсолютного размера в пикселях. Последнее, но не менее важное, попробуйте установить разные значения в метатеге.