Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.03.2014, 22:28
Аватар для lgick
Аспирант
Отправить личное сообщение для lgick Посмотреть профиль Найти все сообщения от lgick
 
Регистрация: 23.11.2013
Сообщений: 96

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

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

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

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



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

Последний раз редактировалось lgick, 08.03.2014 в 22:32.
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2014, 09:19
Аватар для Дзен-трансгуманист
√₋̅₁̅
Отправить личное сообщение для Дзен-трансгуманист Посмотреть профиль Найти все сообщения от Дзен-трансгуманист
 
Регистрация: 18.06.2012
Сообщений: 385

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

Гейзенберг, возможно, читал этот тред.

Последний раз редактировалось Дзен-трансгуманист, 09.03.2014 в 09:25.
Ответить с цитированием
  #3 (permalink)  
Старый 10.03.2014, 02:17
Аватар для lgick
Аспирант
Отправить личное сообщение для lgick Посмотреть профиль Найти все сообщения от lgick
 
Регистрация: 23.11.2013
Сообщений: 96

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

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

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



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

Последний раз редактировалось lgick, 10.03.2014 в 06:17.
Ответить с цитированием
  #4 (permalink)  
Старый 10.03.2014, 06:35
Аватар для lgick
Аспирант
Отправить личное сообщение для lgick Посмотреть профиль Найти все сообщения от lgick
 
Регистрация: 23.11.2013
Сообщений: 96

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

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


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

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


Если изменять размеры окна в firefox будут появляться красные полосы - это и есть цвет бекграунда
В хроме цвет полосок другой.
Ответить с цитированием
  #5 (permalink)  
Старый 11.03.2014, 06:31
Аватар для Дзен-трансгуманист
√₋̅₁̅
Отправить личное сообщение для Дзен-трансгуманист Посмотреть профиль Найти все сообщения от Дзен-трансгуманист
 
Регистрация: 18.06.2012
Сообщений: 385

lgick,
Не нравится через буфер, тогда заполняй пути паттернами.
var shape = new createjs.Shape();
shape.graphics.beginBitmapFill(бла, бла, бла).drawRect(бла, бла, бла);
__________________

Гейзенберг, возможно, читал этот тред.
Ответить с цитированием
  #6 (permalink)  
Старый 11.03.2014, 07:38
Аватар для Дзен-трансгуманист
√₋̅₁̅
Отправить личное сообщение для Дзен-трансгуманист Посмотреть профиль Найти все сообщения от Дзен-трансгуманист
 
Регистрация: 18.06.2012
Сообщений: 385

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

Гейзенберг, возможно, читал этот тред.

Последний раз редактировалось Дзен-трансгуманист, 11.03.2014 в 07:40.
Ответить с цитированием
  #7 (permalink)  
Старый 11.03.2014, 07:54
Аватар для lgick
Аспирант
Отправить личное сообщение для lgick Посмотреть профиль Найти все сообщения от lgick
 
Регистрация: 23.11.2013
Сообщений: 96

Сообщение от Дзен-трансгуманист
Не нравится через буфер, тогда заполняй пути паттернами.
все равно полосы будут
http://jsbin.com/yadupuru/36/edit?js,output
Ответить с цитированием
  #8 (permalink)  
Старый 11.03.2014, 08:11
Аватар для lgick
Аспирант
Отправить личное сообщение для lgick Посмотреть профиль Найти все сообщения от lgick
 
Регистрация: 23.11.2013
Сообщений: 96

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

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

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

Сообщение от Дзен-трансгуманист
WebGL
ну это вообще уже за гранью текущего проекта))
Ответить с цитированием
  #9 (permalink)  
Старый 11.03.2014, 09:24
Аватар для lgick
Аспирант
Отправить личное сообщение для lgick Посмотреть профиль Найти все сообщения от lgick
 
Регистрация: 23.11.2013
Сообщений: 96

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

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

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

Последний раз редактировалось lgick, 11.03.2014 в 09:37.
Ответить с цитированием
  #10 (permalink)  
Старый 11.03.2014, 19:32
Аватар для lgick
Аспирант
Отправить личное сообщение для lgick Посмотреть профиль Найти все сообщения от lgick
 
Регистрация: 23.11.2013
Сообщений: 96

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

http://toster.ru/q/77462
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Canvas картинка с обесцвечиванием. cheba Общие вопросы Javascript 9 31.05.2013 08:13
canvas и drawImage() jussik Элементы интерфейса 0 27.10.2012 15:57
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 09:45
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 11:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 09:16