Что такое тайл
Вы, наверное, представляете себе, что такое тайл, но давайте все же познакомимся с ним поближе. Тайл выглядит как картинка фиксированного размера. Причем нарисованная таким образом, что при сопоставлении с другими тайлами получается единое изображение без заметных “швов”. Легче всего представить тайлы как кафель, которым облицовывают стены или полы. Самый простой тайл - квадратное изображение, симметричное по вертикали и горизонтали (вы можете видеть его на иллюстрации). Если составить эти картинки друг с другом, то получится большое полотно дерна. А если внести в эту живописную картину для разнообразия еще один вид тайла, скажем, изображающий дорогу, то можно уже составить примитивную карту.
Давайте теперь посчитаем затраты, которые от нас потребуются для создания карты размером 512x512 клеток. Допустим, что сам тайл будет размером 32x32 пикселя, тогда он будет занимать в памяти 1024 байта - 1 килобайт. После подсчетов оказывается, что простейшая карта занимает в памяти около 262 килобайт плюс память для хранения изображений самих тайлов. А вот если бы мы рисовали такую же по площади область вручную, то нам пришлось бы положить на алтарь технического прогресса 268 мегабайт (!). И это при том, что я брал для простоты режим в 256 цветов. Понятно, что даже сейчас не каждый компьютер обладает таким количеством памяти, так что тайловое строение карт используется в подавляющем большинстве двухмерных и в достаточном количестве трехмерных игр.
Прямоугольные и квадратные тайлы хороши для представления вида с высоты птичьего полета, но существует и другой вид проекции, называемый изометрией. Он используется, когда надо дать ощущение объема, глубины, сделать псевдо-3D . Отсюда изометрические системы иногда называют 2.5D. В чем же здесь суть? Теперь тайл будет выглядеть повернутым одним углом к зрителю и как бы уходящим вглубь (посмотрите на иллюстрацию). Двухмерная по своей сути картинка обретает третье измерение. При этом размеры квадрата (тайла) определяются следующим образом:
1. Длина - от самой левой до самой правой точки изображения.
2. Ширина - от самой “дальней” до самой “ближней” точки к зрителю.
3. Высота - "толщина" тайла.
Для создания эффекта объема ширина должны быть меньше длины примерно в два раза. Экспериментируя с эти отношением, вы как бы вертите "плиткой" в трехмерном пространстве, выбирая нужную проекцию. Для этих целей полезно использовать какой-либо аналог 3D-студии. Создайте там плитку, выберите ее положение, а затем измерьте стороны и получившиеся соотношения.
Но как же теперь нарисовать такой тайл на экране? Ведь обычные функции рисования привыкли к тому, что им дают прямоугольную область для вывода, с чем они прекрасно справляются. Задача эта решается с помощью масок. На иллюстрации вы увидите, что контуры плитки попадают в белую область, а то, что остается за бортом, окрашивается в черный цвет и формирует прямоугольник. Получается принцип трафарета: изображение накладывается на маску и на “холст”, а проходят только те точки, которые попадают в белый цвет. Даже стандартные функции рисования Windows обучены вытворять такие штуки, не говоря уже о функциях DirectX. При этом использование масок позволяет делать и другие эффекты. Например, вы можете нарисовать только шапку тайла, отбросив его высоту. Или сделать разные участки травы с использованием только одной картинки. Если создать маску, состоящую сплошь из дырок, и с ее помощью отобразить тайл с травой на месте уже существующего тайла другого типа, у нас получится плавный переход от одной поверхности к другой. Подобный прием можно применять во множестве случаев, а “дырявые” маски генерировать случайным образом. Тогда никто и не догадается, что у вас не пререндеренный пейзаж. Получается своеобразное мультитекстурирование: когда на один участок накладываются два взаимно прозрачных изображения. Правда, это отнимает достаточное количество компьютерного времени.
В самом простом случае высота тайла равна нулю и не просчитывается. Однако если мы будем использовать только такие "кирпичики", то мы добьемся создания в лучшем случае приятной полянки. Используя различающиеся высоты, мы добьемся создания более реалистичного пейзажа, со стенками и пригорками. Конечно, выводить такие “кирпичики” на экран будет сложнее. Теперь мы должны познакомиться с понятием базовой линии тайла.
Базовая линия - это место, в котором тайл соприкасается с “землей”. На картинке они выделены розовым цветом. Базовая линия может проходить в любом месте на линии вертикали, ведь для стены разной величины может использоваться одно и то же изображение. Тогда на карте размещения тайлов отображаются базовые линии, а сами тайлы начинают отрисовываться из более верхнего положения.

