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

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

Движок спрайтов 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
• Плагин Gimp: http://registry.gimp.org/node/20943
• Инструмент командной строки: http://www.imagemagick.org/script/montage.php

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

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

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

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

Тип AnimatedSprite

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