Nachdem drei Lektionen über Sprites geschrieben wurden, von ihrer Zeichnung bis zu ihrer praktischen Anwendung in Qt in this und dieser Artikel, denke ich, dass es unmöglich ist, an der Verwendung von Sprites in QML Qt vorbeizukommen.
Sprites in QML sind sogar noch einfacher zu verwenden als in Qt/C++, weil QML über Klassen verfügt, die speziell für die Arbeit mit Sprites entwickelt wurden: Sprite und * AnimatedSprite. *
Projektstruktur für die Arbeit mit Sprite und AnimatedSprite
Das Projekt wird als standardmäßiges QtQuick-Projekt mit Steuerelementen erstellt, wonach ich alle zusätzlichen Dinge wie die Menüleiste und die Schaltflächen wegwerfe. Ich hinterlasse nur das, was wir für die Demonstration verwenden werden.
- main.cpp - die Hauptprojektdatei, in der die qml-Datei gestartet wird;
- main.qml - Anwendungsfenster;
- MainForm.ui.qml - Formular für die Arbeit mit dem Designer;
- sprite_sheet.png - das Bild unseres Sprites.
sprite_sheet.png
main.qml
Da die Lektion selbst ziemlich einfach ist, werde ich mich nur auf den Programmcode dieser Datei konzentrieren.
In dieser Lektion biete ich zwei Optionen für die Verwendung von Sprites an. Eine Möglichkeit besteht darin, eine SpriteSequence zu verwenden, die verschiedene Sprites mit unterschiedlichen Quellen enthalten kann. Und die zweite Option ist die Verwendung von AnimatedSprite , bei der eine Quelle genommen wird. Beide Optionen zur Verwendung von Sprites in diesem Tutorial führen zum gleichen Ergebnis.
Die SpriteSequence gibt die Größe des Sprites und seine Position im Hauptanwendungsfenster an, während die Framegröße des Sprites und die Anzahl seiner Frames bereits im Objekt Sprite, festgelegt sind, das platziert wird in SpriteSequence. Gleichzeitig können Sie in SpriteSequence mehrere solcher Sprite. -Objekte platzieren
Bei AnimatedSprite werden alle Parameter für Größe und Ort sowie Framegröße und -anzahl in AnimatedSprite selbst gesetzt. Der Unterschied besteht darin, dass nur eine Datei als Quelle für Sprites genommen werden kann .
Sie müssen auch den Parameter frameSync als true angeben. Dann arbeiten die Sprites synchron, wenn dies nicht getan wird, dann arbeiten sie langsam und nacheinander.
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 // Синхронизация
}
}
}
Insgesamt
Als Ergebnis erhalten Sie eine Anwendung in der linken und rechten Ecke, die identisch funktionierende Explosions-Sprites enthält. Im Video-Tutorial wird die Anwendung demonstriert, und das Video-Tutorial zeigt auch, wie sich Sprites bei falscher Konfiguration verhalten.
