Спрайты

From Open Surge Wiki
Jump to: navigation, search

Введение

Все объекты с анимацией называются спрайтами. Спрайт - это набор изображений со всеми кадрами, которые необходимо отобразить в анимации. В Open Surge спрайт состоит из двух вещей:

  • Файл изображения, обычно в формате PNG. Эти файлы помещаются в папку images/.
  • Файл *.SPR, который представляет собой текстовый файл, сообщающий движку, как правильно отобразить спрайт. Эти файлы помещаются в папку sprites/ и их можно открыть с помощью любого простого текстового редактора, такого как Блокнот.

В Open Surge в качестве прозрачного цвета используется цвет мадженты. Его код FF00FF или (RGB 255,0,255).

Пример: спрайт кольца

Разберём на примере сделующий спрайт

images/rings.png (нажмите для увеличения)

Давайте посмотрим, как 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).

Пример изменения спрайта кольца

Теперь, когда мы рассмотрели файл спрайта и определили, что делает каждая комманда, давайте изменим его и заменим стандартные кольца на собственные.

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

images/my_collectibles.png (дизайн от lunarrush)

Редактируем файл 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 отличаются. Это связано с тем, что рамки нашего модифицированного кольца должны быть представлены в другом порядке для правильной анимации.

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