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

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

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