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

[lgick]

Хочу в игре получить масштабирование картинки при ресайзе, то есть чтобы не только сам элемент canvas ресайзился, но и картинка игры тоже.

Для чего это нужно?
Чтобы игрок с большим экраном не имел преимуществ увидеть больше, чем игрок с малым разрешением. Можно было бы сделать фиксированный канвас, но это не вариант.

Вот тему создал с проблемой easeljs полосы

Суть: при масштабировании образуются полосы (хром браузер).
вот пример http://jsbin.com/yadupuru/1/edit?js,output



может сам подход создания карты игры не верный или эти полосы возможно как-то убрать?

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

lgick,
Посмотрел твой png с текстурками, скорее всего тут все дело в том, что при интерполяции крайних пикселей учитываются также их соседи, принадлежащие уже другим текстурам. Иногда в похожих случаях предварительно изолируют каждую текстуру в отдельный битмап (либо из композитного исходника делаются слайсы уже при исполнении программы).
Но вообще, когда масштабируется вся сцена, следует сначала отрендерить ее один-к-одному в промежуточный буфер, и только тогда выводить на экран в нужном масштабе.

[lgick]

скорее всего тут все дело в том, что при интерполяции крайних пикселей учитываются также их соседи, принадлежащие уже другим текстурам.

не думаю что в этом дело! Полосы это щели между тайлами! В хроме это проверить нельзя, но вот firefox и safari в этих щелях показывает цвет заднего фона

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

я пробовал! Я даже заново отрисовывал карту, то есть полностью очищал холст и заного делал тайтлы с учетом новых размеров!

Но вообще, когда масштабируется вся сцена, следует сначала отрендерить ее один-к-одному в промежуточный буфер, и только тогда выводить на экран в нужном масштабе.

я думаю что эти полосы связаны с размерами канваса. Вот знаю точно, что полосы создаются если длина или ширина будут иметь нечетные значения, правда полосы чуть отличаются:



но в чем онкретно проблема с размерами именно в моем случае понять не могу

[lgick]

если есть желание, можно посмотреть полосы и как они образуются:

git clone https://github.com/lgick/VIMP-Tank-Battle.git game && cd game && bower i && npm i && npm start

и перейти на http://localhost:3000/

В консоль вываливает scale при ресайзе


Если изменять размеры окна в firefox будут появляться красные полосы - это и есть цвет бекграунда
В хроме цвет полосок другой.

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

lgick,
Не нравится через буфер, тогда заполняй пути паттернами.

var shape = new createjs.Shape();
shape.graphics.beginBitmapFill(бла, бла, бла).drawRect(бла, бла, бла);

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

Хотя хз, на дробном масштабе может возникнуть та же фигня.
Тут по смыслу должен быть сплошной тайлинг, а не набор отдельно рисующихся фрагментов. Остается либо строгая привязка трансформированных координат к пикселям при рендеринге, либо то что я предложил сразу, либо WebGL (+ опционально антиалиасинг).

[lgick]

Не нравится через буфер, тогда заполняй пути паттернами.

все равно полосы будут
http://jsbin.com/yadupuru/36/edit?js,output

[lgick]

либо строгая привязка трансформированных координат к пикселям при рендеринге

так она и есть строгая! Полосы возникают всегда, когда используется растровое изображение и scale. Причем не важно где он (scale) применяется!

Также полосы появляются и при составлении тайлов программно, если использовать дробные значения в scale
http://jsbin.com/yadupuru/39/edit?js,output

либо то что я предложил сразу

а что? отдельный битмап создает полосы!
Я пробовал масштабировать как полностью всю картинку, так и отдельный тайтл. Это именно scale создает полосы, вне зависимости от того где его применять

WebGL

ну это вообще уже за гранью текущего проекта))

[lgick]

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

http://jsbin.com/nixezuda/6/watch?js,output

полосы остались..

[lgick]

Вот причина и решение:

http://toster.ru/q/77462