Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Автомасштабирование в играх на canvas (https://javascript.ru/forum/misc/45632-avtomasshtabirovanie-v-igrakh-na-canvas.html)

Дзен-трансгуманист 11.03.2014 21:35

Цитата:

Сообщение от lgick
Вот сделал без библиотеки

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

lgick 11.03.2014 22:41

Цитата:

Сообщение от Дзен-трансгуманист
Нет, не то.

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


Цитата:

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

Цитата:

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

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

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

lgick 12.03.2014 12:43

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


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

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

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

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

lgick 13.03.2014 10:11

Цитата:

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

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


вот сделал:

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

lgick 14.03.2014 08:28

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

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

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


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

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


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

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

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


Часовой пояс GMT +3, время: 02:50.