Как сделать тайл

Добавил пользователь Валентин П.
Обновлено: 01.09.2024

В этой статье вы узнаете, как использовать Tiled для визуального проектирования карт и как загружать созданные карты в SFML

Содержание

Самый простой способ задать карту — объявить массив, например, такой:

Для простой аркадной игры это нормально, но когда в игре должно быть несколько уровней, разные противники, разные бонусы — требуется решение получше. Можно написать свой редактор карт, но это большой объём работ. Проще использовать универсальный редактор карт Tiled, и научиться интерпретировать созданные им карты в игровом движке.

Создание карты

Для создания карты воспользуйтесь меню “Файл>Создать”.

измените ориентацию на “Ортогональную”, если, конечно, не собираетесь писать изометрическую игру
если ваша версия Tiled позволяет, измените сразу же формат слоя на XML, иначе оставьте CSV

В новых версиях Tiled формат слоя XML недоступен при создании, но может быть установлен позже — в этом случае выберите, например, CSV (т.е. Comma Separated Values). Формат слоя тайлов не меняет главного — карта TMX всё равно остаётся XML-документом, меняется лишь представление узла, содержащего данные о тайлах.

После создания карты её свойства можно изменить, для этого вызовите меню “Карта>Свойства карты…”. Нам потребуется изменить формат слоя на XML, иначе наш простой парсер не сможет его обработать

Добавляем тайлы

Далее нам надо добавить тайлы в меню “Карта>Добавить внешний набор тайлов…”. Набор тайлов для редактора сохраняется в файле с расширением *.tsx и в находящемся рядом с ним изображении. Добавленные тайлы окажутся внизу правой панели

Тайлы объединяются в слои, и каждый новый слой рисуется поверх другого (например, полупрозрачный и не везде заполненный слой травы рисуется поверх слоя земли). Слои редактируются вверху правой панели

Объекты

Если файлы являются только фоном, то объекты активно участвуют в игровой логике. Объект — это квадратная, круглая или многоугольная область. Чтобы создавать объекты, сперва создайте слой объектов на панели слоёв. После станет доступна панель инструментов объектов

У области есть имя и набор произвольных свойств, что позволяет использовать области как маркеры мест, в которых потом появится игрок, противники или бонусы. Также можно превратить область в физическое препятствие, или считать областью случайного появления противников, или расположить там портал, при достижении которого происходит переход на новый уровень. Обработкой объектов занимается движок игры.

Выберите на этой панели кнопку “Вставить прямоугольник”, и разместите его где угодно на карте. Когда вы отпустите кнопку мыши, новая прямоугольная область окажется выбрана, а в левой панели будут доступны её свойства

Поля “Имя” и “Тип” хранят строки, в которых удобно задавать категорию объекта (например, тип юнита игры или бонуса, который он представляет). Впоследствии игра считает эти строковые свойства и сможет выбрать, какой объект надо создать в указанном месте.

Разбор карты в программе

Для разбора карты в формате XML мы воспользуемся библиотекой Tinyxml2, файлы исходного кода tinyxml2.cpp и tinyxml2.h мы можем просто скопировать в проект.

Для удобства можно использовать готовый компонент, способный загружать XML в память, проводить базовую валидацию карты и предоставлять доступ к объектам и тайлам. Компонент представляет собой файлы TmxLevel.h и TmxLevel.cpp , содержащий структуры TmxObject и TmxLayer , а также класс TmxLevel, выполняющий загрузки и хранение слоёв и объектов.

Продемонстрируем объявление TmxObject:

Данная структура содержит поле Sprite, которое содержит графическое представление объекта (текстурой спрайта служит единая текстура TMX-карты). Спрайт можно использовать для рисования объекта:

Методы MoveTo и MoveBy можно использовать для перемещения к заданной точке / на заданное расстояние соответственно:

Слой представлен следующей структурой:

Рисовать слой отдельно не требуется, поскольку это статичный элемент карты, и с рисованием слоёв вполне справляется класс TmxLevel:

Метод TmxLevel::Draw был оптимизирован для ускоренного рисования карт огромного размера: невидимые тайлы отсекаются с помощью проверки пересечения с прямоугольником карты.

Ограничения класса загрузчика

