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

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

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

Answer 3

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

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

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

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

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