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

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

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

Конечный автомат

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

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

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

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

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

Формат ввода

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