Сравнение способов отрисовки спрайтов в canvas

[Sasa111222333]

хороший материал, спасибо

[ALapinskas]

Тоже пробовал писать игры в canvas и в итоге перешел на webgl. В canvas можно рисовать элементарные вещи - картинку, спрайт, линию, прямоугольник, круг, можно написать крестики-нолики, шахматы итп. Но если нужно, что-то посложнее - тайловые карты, маски, свет, тени - это уже стандартными методами сделать не выйдет.

[limonikal]

Тут не могу не согласиться. Да, 2d контекст может достаточно быстро отрисовывать спрайты, но для геймдева его возможности сильно ограничены.

Однако, для создания динамичных двумерных интерфейсов, как это, например, делают в Google Sheets, 2d контекст подходит отлично.

[Ekseft]

context.drawImage(sprite, random(800), random(450), 50, 50);

Стало интересно, а если мы рисуем спрайт на координатах (800, 450), с размерами 50х50, получается, что всё изображения будет невидимо (кроме одного пикселя?), в таком случается отрисовка всё равно происходит полностью? Или в canvas'е есть какие-то оптимизации на этот счёт? Поменяются ли в таком случае результаты замеров?

[limonikal]

Интересный вопрос!)

Если передать в drawImage координаты [800 : 450], то мы не увидим даже одного пикселя. По сути, мы передаем в фукцию индексы строки и столбца, на пересечении которых находится первый пиксель нашего изображения. Так как эти индексы (считай координаты) начинают нумероваться с 0, изображение с таким адресом будет полностью отрисовано за пределами видимой области канваса.

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