Evgenii Legotckoi
Evgenii Legotckoi20 октября 2015 г. 11:06

QML - Урок 005. Применение Sprite и AnimatedSprite в QML Qt

После того, как по спрайтам было написано три урока, от их рисования , до их практического применения в 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 // Синхронизация
        }
    }
}

Итог

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

Видеоурок

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
ДА

C++ - Тест 003. Условия и циклы

  • Результат:21баллов,
  • Очки рейтинга-10
АФ

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:30баллов,
  • Очки рейтинга-10
ПЩ

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:80баллов,
  • Очки рейтинга4
Последние комментарии
k
kmssr9 февраля 2024 г. 0:43
Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
АК
Анатолий Кононенко5 февраля 2024 г. 7:50
Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
EVA
EVA25 декабря 2023 г. 16:30
Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
J
JonnyJo25 декабря 2023 г. 14:38
Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
G
Gvozdik19 декабря 2023 г. 3:01
Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
Сейчас обсуждают на форуме
P
Pisych27 февраля 2023 г. 10:04
Как получить в массив значения из связанной модели? Спасибо, разобрался:))
AC
Alexandru Codreanu19 января 2024 г. 17:57
QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
BlinCT
BlinCT27 декабря 2023 г. 14:57
Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
Дмитрий
Дмитрий10 января 2024 г. 10:18
Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
Evgenii Legotckoi
Evgenii Legotckoi12 декабря 2023 г. 12:48
Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

Следите за нами в социальных сетях