2Dfx
Мы уже рассматривали, какие эффекты можно создавать, используя несколько тайловых слоев. В реальных играх вся карта является многослойной, как пресловутый пирог: первый слой - это земля, камни, грязь, вода и тому подобное; второй слой - всякая периферия типа деревьев, скал, столов и стульев; третий слой - объекты: люди, монстры, ключи и магические зелья.
Вы можете добавлять еще слои для вышеупомянутых эффектов, но обычно для обеспечения лучшей производительности используют четыре-пять. Скажем, четвертый слой в нашей схеме можно добавить для создания объектов, которые будут находиться выше уровня головы персонажей, например крыш домов. Вы все встречались с таким эффектом: когда герой подходит к зданию вплотную, у того вдруг исчезает крыша, и вы можете увидеть внутренности строения. Так вот, очень легко заставить тайловый движок перестать отрисовывать четвертый слой, чтобы пользователь увидел все, что скрывается под ним.
Тайловые движки, основывающие свою графику на принципе палитр, активно используют эффект ротации цветов. Пусть некая синяя гамма используется для отрисовки воды. Тогда, изменяя эту гамму или, наоборот, переставляя индексы в тайле, можно получить эффект перетекающей воды. Тот же самый фокус проходит и для других поверхностей. Скажем, в пещере тайлы, изображающие скалу, можно сделать темнее. А если вручить персонажу в руки факел и в зависимости от его позиции осветлять окружающую местность - эффект получится очень красивый. Я уже не говорю о динамической смене дня и ночи. Менеджмент палитр - очень интересный вопрос, вдобавок очень хорошо разработанный и изученный в период тотального 256-цветия, когда без палитр не обходился никто. Даже сейчас, когда цветность меньше 16 бит считается неприличной, для хранения спрайтов используются собственные форматы, основанные на все тех же палитрах.
Кстати, кто сказал, что для вывода тайлов нужно обязательно использовать заезженные процедуры DirectDraw? Конечно, за долгое время существования были разработаны алгоритмы для многих эффектов: и динамического освещения, и даже систем частиц. Но все они работают очень медленно. Но у нас на дворе не 1996 год, и Voodoo Graphics является редкостью только из-за того, что все его уже повыкидывали. Поэтому было бы очень соблазнительно запрячь для повседневных нужд возможности 3D-акселератора.
3D-библиотеки могут помочь с выводом текстурированных полигонов (те же тайлы) - самым тормозным моментом в 2D-процедурах. При этом фильтрация (aka художественное размытие текстур) является само собой разумеющимся фактом. Кроме того, становятся доступны все эффекты, которые только есть в трехмерных играх: свет, прозрачность, тени, световые переходы и так далее. Предмет этот достаточно интересен для того, чтобы в нем попрактиковаться. Возможно, за ним лежит будущее тайловых игр.

Создание карт
Любая карта - это массив, задающий расположение тайлов на своих слоях, а также их параметры. Самая простая карта представляет собой матрицу MxN, где каждый ее элемент содержит номер тайла из условно принятой последовательности. Если вы когда-либо пользовались редактором карт двухмерной стратегии или РПГ (или работали в "Фотошопе"), вы легко уловите суть. Когда добавляются новые слои, матрица усложняется, получается уже набор (структура) матриц, а с введением каких-либо эффектов получается собственный формат карты, который занимает на диске не один мегабайт.
Тайлы не обязательно должны задаваться последовательными порядковыми номерами. Наоборот, для начала хорошо бы разбить весь ваш числовой ряд на несколько промежутков. Например, в промежуток от 0 до 63 входят обыкновенные тайлы, по которым можно ходить (земля, плиты). От 63 до 127 - непроходимые заросли джунглей, стены и другие твердые объекты. Следующий промежуток - воды озер и болот, наконец, специальные группы, которые выполняют какие-либо действия, когда герой “наступает” на них: порталы, ловушки и прочее. Теперь уже, по мере производства "Фотошопом" графики, вы присваиваете новичкам номера, исходя из принятых правил, и в дальнейшем освобождаетесь от многих проблем, связанных с определением проходимости участка или того, как надо реагировать, когда герой вошел в портал.
При прорисовке карты у вас поначалу могут возникнуть проблемы с рисованием изометрических тайлов, ведь они такие “кривые”, что непонятно, где надо рисовать один и продолжать второй. Трудности могут возникать при программировании плавного скроллинга или обрезки экраном участков карты. Кстати, размеры тайлов лучше всего делать в какой-либо степени двойки (16x16 или 32x32), это очень сильно помогает как вам, так и процессору при вычислениях.

Техника автоматического выбора нужного тайла из тайловой карты.

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

Задача: мы сгенерировали красивый уровень платформера и хотим иметь возможность автоматически располагать тайлы на нём с учётом соседей, чтобы они выглядели правильно.

Тайлы, учитывающие своих соседей

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

Однобитная карта

Набор тайлов (тайлсет)

Оцениваем соседей

Значение для каждой точки находится исследованием её соседей и прибавлением значений для тех из них, в которых есть камень. Например, если у исследуемой точки сосед сверху тоже заполнен камнем, то ей присваивается значение 1. Если заполнены камнем соседи сверху и снизу, то точке присваивается значение 1 + 4, то есть 5.

Можно заметить, что присваиваемые значения направлений такие же, что и значения в позициях в двоичных числах, и это неудивительно: оба типа значений — это способы представления возможных комбинаций четырёх позиций, каждая из которых может быть во «включенном» или «выключенном» состояниях (камень или «воздух»).

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

Сложение тайлов

Отлично!

Двигаемся дальше

Часть первая: избавляемся от «воздуха»

Представим, что вместо платформера мы работаем над двухмерной стратегией с видом сверху, в которой есть два типа тайлов — трава и вода. В таком случае тайловое изображение будет присутствовать в каждой точке карты, в ней не будет пустых мест, как в платформере. Это значит, что для определения подходящего тайла у каждой точки карты должно быть значение, сгенерированное на основании её соседей.

Мы можем использовать точно такую же систему оценки соседей, как и прежде, но нам потребуется способ, позволяющий при изучении точки определить, что в ней находится — трава или вода. Это реализовать очень просто — достаточно только добавить ещё одно значение самой точке, по тому же шаблону «2 в степени n» из других значений:

Давайте решим, что в случае наличия воды мы будем прибавлять к значению точки, а при наличии травы — не будем. То есть тайл травы, окружённый со всех сторон травой, будет иметь значение 0. Тайл травы с водой сверху и справа, имеет значение 1 + 8 = 9. Тайл воды, окружённый со всех сторон травой, будет иметь значение 16. Тайл воды, окружённый со всех сторон водой, имеет значение 1 + 2 + 4 + 8 + 16 = 31

Часть вторая: добавляем вариативности

Допустим, в игре с видом сверху есть три типа рельефа: вода, трава и лес. Мы уже обрабатываем границы воды и травы, теперь нам нужно научиться обрабатывать границы воды и леса, а также травы и леса.

Раньше у нас было два варианта тайлов для каждой соседней позиции (трава или вода), поэтому мы использовали двоичную систему исчисления. Теперь варианта уже три, поэтому нам нужно использовать троичную систему. Необходимо изменить систему оценки соседей для соответствия новой системе исчисления:

В двоичной системе использовался шаблон «2 в степени n», в новой же будем применяться шаблон «3 в степени n».

В троичной системе каждое положение имеет три возможных состояния: трава, вода, лес, или 0, 1, 2. Когда в текущей точке находится трава, мы игнорируем значение (умножаем его на 0). Когда в точке находится вода, мы прибавляем заданное значение (умножаем его на 1). В случае леса мы прибавляем удвоенное значение (умножаем его на 2).

То есть в случае тайла леса сверху и справа от которого находится вода, снизу лес, а слева трава: 81 * 3 + 1 * 2 + 3 * 1 + 9 * 3 + 27 * 0 = 275

Как можно заметить, на этом этапе для охвата всех комбинаций карты с тремя типами рельефа нужно уже отрисовать 324 тайловых изображения. При работе вручную это бы заняло очень много времени. Крайне рекомендую изучить хотя бы частично автоматизированные способы создания такого множества комбинаций.

Разумеется, таким же способом систему можно расширить на большее количество типов рельефа, но количество тайловых изображений намного увеличится. Поэтому я рекомендую наложить ограничения на то, какие тайлы могут соседствовать друг с другом. Например, если тайлы леса и воды никогда не могут граничить друг с другом, то в вышеуказанном примере понадобится на несколько сотен тайловых изображений меньше.

Битовый способ отображения тайловых карт

• Разработка игр

• Перевод

Техника автоматического выбора нужного тайла из тайловой карты.

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

Задача: мы сгенерировали красивый уровень платформера и хотим иметь возможность автоматически располагать тайлы на нём с учётом соседей, чтобы они выглядели правильно.

Тайлы, учитывающие своих соседей

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

Однобитная карта

Набор тайлов (тайлсет)

Оцениваем соседей

Значение для каждой точки находится исследованием её соседей и прибавлением значений для тех из них, в которых есть камень. Например, если у исследуемой точки сосед сверху тоже заполнен камнем, то ей присваивается значение 1. Если заполнены камнем соседи сверху и снизу, то точке присваивается значение 1 + 4, то есть 5.

Можно заметить, что присваиваемые значения направлений такие же, что и значения в позициях в двоичных числах, и это неудивительно: оба типа значений - это способы представления возможных комбинаций четырёх позиций, каждая из которых может быть во «включенном» или «выключенном» состояниях (камень или «воздух»).

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

Сложение тайлов

Отлично!

Двигаемся дальше

Часть первая: избавляемся от «воздуха»

Представим, что вместо платформера мы работаем над двухмерной стратегией с видом сверху, в которой есть два типа тайлов - трава и вода. В таком случае тайловое изображение будет присутствовать в каждой точке карты, в ней не будет пустых мест, как в платформере. Это значит, что для определения подходящего тайла у каждой точки карты должно быть значение, сгенерированное на основании её соседей.

Мы можем использовать точно такую же систему оценки соседей, как и прежде, но нам потребуется способ, позволяющий при изучении точки определить, что в ней находится - трава или вода. Это реализовать очень просто - достаточно только добавить ещё одно значение самой точке, по тому же шаблону «2 в степени n» из других значений:

Давайте решим, что в случае наличия воды мы будем прибавлять к значению точки, а при наличии травы - не будем. То есть тайл травы, окружённый со всех сторон травой, будет иметь значение 0. Тайл травы с водой сверху и справа, имеет значение 1 + 8 = 9. Тайл воды, окружённый со всех сторон травой, будет иметь значение 16. Тайл воды, окружённый со всех сторон водой, имеет значение 1 + 2 + 4 + 8 + 16 = 31

Часть вторая: добавляем вариативности

Допустим, в игре с видом сверху есть три типа рельефа: вода, трава и лес. Мы уже обрабатываем границы воды и травы, теперь нам нужно научиться обрабатывать границы воды и леса, а также травы и леса.

Раньше у нас было два варианта тайлов для каждой соседней позиции (трава или вода), поэтому мы использовали двоичную систему исчисления. Теперь варианта уже три, поэтому нам нужно использовать троичную систему. Необходимо изменить систему оценки соседей для соответствия новой системе исчисления:

В двоичной системе использовался шаблон «2 в степени n», в новой же будем применяться шаблон «3 в степени n».

В троичной системе каждое положение имеет три возможных состояния: трава, вода, лес, или 0, 1, 2. Когда в текущей точке находится трава, мы игнорируем значение (умножаем его на 0). Когда в точке находится вода, мы прибавляем заданное значение (умножаем его на 1). В случае леса мы прибавляем удвоенное значение (умножаем его на 2).

То есть в случае тайла леса сверху и справа от которого находится вода, снизу лес, а слева трава: 81 * 3 + 1 * 2 + 3 * 1 + 9 * 3 + 27 * 0 = 275

Как можно заметить, на этом этапе для охвата всех комбинаций карты с тремя типами рельефа нужно уже отрисовать 324 тайловых изображения. При работе вручную это бы заняло очень много времени. Крайне рекомендую изучить хотя бы частично автоматизированные способы создания такого множества комбинаций.

Разумеется, таким же способом систему можно расширить на большее количество типов рельефа, но количество тайловых изображений намного увеличится. Поэтому я рекомендую наложить ограничения на то, какие тайлы могут соседствовать друг с другом. Например, если тайлы леса и воды никогда не могут граничить друг с другом, то в вышеуказанном примере понадобится на несколько сотен тайловых изображений меньше.

Вы можете создать фон состоящий из тайлов. Причины для этого следующие: во многих играх Вы захотите иметь красивые фоны. Например, в лабиринтной игре Вы захотите, чтобы стенки подходили к друг другу, а в платформе Вы захотите, чтобы фон уровня включал изменяющиеся платформы, деревья и т.д. Вы можете сделать всё это в Game Maker , создавая множество различных объектов, а затем из них составлять свои уровни (комнаты). Но для обработки таких фонов потребуется много ресурсов компьютера, и загрузка таких уровней будет происходить медленнее из-за множества разнообразных объектов. Например, чтобы создать красивые стены в игре с лабиринтом Вам понадобится 15 объектов стен различных видов.

Стандартный выход, используемый во многих играх, заключается в том, что стены и другие статические объекты фактически рисуются прямо на фоне. Но, Вы можете спросить, откуда же игра узнаёт, когда объект натыкается на стену, если она (стена) всего лишь нарисована на фоне? А решение лежит таки на поверхности: Вы создаёте всего один объект стены для игры. Он должен иметь соответствующий размер, а выглядеть может как угодно. При создании комнаты поместите этот объект во все места, где имеется стена. А затем мы делаем данный объект невидимым. В результате, во время игры, Вы не будете видеть указанные объекты стен. Вы увидите вместо них красивый фон. Но твёрдые объекты стен (те, что не видны) - всё ещё там, и объект в игре будет реагировать именно на них.

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

Чтобы использовать тайлы в Вашей комнате, Вы сначала должны добавить в свою игру фоновое изображение, которое эти тайлы содержит. Если Вы хотите чтобы используемые тайлы были частично прозрачными, проверьте - что фоновое изображение Вы также сделали прозрачным. Когды Вы добавите фоновый ресурс, укажите - должен ли он использоваться как набор тайлов. Затем укажите размер каждого тайла и должны ли быть разделители между тайлами, как было указано в главе о фонах.

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

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

Теперь Вы можете добавлять тайлы, выбрав нужную плитку из набора в левом окне, а затем кликнув в соответствующей области комнаты, находящейся справа. Принцип добавления тайлов аналогичен ситуации с добавлением экземпляров объектов. Если Вы отключите опцию Delete underlying (Удалять при наложении) . Вы можете использовать правую кнопку мыши для удаления тайлов. Удерживая клавишу (при добавлении тайлов) Вы можете добавить сразу много тайлов. И удерживая клавишу , Вы можете перемещать тайлы на новое место. Клавиша позволяет указать точную позицию тайла. Имеется также дополнительное меню, которое появляется при удержании клавиши и щелчке правой кнопкой мыши по тайлу. Кнопки в такой инструментальной панели могут: очистить, сдвинуть, отсортировать или блокировать/деблокировать все тайлы. (В действительности, они действуют только в текущем слое, смотрите ниже).

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

Тайлы могут быть установлены в слоях, которые имеют разную глубину. Внизу Вы увидите текущую глубину. Значение по умолчанию - 1000000, что значит, что тайлы будут за экземплярами. Итак, экземпляры объектов обычно отрисовываются перед тайлами. Вы можете использовать кнопку Add (Добавить) , чтобы добавить новые слои тайлов, имеющих другую глубину. Отрицательные глубины могут использоваться для помещения тайлов перед экземплярами объектов. Если Вы устанавливаете для объектов разные глубины, то Вы можете поместить их между разными слоями тайлов. Если Вы нажмёте Delete (Удалить) , то Вы удалите слой вместе со всеми имеющимися тайлами. (Должен всегда быть хотя бы один слой). Если Вы нажимаете Change (Изменить) , Вы можете изменить глубину слоя плитки. Если Вы даёте такую же глубину другому слою, то они будут объединены.

Tiles can be placed in layers at different depths. At the bottom you see the current depth. Default this is 1000000 which is normally behind all instances. So the instances will move in front of the tiles. You can use the Add button to add new tile layers, each with a different depth. Negative depths can be used to put tiles in front of instances. If you also give objects different depths you can put them between different tile layers. If you press Delete you delete a tile layer together with all its tiles. (There must always be at least one layer.) If you press Change you can change the depth of a tile layer. If you give it the same depth as another layer, the layers are merged.

Использование тайлов - очень мощный инструмент, который необходимо задействовать с максимальной отдачей. Он намного быстрее работает, чем использование объектов, а изображения тайлов хранятся только в единичном экземпляре. Таким образом, Вы можете использовать огромные комнаты с тайлами, и расход памяти при этом будет минимальный.