Класс не умеет загружать форматы слоя тайлов, отличные от XML, поэтому не забудьте выставит данный формат для всех карт уровней, которые собираетесь загружать в игре.
Класс не умеет обрабатывать более одного атласа тайлов (tilesheet)
Класс не умеет загружать изометрические карты

Пример (с исходным кодом)

Для демонстрации возможностей загрузчика на github размещено минимальное приложение на C++ с SFML, загружающее карту и позволяющее передвигаться по ней (без учёта столкновений с препятствиями):

src/TmxLevel.h and src/TmxLevel.cpp — *.tmx file parser
lib/tinyxml2/tinyxml2.h and lib/tinyxml2/tinyxml2.cpp — external library Tinyxml2 used to parse TMX format
src/GameScene.h , src/GameScene.cpp , src/GameView.h , src/GameView.cpp , src/main.cpp — small demo application

Чтобы убедиться, что мы воспроизводим карту правильно, пиксель-в-пиксель, сделаем скриншот игры на фоне редактора, где открыта та же карта:

2D Тайлмап. Работа с контентом: от изображения к уровню

В Unity 2017.2 к возможностям работы с 2D добавили Тайлмапы (Tilemap). Используя карты тайлов, ты можешь быстро компоновать и создавать 2D-уровни с помощью комбинации спрайтов и контролировать такие свойства, как порядок слоёв, тайлмапные коллайдеры, анимированные тайлы и многое другое! В этой записи я постараюсь рассказать о всём рабочем процессе, начиная с импорта файлов изображений в Unity и до создания уровня для 2D-платформера!

Коротко процесс работы можно описать так:

Sprite -> Tile -> Palette -> Brush -> Tilemap

Для новичка эти термины Unity могут показаться немного запутанными. Но мы представим это как рисование на настоящем холсте:

Тюбик с краской -> Краска -> Палитра-> Кисть -> Холст

К концу мы соберём уровень из этих кусочков так, что 2D-персонаж сможет бегать по уровню.

1) Спрайты (Sprites)

Импортировать изображения в Unity можно разными способами:

После того как мы импортировали изображение в проект, его тип текстуры (Texture Type) определяется в зависимости от режима твоего проекта 2D или 3D.

Окно редактора спрайтов позволяет нарезать изображение на несколько спрайтов; так что ты сможешь сделать одно изображение со множеством рисунков (spritesheet) в любом программном обеспечении для редактирования изображений и определить, какие области изображения рассматриваются как отдельные спрайты прямо в Unity. Не надо плодить и управляться с сотнями отдельных файлов изображения!

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

В Unity 2017.2 появилось новое окно: палитра плиток (Tile Palette). Это окно является неотъемлемой частью использования тайлмап-системы, организуя интерфейс для выбора плиток (Tiles).

Чтобы не таскать по одному изображению, есть вариант перетащить лист спрайтов (Spritesheet), который содержит нарезанные спрайты, чтобы автоматически создать набор плиток (Tiles) на палитре.

4) Grid & Tilemap

Для начала нам нужно создать новый тайлмап на нашей текущей сцене; это можно сделать в выпадающем меню: GameObject -> 2D Objects -> Tilemap. Это не только создаст тайлмап, также создаётся игровой объект сетка (Grid), для которой новый тайлмап автоматически станет дочерним.

Тайлмап-система была разработана так, что несколько тайлмапов игровых объектов могут быть дочерними к одной сетке. Это позволит собрать твой уровень из нескольких слоев и из разных плиток.

5) Рисование на тайлмапе!

В выпадающем списке будут показаны все экземпляры тайлмапов на сцене. Ты сможешь выбрать один, чтобы рисовать на нём.

На скриншоте сложная сцена со множеством тайлмапов

Второе, что нужно выбрать — текущую кисть. Она определяет, как плитка (или плитки) будут размещены на тайлмапе.

Когда плитки уже нарисованы на карте, может оказаться, что плитка меньше, чем размер ячеек сетки. Это не ошибка, объясню, почему и как изменить это.

6) Тайлмап коллайдер (Tilemap Collider) и составной коллайдер (Composite Collider)

Сейчас у тебя есть все знания, чтобы нарисовать готовый уровень.

