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