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

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

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

Вот тему создал с проблемой http://javascript.ru/forum/library-t...tml#post301668

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



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

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

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

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

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



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

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

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 (+ опционально антиалиасинг).

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

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

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

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

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

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

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

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

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

http://toster.ru/q/77462