Skip to content

Створення рівнів в Tiled

Все, що стосується ігрових рівнів додано в папку simple_rpg/map. В тому числі і проєкт Tiled.

Додавання набору плиток

Після створення проєкту, до нього потрібно додати набори плиток. Це можуть бути створені вами плитки або завантажені з мережі.

Важливо

Tiled дозволяє створювати ігрові світи з таблиці плиток. Проте нам такий варіант не підходить. Кожна плитка повинна бути збережена у вигляді окремого зображення. Якщо ви завантажили набір у вигляді таблиці, вам потрібно розрізати його на окремі плитки у будь-якому графічному редакторі. Зображення плиток повинні бути збережені у форматі png.

При додаванні набору плиток в проєкт, потрібно обрати варіант "Колекція зображень". У вікні редактора набору натисніть іконку з плюсом, та додайте свої зображення.

Рекомендується називати зображення по порядку числами від нуля. Tiled додасть їх по черзі в набір за їх назвою. Після цього буде дуже просто імпортувати ці плитки в ігровий рушій та зв’язати з ідентифікаторами, адже ідентифікатор плитки на мапі буде відповідати назві плитки. Якщо задати власні назви зображеннь, вам доведеться уважно слідкувати, щоб нічого не наплутати під час імпорту плиток в ігровий рушій. Через це також рекомендується додавати усі плитки до одного ігрового рівня в один набір. З декількома наборами Tiled буде по особливому присвоювати ідентифікатори плиткам. Тож у вас в майбутньому виникне багато проблем з їх імпортом в гру. Можливо, навіть, доведеться написати скрипт, який це робитиме замість вас. Для різних сцен зображення плиток можна сміливо розділяти на окремі набори. Зображення наборів також повинні бути у окремих папках та іменуватися від 0. Я залишу в проєкті зображення плиток, щоб ви могли самостійно спробувати зібрати ігровий рівень та зрозуміти, як це працює.

Головне правило, яке вам потрібно запам'ятати - не змішуйте різні набори плиток на одній ігровій сцені!

Створення ігрової мапи

Нарешті, коли набори плиток готові, потрібно додати в проєкт нову ігрову мапу з налаштуваннями, як на зображенні.
tiled_map

Важливо

Розмір ігрового рівня в пікселях повинен бути не меншим за розмір дисплея! В іншому випадку, ігровий рушій не зможе коректно відмалювати його.

Під час створення нової мапи, розмір плиток потрібно вказати той, який ви плануєте використовувати для неї.

На розміщенні плиток ігрового рівня зупинятися не будемо. Інтерфейс в Tiled дуже простий, а на YouTube є достатня кількість відеоінструкцій.

Важливо

Не залишайте в Tiled порожні місця на ігровій сцені! Якщо вам потрібно залишити отвір, наприклад в підлозі, крізь який буде видно фонове зображення, додайте в цьому місці плитку-заглушку. Під час імпорта в гру, для цієї плитки передайте nullptr в якості зображення. Тоді вона буде коректно оброблена і пропущена ігровим рушієм.

Імпорт ресурсів сцени в гру

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

1) Конвертувати мапу з Tiled формату tmx в формат csv. В Tiled є конвертер, тож додаткові утиліти шукати не потрібно. З відкритим ігровим рівнем потрібно натиснути меню Файл - Експортувати як, та обрати розширення формату csv.
2) Перетворити вміст csv файлу в масив. Відкриваємо csv файли у VSCode, та додаємо символ коми в кінці кожного рядка файлу, як показано на зображенні.
csv_convert
3) Додати сформовані масиви, що містять інформацію про рівні, в гру. Я, зазвичай, додаю шаблони ігрових рівнів у папку my_game/map/template. Ви можете додати їх, де вам буде зручно. Відкрийте заголовковий файл main_scene_tmpl.h та ознайомтесь з прикладом, як потрібно додавати дані з csv файлу в масив.
4) Додати зображення плиток в прошивку.

Імпорту зображень в прошивку, потрібно приділити трохи більше часу, аніж іншим крокам.

Мікроконтролер не може відобразити файли звичайних упакованих зображень, до яких всі звикли. Звичайно, можна вивести зображення формату png з карти пам’яті на дисплей, але для цього потрібно буде виконати неприпустимо дорогі, в контексті гри, дії, що перетворять дані з png файлу у потрібний формат. Тому всі зображення, які необхідно відображати на дисплей з мінімальною затримкою, потрібно обробити за допомогою спеціальних утиліт, перед їх імпортом до прошивки. Під час конвертування зображення, усі дані про колір його пікселів перетворюються у масив двобайтових значень. Саме цей масив нам і потрібен, тому що мікроконтролер зможе вивести його на дисплей найшвидше.

Для конвертації зображень можна скористатися онлайн утилітами. Проте, я, особисто, надаю перевагу офлайн інструментам. З усіх, перевірених мною, можу порекомендувати до використання дві: "GUIslice Image2C" та "Lcd image converter". Перша має більш зрозумілий інтерфейс, але, за певних умов, може видавати некоректний результат. Друга, хоч і не така зручна, працює безвідмовно. Нижче зображення того, як потрібно налаштовувати утиліти перед використанням.
guislice
lcd_conver1
lcd_conver2

Після конвертації, утиліта генерує с-файл, в якому є потрібна нам інформація про пікселі. Щоб додати ці дані в прошивку, необхідно створити заголовковий файл, що міститиме в собі масив з описом пікселів. Якщо ви відкриєте файл \map\tiles\open_world\tile_0.h то побачите приклад, як це зробити правильно.
Як ви могли помітити, кожен набір плиток розміщено до свого простору імен. Це потрібно для уникнення конфліктів імен з різних наборів плиток.
Варто також звернути увагу на стиль іменування масивів з даними пікселів. Обирайте імена таким чином, щоб їх можна було без плутанини в майбутньому зв’язати з ідентифікаторами плиток.

← Створення ігрової сцени | Ігровий об'єкт →