Русскоязычный портал о QML и QtQuick, QmlPortal What the duck

Каталог статей

Главная » Статьи » Статьи по QML

"Duck hunt" на QML (часть первая)

Наверное, каждый время от времени ностальгирует по былым временам. Как собирали вкладыши от «Турбо», играли в кэпсы и дни напролет проводили за приставками smile. В этой статье мы будем реинкарнировать популярнейшую игру того времени "Duck hunt”. Писать мы ее будем на чистом QML, под нашу любимую платформу MeeGo Harmattan. В конце будет немного о публикации в магазине Nokia.

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

В итоге у нас получится вот что:

Собственно, задача выглядит следующим образом:
На фоне статичной картинки определенный промежуток времени передвигаются  случайным образом анимированные спрайты.  При касании экрана – проверяется, есть ли в наличии патроны, и проигрывается звук выстрела. Затем проверяется, находятся ли координаты касания внутри прямоугольника, описанного вокруг передвигающегося спрайта. Если да – аппарат вибрирует, проигрывается звук, анимация спрайта меняется на другую, летят перья и спрайт медленно перемещается вниз экрана (утка убита). При достижении нижней точки – снизу появляется другой спрайт (собака), размахивая подбитой уткой. Если в течение заданного интервала по летающему спрайту так и не попали – передвигаем спрайт за пределы экрана, собака плачет и выпускается новая жертва.  Добавим еще вверху экрана скролящийся спрайт с облаками, внизу – панель со статистикой игры и кнопку меню. При нажатии на кнопку отрисовывается панель с кнопками опций.   Если в итоге количество пропущенных уток менее трех – стартуем всю сцену сначала, увеличив количество уток и увеличив им скорость перемещения.  Если нет – GameOver.


Далее будут рассмотрены только основные моменты создания подобных игр. Подробности можно посмотреть в исходниках, ссылка на GitHub будет в конце статьи.


Про спрайтовую анимацию.

В игре всё построено на спрайтовой анимации, поэтому первым делом создадим новый элемент AnimatedSprite. Чтобы создать новый элемент в QML, достаточно создать файл с одноименным названием,  и в нем, используя уже существующие элементы, создать то, что нам надо. Элемент AnimatedSprite будет работать с графическим файлом, в котором все кадры анимации идут последовательно, друг за другом:

http://qml.ucoz.com/MaemoWorld/BlackDuck.png

Поясню основные моменты нового элемента:

Файл: AnimatedSprite.qml

import QtQuick 1.0
Item{
    id:spriteAnimation
    property int framesHorizontCount:0 // кол-во изображений по горизонтали
    property int framesVerticalCount:0 //
кол-во изображений по горизонтали
   
property int framesCount:(framesHorizontCount*framesVerticalCount)
    property int currentFrame:0 // текущий кадр анимации
    property string sourcePath:"" // путь до фала со спрайтами
    property int animationSpeed:0 // скорость анимации
    property int startFrame:0 //
номер начального для текущей анимации кадра
   
property int endFrame:0 // номер последнего для текущей анимации кадра
 
    ……………………………………
    ……………………………………
    ……………………………………
 
    height:spriteAnimationImage.height/framesVerticalCount
    width:spriteAnimationImage.width/framesHorizontCount
    // вычисляем высоту и ширину кадра в пикселях
   
    Image{ // элемент,
который отрисовывает текущий кадр анимации
       
id:spriteAnimationImage
        source:sourcePath
        x:-((spriteAnimation.currentFrame*spriteAnimation.width)-Math.floor(spriteAnimation.currentFrame/spriteAnimation.framesHorizontCount)*(spriteAnimation.framesHorizontCount*spriteAnimation.width))
        y:-(Math.floor(spriteAnimation.currentFrame/spriteAnimation.framesHorizontCount)*spriteAnimation.height)
       
// по этим формулам вычисляем, по
каким координатам мы найдем текущий кадр анимации в файле
   
}
 
}


В QML2, кстати, появился стандартный элемент AnimatedSprite но мне еще не довелось его попробовать.

На основе нового элемента AnimatedSprite создаем более конкретные элементы: DogAnimation, FeathersSprite, Clouds, DuckSprite, добавив в них состояния (states) для конкретных анимаций. Поясню на основе DogAnimation.qml:

import QtQuick 1.0
Item{
        id:dogAnimation
    ……………………………………
    ……………………………………
    ……………………………………
 
       states:[
       ……………………………………
       ……………………………………
       ……………………………………
              State {
                   name: "JUMP"
                   PropertyChanges { target: dogAnimation; startFrame: 6}
                   PropertyChanges { target: dogAnimation; endFrame: 8}
                   ……………………………………
                   // при переходе в состояние "JUMP" объекту будет выставлен начальный кадр анимации, равный 6. Последний кадр – 8. Т.е. в цикле будут отрисовываться только с 6 по 8 кадры из файла со спрайтами.
              },
       ……………………………………
       ……………………………………
       ……………………………………
              State {
                   name: "MISS"
                   PropertyChanges { target: dogAnimation; startFrame: 9}
                   PropertyChanges { target: dogAnimation; endFrame: 10}
                   ……………………………………
              }
      ]
}




http://qml.ucoz.com/MaemoWorld/dog.png


Продолжение тут: http://qml.ucoz.com/publ/stati_po_qml/quot_duck_hunt_quot_na_qml_chast_vtoraja/5-1-0-27



Источник: http://meegos.ru/forum/viewtopic.php?pid=119575
Категория: Статьи по QML | Добавил: CYAN (23.12.2012) | Автор: qml.portal.ru E W
Просмотров: 7271 | Теги: Анимация, QML, QML пример, D.U.C.K. H.U.N.T. | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела

Все статьи [0]
Обучение QML [8]
Статьи с базовой информацией о языке QML
Статьи по QML [6]
Статьи по QML
QML для профессионалов [4]
Статьи по QML-темам повышенной сложности
Ссылки на видео [5]
Ссылки на видео с демонстрацией возможностей QML
Ссылки на материалы по QML в интернете [2]
Ссылки на полезные материалы по QML в интернете
Обо всём [1]
Статьи на разные темы, не имеющие отношение к QML и QtQuick

Поиск на сайте

Облако тэгов

kinetic scroll анимация интерфейса кинетик скролл создание интерфейса path view qml видео демонстрация qml QML Component QML Grid Demo QML browser plugin просмотр QML форм QML signal QML Transition базовые типы QML QML Text пример QML экспорт qml из GIMP QML Rectangle color picker QML MouseArea qml export QML State экспорт QML из Photoshop QML QtQuick Web-browser Набор виджетов для QML статьи о QML на русском языке MeegoHarmattan N9/N950 game Sprite Animation GLSL fragment shader Qt Quick 2 Анимация Easing Easing curves Сглаживающие кривые C++ QGraphicsView Q_INVOKABLE Интеграция QML и C++ QML Particle System QtQuick.Particles QML Scene Graph javascript глобальные переменные Qt Mobility QtMultimediaKit map QtMobility.location Debian package Harmattan QtCreator D.U.C.K. H.U.N.T. QML пример

Статистика сайта

Статей: 26
Новостей: 6
Файлов: 10
Форум: 19/46
Коментариев: 6

Посетители

Полезные ресурсы

сайт Российского Qt сообщества The FRUCT program Российская сеть MeeGo пользователей и разработчиков