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

QML - Урок 005. Використання спрайту та анімованого спрайта в 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 хостинг.

Вам це подобається? Поділіться в соціальних мережах!

Коментарі

Only authorized users can post comments.
Please, Log in or Sign up
Ua

Qt - Тест 001. Сигналы и слоты

  • Результат:84бали,
  • Рейтинг балів4
Ua

Qt - Тест 001. Сигналы и слоты

  • Результат:42бали,
  • Рейтинг балів-8
ОК

Qt - Тест 001. Сигналы и слоты

  • Результат:47бали,
  • Рейтинг балів-6
Останні коментарі
ИМ
Игорь Максимов22 листопада 2024 р. 11:51
Django - Підручник 017. Налаштуйте сторінку входу до Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
Evgenii Legotckoi
Evgenii Legotckoi31 жовтня 2024 р. 14:37
Django - Урок 064. Як написати розширення для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
A
ALO1ZE19 жовтня 2024 р. 08:19
Читалка файлів fb3 на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
ИМ
Игорь Максимов05 жовтня 2024 р. 07:51
Django - Урок 064. Як написати розширення для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas505 липня 2024 р. 11:02
QML - Урок 016. База даних SQLite та робота з нею в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Тепер обговоріть на форумі
Дмитрий
Дмитрий03 лютого 2025 р. 06:24
Создание deb-пакета. Как создать ярлык на рабочем столе после установки собственного deb-пакета? Всем привет. Сделал свой deb-пакет с программой. Всё устанавливается и работает. Ставлю по пути /usr/bin/my_application. Как для пользователя при установке пакета сразу создать ярлык на раб…
NW
Nayo Wai30 січня 2025 р. 09:22
не запускается компьютер!!! Не запускается компьютер (точнее работает блок , но сам монитор вообще жесть)В общем я ничего с интернета не скачивала в последнее время. На компе никаких левых пр…
n
nkly03 січня 2025 р. 02:52
Нужно запретить перемещение только некоторых итемов, остальные перемещать можно. Вопрос решен. Узнать QModelIndex элемента на который мы перетаскиваем другой элемент, можно с помощью функции indexAt(event->position().toPoint()) представления QTreeViev вызываемой в переопр…
M
Marsel16 серпня 2023 р. 14:26
OAuth2.0 через VK, получение email Спасибо большое за помощь и простите за то что отнял время своей невнимательностью.
Evgenii Legotckoi
Evgenii Legotckoi24 червня 2024 р. 15:11
добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.

Слідкуйте за нами в соціальних мережах