@Eurodance

Как отрисовывать Tileset'ы на Canvas?

Я создаю rpg игру с видом сверху и хочу использовать в игре tileset'ы.
Что-то вроде:
654fd0dadbe90055871636.png

Но, если отрисовывать ячейки, которые не соприкасаются друг с другом на исходном изображении (например поставить ячейку 2 на место ячейки 1):
654fd196853da230318885.png

Получается что-то такое:
654fd27934f53170960010.png

Если увеличить размер отрисовываемой ячейки, то получится:
654fd380e834c479031828.png

Код отрисовки:
context.drawImage(
  model.image,
  sourceRect.posX,
  sourceRect.posY,
  sourceRect.sizeX,
  sourceRect.sizeY,
  partRect.posX,
  partRect.posY,
  partRect.sizeX,
  partRect.sizeY,
);

(sourceRect - позиция ячейки на исходном изображении, partRect - позиция ячейки на canvas'е).

Камера привязана к позиции игрока и позиции всех объектов вычисляются в зависимости от координат игрока, т.е. partRect - содержит дробные числа. Если добавить округление координат до целого числа, то вторая проблема исчезает, но первая становится более явной.

Я пробовал также добавить смещение на 0.5px, но это не решило проблему, а наоборот, мешало остальным частям правильно отрисовываться.
  • Вопрос задан
  • 165 просмотров
Решения вопроса 1
trapwalker
@trapwalker
Программист, энтузиаст
Обычно такое получается из-за того, что тайлы сперва масштабируют, а потом размещают на канве. Нужно наоборот, масштабировать уже состыкованную из тайлов катинку.
При ресайзе крайние пиксели получаются немного не того цвета.
Короче, надо вставлять тайлы в исходном их размере на холст.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы