Тайловая графическая система /0×04

В предыдущих частях мы почти полностью реализовали тайловую графическую систему. Дело осталось за малым.

Редактор

Собственно говоря, нам нужен удобный тайловый редактор. Мне, в этом случае, очень подошел: Tiled. Давайте создадим в нем проект c параметрами: (на проект есть ссылка внизу)

  • Размер 80×26
  • Размер тайла 16×16
  • Ортогональная
  • 3 слоя тайлов (Background, Tiles, Frontground)

Также подключим свой набор тайлов, с цветом прозрачности: 100%Красного + 100%Синего.

Начинаем рисовать. Выбираем нужный нам тайл(нижний правый угол), выбираем слой(верхний правый угол) и просто ставим его на карте. С остальными аналогично. Пример:

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

Теперь вы можете экспортировать свой проект в формат json(файл->экспорт), либо оставить его в формате tmx. Как вы будете его подгружать в структуру карты — это уже другая история… *Ссылка на файл проекта*

Конвертер изображений

Чтобы перевести изображения в формат 8бит и экспортировать его данные — нужен конвертер. Я взял конвертер с www.zipfelmaus.com и немного его модифицировал. *Ссылка* Пользоваться просто. Выбираем файл(-ы) и получаем это:

То, что получилось в исходном поле, больше подойдет для спрайтов(картинка с установленными размерами). Для создания набора тайлов(texturepack) нужно всего лишь удалить первые две строчки:(0x30, 0x30), т.е просто убрать информацию о размерах. И еще, утилита конвертирует в формат 8-bit палитры: @RRRGGGBB@. 3бита на красный, 3бита на зеленый, 2бита на синий. 

Полупрозрачность тайла

В этой системе не предусмотрен настоящий альфа-канал, но есть цвет 0xE3, который обозначен как за полностью прозрачный пиксель. Полупрозрачность делается так:

Этот трюк был еще на старых компьютерах, консолях. К примеру: Sega Saturn — у нее не было аппаратной поддержки прозрачности. Вот как это выглядит в 256цветах на уже нарисованной карте:

  (Некоторые искажения вносит сам редактор при отображении)

Пример работы

Самый яркий и единственный пример работы вы можете увидеть в этом видео:

Используется одна ArduinoDue(ATSAM3X 86MHz). Вывод изображения происходит без двойной буферизации и zbuffer-а, так как не хватает ОЗУ, поэтому возникает эффект строба/моргания. Помимо самой графической системы, используются и другие. Пока я работаю над этим проектом, надеюсь, скоро он будет завершен…

На этом все. :mrgreen: 

Продолжение не следует.


Все части статьи

Вы можите оставить комментарий, или поставить трэкбек со своего сайта.

Написать комментарий

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Bug Report
Локализовано: шаблоны Wordpress