Автомасштабирование в играх на canvas

[Дзен-трансгуманист]

Вот сделал без библиотеки

Нет, не то.
Еще раз: попробуй сделать промежуточный канвас (не цепляя его к документу), туда рисуй как есть БЕЗ масштабирования. Потом этот канвас одним махом с нужным масштабированием выводишь на тот, который на экране. Что не понятно?) Но в этом случае останется мыло на стыке клеток с разными текстурами, к сожалению.
Либо делай сплошной путь для клеток с каждым отдельным видом текстур, и заполняй их паттернами. Пути должны быть подогнаны таким образом, чтобы после матричной трансформации имели целочисленные координаты.

[lgick]

Нет, не то.

я это для того сделал, чтоб показать, что не в библиотеке дело было!

Еще раз: попробуй сделать промежуточный канвас (не цепляя его к документу), туда рисуй как есть БЕЗ масштабирования. Потом этот канвас одним махом с нужным масштабированием выводишь на тот, который на экране. Что не понятно?) Но в этом случае останется мыло на стыке клеток с разными текстурами, к сожалению.

Либо делай сплошной путь для клеток с каждым отдельным видом текстур, и заполняй их паттернами. Пути должны быть подогнаны таким образом, чтобы после матричной трансформации имели целочисленные координаты.

зачем все так усложнять?
Причина полос при масштабировании - dpi монитора. Вот http://toster.ru/q/77462 (там в комментариях объясняется почему это происходит). Самый простой способ решения - использовать спрайты с однопиксельный сдвигом вправо и вниз. Тогда этот один пиксель будет закрывать щели

Второй способ - увеличивать с учетом dpi. Это пока не знаю как реализовать..

[lgick]

Дзен-трансгуманист,


кажется я нашел самое просто решение:

http://jsbin.com/sicuyojo/2/watch?js,output

всего-то надо было добавить эти настройки:

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

[lgick]

Еще раз: попробуй сделать промежуточный канвас (не цепляя его к документу), туда рисуй как есть БЕЗ масштабирования. Потом этот канвас одним махом с нужным масштабированием выводишь на тот, который на экране. Что не понятно?) Но в этом случае останется мыло на стыке клеток с разными текстурами, к сожалению.

Дзен-трансгуманист,


вот сделал:

http://jsbin.com/bejevato/1/edit?js,output

[lgick]

Дзен-трансгуманист,

запустил игру с fps 50 - ЦП умер))

Использовать промежуточный канвас или делать еще какие-то промежуточные операции с фрагментами для масштабировании в играх не лучшая идея)


Зато понял как сделать:

scale() не нужно использовать для увеличение всей картинки. Как я понял этот метод предназначен для увеличения какого-то участка или предмета игры.


Как же масштабировать игру?

А ее не надо масштабировать - все происходит автоматически!
У канвас есть атрибуты width и height. Также есть одноименные стили
Так вот ресайзить нужно стили и игра автоматом будет отрисовываться ровно!

Я же ресайзил атрибуты и соответственно делал больше или меньше видимую область игры!