Когда ты добавишь персонажа с физикой и войдёшь в режим игры, он провалится сквозь землю. Вместе с тайлмап-системой появился очень полезный 2D-компонент тайлмап коллайдер (Tilemap Collider). При применении к тайлмапу, он будет автоматически создавать коллайдер вокруг плиток. Тогда в режиме игры, наш персонаж сможет бегать и прыгать на тайлмапе!

Если ты решишь изменить планировку уровня (например, добавить больше плиток или удалить некоторые), то тайлмап коллайдер автоматически обновится!

Создание игр основывающихся на тайлах — хорошая практика, но надо помнить, что это не единственный вариант. Иногда, лучше нарисовать всё целиком, в этом поможет статья как выбрать разрешения для 2D-контента.

Еще один полезный компонент, который добавили в 2D набор физики — составной коллайдер (Composite Collider). Добавление его к тайлмап коллайдеру объединит все коллайдеры плитки в более оптимальную геометрию сетки коллайдера.

Если после этой подробной статьи у тебя остались вопросы, оставляй комментарий ниже, обсудим!

Это четвертая статья из цикла про ААА-пайплайн. Вот ссылки на все пять, выбирай ту, которая тебе нужна:

Эта статья поможет новичкам научиться делать развертку так, чтобы на этапе запечки не возникало неожиданных проблем. Ты узнаешь, что такое UV маппинг (развертка), зачем он нужен и из каких этапов состоит. Внимательное изучение статьи займет около 20 минут. Если возникнут вопросы — пиши в чат-бот (кнопка справа внизу). Там на связи живой менеджер :) Он поможет разобраться. Ну что, давай начнем!

Что такое развертка

В редакторе на модель можно наложить материал, выбрать его цвет и настроить блик. Но положить текстуры на 3D-объекты нельзя. Программа просто не знает как накладывать плоскую текстуру на геометрию. Для этого нам нужна 2D-развертка объемной модели.

Развертка похожа на инверсное оригами. В оригами ты делаешь из плоского листа бумаги 3D-объект, а в развертке наоборот — из объемного делаешь плоское.

Предисловие

В этой статье я расскажу о программах для создания из карты тайлов. Т.е. создания картинки из повторяющихся кусочков изображения (тайлов). Если вам нужно, получить уникальные тайлы из изображения, то PyxelEdit такое может.

Я разбросал редакторы в порядке актуальности:

LDtk — лучший редактор карт (бесплатный), от создателей Dead Cells, поддерживает создание тайловой сетки и установку entity на карте. Поддерживает правила установки тайлов, что очень сильно, упрощает рисование карты. Например, рисуешь землю, а редактор сам, автоматически, расставляет растительность. Поддерживает экспорт в tmx (формат Tiled), что хорошо, потому-что tmx, через плагины, поддерживается многими движками (Game Maker, Unity, Godot).
Tiled — тоже хороший тайловый редактор, однако, удобство интерфейса уступает LDtk.
PyxelEdit — хороший тайловый редактор, поддерживает разбиение картинки на уникальные тайлы (стоит 9$)
Aseprite — для тайлов, не очень подходит, но для рисования, самое то (бесплатен, если компилить, а так, стоит 20$)
Sega Genesis Tile Editor — еще не вышел, поэтому на последнем месте. Но когда выйдет, думаю он будет лучше чем PyxelEdit.

LDtk в действии:

PyxelEdit

Нажмите File->Import->Import tiled image(s). Что-бы можно было разбить импортируемое изображение на тайлы.

Размер тайла, выбираем 8x8 px.

PyxelEdit достаточно умен, и сам разбил изображение на уникальные тайлы, которыми можно рисовать, как кисточкой.

За 30 секунд, я сделал такую горку.

Вы, также, можете экспортировать тайловую сетку, и использовать её в Unity или Godot.

Вот, что получилось.

тайлсет полученный из тайловой карты

Aseprite

Редактор Aseprite, не дает возможности рисовать тайлами, но позволяет сделать привязку по сетке.

Для включения сетки, нажмите View->Grid->Grid Settings.

И установите размер тайла в сетке.

Теперь, нажмите Shift+S для включения привязке по сетке.

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

Тайловый редактор и причем здесь крипипаста по годзилле?

Iuri Nery ютубер, занимающийся созданием игры, по крипипасте про годзиллу (на Game Maker). Недавно, начал разрабатывать тайловый редактор (на, все том же Game Maker), специально под SGDK.

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

Читайте также: