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

1 ответ

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

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

Получается что-то такое:

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

Код отрисовки:

context.drawImage(   model.image,   sourceRect.posX,   sourceRect.posY,   sourceRect.sizeX,   sourceRect.sizeY,   partRect.posX,   partRect.posY,   partRect.sizeX,   partRect.sizeY, );

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, но это не решило проблему, а наоборот, мешало остальным частям правильно отрисовываться.

Дополнительно:

Обычно такое получается из-за того, что тайлы сперва масштабируют, а потом размещают на канве. Нужно наоборот, масштабировать уже состыкованную из тайлов катинку.
При ресайзе крайние пиксели получаются немного не того цвета.
Короче, надо вставлять тайлы в исходном их размере на холст.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Артём Dev Ответ

Для отрисовки Tileset'ов на Canvas вам понадобится использовать методы рисования из объекта CanvasRenderingContext2D. Tileset обычно представляет собой изображение, содержащее набор изображений (тайлов), которые могут быть использованы для создания игрового мира или интерфейса.

Ниже приведен пример кода на JavaScript, показывающий как отрисовать Tileset на Canvas:

// Создаем новый Image объект
var tileset = new Image();
 
// Указываем путь к изображению Tileset
tileset.src = 'путь_к_изображению_tileset.png';
 
// Ждем загрузки изображения
tileset.onload = function() {
    // Получаем контекст Canvas
    var ctx = canvas.getContext('2d');
 
    // Размеры тайла в Tileset
    var tileWidth = 32;
    var tileHeight = 32;
 
    // Количество тайлов в Tileset
    var tilesPerRow = tileset.width / tileWidth;
 
    // Индекс тайла, который мы хотим отобразить
    var tileIndex = 0;
 
    // Позиция, в которую мы хотим отрисовать тайл на Canvas
    var x = 0;
    var y = 0;
 
    // Вычисляем координаты тайла в Tileset
    var tileX = (tileIndex % tilesPerRow) * tileWidth;
    var tileY = Math.floor(tileIndex / tilesPerRow) * tileHeight;
 
    // Отрисовываем тайл на Canvas
    ctx.drawImage(tileset, tileX, tileY, tileWidth, tileHeight, x, y, tileWidth, tileHeight);
};

// Создаем новый Image объект var tileset = new Image(); // Указываем путь к изображению Tileset tileset.src = 'путь_к_изображению_tileset.png'; // Ждем загрузки изображения tileset.onload = function() { // Получаем контекст Canvas var ctx = canvas.getContext('2d'); // Размеры тайла в Tileset var tileWidth = 32; var tileHeight = 32; // Количество тайлов в Tileset var tilesPerRow = tileset.width / tileWidth; // Индекс тайла, который мы хотим отобразить var tileIndex = 0; // Позиция, в которую мы хотим отрисовать тайл на Canvas var x = 0; var y = 0; // Вычисляем координаты тайла в Tileset var tileX = (tileIndex % tilesPerRow) * tileWidth; var tileY = Math.floor(tileIndex / tilesPerRow) * tileHeight; // Отрисовываем тайл на Canvas ctx.drawImage(tileset, tileX, tileY, tileWidth, tileHeight, x, y, tileWidth, tileHeight); };

В этом примере мы загружаем изображение Tileset, ждем его загрузки, получаем контекст Canvas, определяем размеры тайла в Tileset, количество тайлов в строке, индекс тайла для отображения, координаты тайла в Tileset и отрисовываем его на Canvas с помощью метода drawImage.

Вы можете настроить этот код в соответствии с вашими потребностями, изменяя размеры тайла, количество тайлов в строке, индекс отображаемого тайла и его позицию на Canvas. Надеюсь, это поможет вам отрисовать Tileset на Canvas.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Figma Баг с переносом слов в Figma? 1 ответ

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

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно