QML - Сабақ 005. QML жүйесінде Sprite және AnimatedSprite пайдалану Qt

animatedsprite, sprite, Qt, sprite sequence, QML

После того, как по спрайтам было написано три урока, от их рисования , до их практического применения в Qt в этой и этой статьях, считаю, что нельзя пройти мимо применения спрайтов в QML Qt .

Спрайты в QML применяются ещё проще, чем в Qt/C++, поскольку в QML имеются классы, которые специально созданы для работы со спрайтами: Sprite и AnimatedSprite.

Структура проекта для работы со Sprite и AnimatedSprite

Проект создаётся как стандартный проект QtQuick with controls, после чего я выкидываю всю лишнее, типо менюбара и кнопок. Оставляю только то, что мы будем использовать для демонстрации.

• main.cpp - основной файл проекта, в котором запускается qml файл;
• main.qml - окно приложения;
• MainForm.ui.qml - форма для работы с дизайнером;
• sprite_sheet.png - изображение нашего спрайта.

sprite_sheet.png

main.qml

Поскольку сам по себе урок достаточно простой, то остановлюсь на программном коде только этого файла.

В данном уроке предлагаю два варианта применения спрайтов. Один вариант - это применение с помощью SpriteSequence, в который можно помещать различные спрайты, с различными источниками. А второй вариант - это с использованием AnimatedSprite, в котором берётся один источник. Оба варианта применения спрайтов в данном уроке дадут одинаковый результат.

В SpriteSequence задаётся размер спрайта и его положение в главном окне приложения, тогда как размер кадра спрайта и количество его кадров задаётся уже в объекте Sprite, который помещается в SpriteSequence. При этом в SpriteSequence можно поместить несколько таких объектов Sprite.

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

Также необходимо указать параметр frameSync как true. Тогда спрайты будут работать синхронно, если этого не сделать, то они будут работать медленно и поочерёдно.

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    MainForm {
        // Растягиваем форму главного окна по всему окну приложения
        anchors.fill: parent
 
        /* Объект последовательности спрайтов
         * В данном объекте можно задавать различные спрайты
         * с различными картинками и их последовательноть
         * */
        SpriteSequence {
            id: image
            width: 20   // Ширина области под спрайт
            height: 20  // Высота области под спрайт
            // Спрайт находится слева вверху окна приложения
            anchors.left: parent.left
            anchors.leftMargin: 100
            anchors.top: parent.top
            anchors.topMargin: 100
 
            // Сам объект спрайта
            Sprite {
                id: sprite
                // Источник, спрайтовая картинка
                source: "sprite_sheet.png"
                frameCount: 15      // Количество кадров
                frameWidth: 20      // Ширина фрейма
                frameHeight:  20    // Высота фрейма
                frameSync: true     // Синхронизация
            }
        }
 
        AnimatedSprite {
            id: animatedSprite
 
            width: 20   // Ширина области под спрайт
            height: 20  // Высота области под спрайт
            // Спрайт находится справа вверху окна приложения
            anchors.right: parent.right
            anchors.rightMargin: 100
            anchors.top: parent.top
            anchors.topMargin: 100
 
            // Источник, спрайтовая картинка
            source: "sprite_sheet.png"
            frameCount: 15  // Количество кадров
            frameWidth: 20  // Ширина фрейма
            frameHeight: 20 // Высота фрейма
            frameSync: true // Синхронизация
        }
    }
}

Итог

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

Видеоурок