Спрайты
Введение
Все объекты с анимацией называются спрайтами. Спрайт - это набор изображений со всеми кадрами, которые необходимо отобразить в анимации. В Open Surge спрайт состоит из двух вещей:
- Файл изображения, обычно в формате PNG. Эти файлы помещаются в папку images/.
- Файл *.SPR, который представляет собой текстовый файл, сообщающий движку, как правильно отобразить спрайт. Эти файлы помещаются в папку sprites/ и их можно открыть с помощью любого простого текстового редактора, такого как Блокнот.
В Open Surge в качестве прозрачного цвета используется цвет мадженты. Его код FF00FF или (RGB 255,0,255).
Пример: спрайт кольца
Разберём на примере сделующий спрайт
Давайте посмотрим, как Open Surge считывает данные с изображения, чтобы оно отображалось в игре. Мы рассмотрим файл спрайта с большим кольцом, включенный в игру (sprites/rings.spr).
... // Кольцо sprite "SD_RING" { source_file "images/rings.png" source_rect 0 128 176 16 frame_size 16 16 hot_spot 8 12 // Вращение animation 0 { repeat TRUE fps 16 data 0 1 2 3 4 5 6 7 } // Исчезновение animation 1 { repeat FALSE fps 8 data 8 9 10 } } ...
В приведенном выше файле есть несколько моментов:
- Есть строки, начинающиеся с //. Эти комментарии. Они существуют только для вашего удобства и игнорируются движком.
- sprite "SD_RING": Это название спрайта. В игре не должно быть двух спрайтов с одинаковым именем.
- source_file: Это путь к файлу, где находится изображение спрайта. Используйте относительные пути от файла OpenSurge.exe. Не нужно указывать полный путь к файлы
- source_rect: первые два числа задают координаты по оси X и Y от верхнего левого угла изображения, с которых начинается ваш спрайт. Вторые два числа - это ширина и высота всех фреймов анимации. Таким образом, 4 значения описывают прямоугольник, со всеми кадрами анимации. Эти цифры указаны в пикселях.
- frame_size: Определяет размер каждого кадра вашей анимации. В данном примере размер исходного прямоугольника составляет 176 на 16 пикселей, но каждый фрагмент анимации составляет всего 16 на 16 пикселей.
- hot_spot: каждый объект имеет X и Y позицию на экране, а данный параметр задаёт точку, которую следует считать "главной точкой" объекта. Это точка, которую будет использовать движок для определения положения объекта по оси X и Y. Это также место, где редактор уровня захватывает ваш объект, когда вы его выбираете. Существуют разные причины размещения главных точек в разных местах, однако это в основном вопрос предпочтения. Данный параметр важен для объектов, которые будут двигаться или вращаться. Если не указано, то эта точка 0;0, верхний левый угол. Вы можете указать другое значение, например точку в центре объекта.
- animation <NUMBER>: Это анимации, которые могут быть в вашем объекте. Если ваш объект имеет N анимаций, <NUMBER> должен варьироваться от 0 до N-1. Например, если вы создаете объект с пятью анимациями, вам нужно будет указать «animation 0», «animation 1», ... и «animation 4». Есть три разные вещи, которые необходимо полностью описать анимации.
- repeat: воспроизводить анимацию однократно (FALSE) или повторять непрерывно (TRUE)? В данном случае, когда кольцо неактивно, он будет непрерывно вращаться, потому что для параметра repeat установлено значение TRUE в анимации 0. Однако, когда активная анимация изменяется на 1 (в момент прикосновения к кольцу), она будет воспроизводить анимацию только один раз перед исчезновением.
- fps: Этот показатель определяет, как быстро движок будет обрабатывать кадры. Проще говоря, скорость анимации. В данном случае он воспроизводит 16 кадров в секунду для анимации 0 и 8 кадров в секунду для анимации 1. Чем выше fps, тем быстрее анимация.
- data: определяет последовательность кадров анимации (фреймов). В данном примере он воспроизводит кадры с 0 по 7, затем повторяет цикл заново (под анимацией 0), либо воспроизводит кадры 8-10 и не повторяет их (под анимацией 1).
Пример изменения спрайта кольца
Теперь, когда мы рассмотрели файл спрайта и определили, что делает каждая комманда, давайте изменим его и заменим стандартные кольца на собственные.
Предупреждение: изменение файлов спрайтов вносит существенные изменения в игру. Перед любыми изменениями обязательно создавайте резервные копии своих спрайт-файлов и если что-то пойдет не так, вы сможете восстановить всё как было.
Редактируем файл sprites/rings.spr и изменим спрайт с именем SD_RING:
... // Ring sprite "SD_RING" { source_file "images/my_collectibles.png" source_rect 1 1 176 16 frame_size 16 16 hot_spot 9 12 // idle animation 0 { repeat TRUE fps 16 data 0 1 2 3 4 5 2 6 } // end animation 1 { repeat FALSE fps 8 data 7 8 9 10 } } ...
Сразу обращаем внимание на некоторые моменты:
- Здесь встречаются комментарии. Это строки, начинающиеся с //. Комментирование спрайтов или объектов добровольное.
- sprite "SD_RING" - не изменяем, поэтому нам не нужно будет изменять код игры, чтобы заменить все кольца нашими модифицированными кольцами. Это также означает, что мы должны удалить старый спрайта SD_RING из файла спрайтов, тк движок не работает с двумя спрайтами с одинаковыми именами. Но поскольку мы модифицируем исходный файл .spr (а не создаём новый спрайт), эта проблема нам не грозит.
- Source_file - мы создали новое изображение и оно имеет другое имя файла, отличное от оригинала, поэтому это значение мы изменили.
- Параметр source_rect также нужно изменить, поскольку кадры нового спрайта находятся на других позициях.
- Frame_size - размер одного кадра. Мы использовали прямоугольник стандартного размера для создания наших колец, чтобы они могли легко заменить встроенные кольца.
- Hot_spot - не меняем, потому что в этом нет необходимости.
- Строки animation <NUMBER> совпадают. Как и в исходном кольцевом спрайте, animation 0 указывает вращающуюся анимацию, а animation 1 - на исчезающую.
- В записях repeat мы оставляем тежи значения, так как модифицированное кольцо работает аналогичным образом по сравнению с исходным.
- Значения fps оставляем старые. Можно было бы их изменить, если нужно ускорить или замедлить анимацию.
- А вот значения data отличаются. Это связано с тем, что рамки нашего модифицированного кольца должны быть представлены в другом порядке для правильной анимации.
Теперь, когда мы понимаем, как движок читает эти файлы, легче узнать, что нужно сделать, чтобы наши спрайты отображались правильно.