Evgenii Legotckoi20 жовтня 2015 р. 22:06

QML - Урок 005. Використання спрайту та анімованого спрайта в QML Qt

animatedsprite, sprite, Qt, sprite sequence, QML

Зміст

1. Структура проекту для роботи зі Sprite та AnimatedSprite
2. sprite_sheet.png
3. main.qml
4. Підсумок
5. Відеоурок

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

Підсумок

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

Відеоурок