Анимации спрайтов

Движок спрайтов

Движок спрайтов Qt Quick представляет собой стохастическую машину состояний, дополненную возможностью разделения изображений на несколько кадров анимации.

Машина состояний

Основной функцией движка спрайтов является внутренняя машина состояний. Она отличается от состояний и переходов в Qt Quick и больше напоминает обычную машину состояний. Спрайты могут иметь взвешенные переходы к другим спрайтам или обратно к себе. Когда анимация спрайта завершается, движок спрайтов случайным образом выбирает следующий спрайт, основываясь на взвешенных переходах доступных для завершенного спрайта.

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

В качестве примера рассмотрим диаграмму выше, которая иллюстрирует спрайты для гипотетического 2D персонажа платформенной игры. Персонаж начинает с отображения состояния стоя. Из этого состояния, за исключением внешнего ввода, он перейдет к анимации ожидания, анимации ходьбы или снова воспроизведёт анимацию стоя. Поскольку веса этих переходов составляют соответственно один, ноль и три, у него есть одна вероятность из четырех воспроизвести анимацию ожидания по окончании анимации стоя, и три вероятности из четырех воспроизвести анимацию стоя. Это позволяет получить персонажа, который ведет себя несколько оживленно и изменчиво во время ожидания.

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

Если затем вы зададите целевое состояние анимации прыжок, он завершит анимацию ходьбы перед воспроизведением анимации прыжок. Поскольку анимация прыжок не переходит в другие состояния, он будет продолжать воспроизводить анимацию прыжок, пока состояние не будет изменено. В этом примере вы могли бы вернуть его к ходьбе и изменить целевую анимацию на ходьбу или на ничего (что приведет к воспроизведению анимации стоя после анимации ходьбы). Обратите внимание, что при принудительной установке анимации вы можете начать воспроизведение анимации немедленно.

Формат ввода

Форматы файлов, поддерживаемые движком спрайтов, такие же, как и для других типов QML, таких как Image. Однако, для анимации изображения, движок спрайтов требует, чтобы файл изображения содержал все кадры анимации. Они должны быть расположены в непрерывной строке, которая может переходить с правого края файла на нижнюю строку, начиная с левого края файла (и которая располагается непосредственно под предыдущей строкой).

В качестве примера, рассмотрите изображение выше. Пока что рассмотрите только черные числа и предположите, что квадраты имеют размер 40x40 пикселей. Обычно изображение считывается с верхнего левого угла. Если вы указали размер кадра как 40x40 пикселей, а количество кадров — 8, то он будет считывать кадры в соответствии с их номерами. Кадр в верхнем левом углу будет первым кадром, кадр в верхнем правом углу — пятым кадром, а затем он перейдет на следующую строку (в позицию 0,40 в файле) для чтения шестого кадра. Он перестанет читать после кадра, отмеченного 8, и если в квадрате ниже кадра четыре было какое-либо изображение, то оно не будет включено в анимацию.

Возможна загрузка анимаций с произвольного смещения, но они все равно будут следовать той же схеме. Сейчас рассмотрим красные числа. Если мы укажем, что анимация начинается в позиции 120,0 пикселей, с количеством кадров 5 и тем же размером кадра, как и раньше, то он загрузит кадры в соответствии с их номерами, указанными красным цветом. Первые 120x40 изображения не будут использоваться, так как он начинает чтение блоков 40x40 с позиции 120,0. Когда он достигнет конца файла в 160,0, он начнёт чтение следующей строки с позиции 0,40.

Синие числа показывают номера кадров, если вы пытаетесь загрузить два кадра такого размера, начиная с 40,40. Обратите внимание, что возможно загрузить несколько спрайтов из одного файла изображения. Красные, синие и черные числа могут быть загружены как отдельные анимации в одном движке спрайтов. Следующий код загружает анимации в соответствии с изображением. Он также указывает, что анимации должны воспроизводиться со скоростью 20 кадров в секунду.

Sprite {
    name: "black"
    source: "image.png"
    frameCount: 8
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "red"
    source: "image.png"
    frameX: 120
    frameCount: 5
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "blue"
    source: "image.png"
    frameX: 40
    frameX: 40
    frameCount: 2
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}

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

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

Существует несколько инструментов, которые помогут преобразовать набор изображений в спрайт-листы. Вот некоторые примеры:

• Плагин для Photoshop: http://www.johnwordsworth.com/projects/photoshop-sprite-sheet-generator-script
• Плагин SpriteSheet для Gimp
• Инструмент командной строки: http://www.imagemagick.org/script/montage.php

Типы QML, использующие движок спрайтов

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

SpriteSequence — это тип, который использует движок спрайтов для отображения определенных в нём спрайтов. Это единственный и самостоятельный движок спрайтов, и он не взаимодействует с другими движками спрайтов. Типы Sprite могут быть объединены между типами, использующими движок спрайтов, но это не делается автоматически. Таким образом, если вы определили спрайт в одном SpriteSequence, вам нужно будет переопределить его (или сослаться на тот же тип Sprite) в свойстве sprites другого SpriteSequence, чтобы перейти к этой анимации.

Кроме того, ImageParticle может использовать типы Sprite для определения спрайтов для каждой частицы. Это снова один движок спрайтов на тип. Это работает аналогично SpriteSequence, но также имеет параметрируемую изменчивость, предоставляемую типом ImageParticle.

Тип AnimatedSprite

Для случаев использования, которым не требуется переход между анимациями, рассмотрите тип AnimatedSprite. Этот тип отображает анимации спрайтов с тем же форматом ввода, но только по одной за раз. Он также предоставляет более тонкую ручную настройку, так как движок спрайтов не управляет временем и переходами за кулисами.