Тайловая графіка Phaser.js і принципи побудови тайловых карт

Здрастуй, Хабр!

Сьогодні ми поговоримо про тайловой графіку, створимо невелику карту і розберемося в принципах побудови плиткових карт.

Ми будемо використовувати JavaScript фреймворк «Phaser.js», завдяки якому ми одержимо ряд переваг, в тому числі готовий механізм рендеринга тайловых карт.

Сам механізм підвантаження тайловых карт Phaser пропонує нам на вибір відразу 2 варіанти зберігання тайловых карт — JSON і табличні дані у форматі CSV.

У редакторі, про який я розповім пізніше, я зробив два шари: з травою і деревами.

image

Так, виглядає це все чудово, але треба розібратися, що ж таке тайл, як зібрати з них цілий світ, що є набори тайлів і як влаштований Phaser.Tilemap.

«Тайловая графіка»
Тут ми бачимо найпростіше полі 5 на 5, зображення трави і дерева. Кожна клітина, яких всього 25, називається тайлом.

Тайли — це фрагменти однакових розмірів, з яких формується тайловое зображення. Наприклад, розміри однієї нашої клітини складають 64 64 пікселя, відповідно, розміри тайла будуть дорівнюють розмірам клітини.
Шахова дошка, наприклад, складається з поля 8 на 8 клітин, ми можемо назвати білі і чорні поля — тайлами.

Кожен шар, створений нами в нашій карті представляється у вигляді масиву, де кожен його індекс містить інформацію про порядковому номері тайла в наборі.
Англійською мовою набір тайлів прийнято називати «tileset». Він містить певну кількість розташованих поруч один з одним зображень однакових габаритів.
Кожен набір тайлів поділяється на фрагменти однакових розмірів (тайли) і індексується порядковим номером з лівого боку.
Якщо ви використовуєте більше одного набору тайлів, то індекс плитки в наступному наборі буде включати в себе суму з кількості тайлів в попередніх наборах та індексу обраного тайла в поточному. Так, страшний текст, зараз поясню.

image

Я виділив червоним кольором поділ на тайли ~64х64. Номер тайла в наборі (tileset) починається з 1 і вважається з лівого боку. Нульовий тайл є порожнім.

Розмір нашого набору 10 на 9 клітин (тайлів), тобто, в наборі 90 тайлів. Індексація наступного набору, про який йшла мова вище, розпочнеться з 91-го номера.

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

Phaser.js і тайловая графіка
Ми дісталися до самого цікавого: завантаження тайловой карти і рендеринга в Canvas. Фреймворк Phaser.js відмінно справляється з цим завданням.

Нам необхідно ініціалізувати об'єкт Game, який є «мозком» Phaser. Він надає швидкий доступ до всіх функцій і необхідним обробників.
Після чого, завантажити саму тайловую карту з JSON-файлу, а також всі зображення з наборами тайлів. Залишається відобразити все це на наш полотно, створивши необхідні шари і змінивши поточні розміри ігрового світу під розміри шару.

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

function preload() {

game.load.tilemap('tilemap', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);

/* Наші набори тайлів */ 

game.load.image('tiles', 'assets/tileset.png');

}

var map;
var layer;

create function() {

game.stage.backgroundColor = '#000';

/* Візуалізація карти на полотні. Необхідно передати ключ завантаженої карти. */
map = game.add.tilemap('tilemap');

map.addTilesetImage('tiles');

/* Створюємо новий шар з назвою «Layer» */
layer = map.createLayer('Layer');

/* Підганяємо розміри ігрового світу під розміри шару */
layer.resizeWorld();

}


JSON
Файл JSON описує шари, набори тайлів, розміри тайла і розміри самої карти. Думаю, що розповідати детальніше про його наповнення не має сенсу, оскільки, ймовірно, навряд чи хтось буде займатися наповненням JSON-об'єкта вручну.
Як ви вже зрозуміли, об'єкти, що описують шари, мають ключ з описом тайлів карти. Дані зберігаються в одновимірному масиві і мають кількість клітинок, рівне кількості тайлів на карті.
Карта розміром 5 на 5 тайлів буде мати 25 осередків у масиві, кожна з яких описує порядковий номер тайла в сеті (наборі), про що я і писав в попередньому розділі.
Для створення карт і автоматичної генерації потрібних форматів існує безліч редакторів, але, я буду розповідати про Tiled.

Редактор Tiled
Tiled — це відмінний інструмент для створення тайловых карт з відкритим вихідним кодом, що вже згадувався на Хабре і є кросплатформним.
Завдяки Tiled ми зможемо створювати і зберігати наші плиткові карти в різні потрібні нам формати. До речі, версія 0.4.1, яка вийшла вже досить давно (14 квітня 2010), ми можемо зберігати карти в формат CSV, який теж підтримується Phaser.

На Хабре вже є пост, присвячений цьому редакторові з більш докладним описом. До речі, є підтримка російської мови, тому розібратися в ній ще простіше.

Посилання
Документація по Phaser: docs.phaser.io/
Вихідний код Phaser: github.com/photonstorm/phaser
Tiled: www.mapeditor.org/download.html

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.