GameDev на Qt - Підручник 1. Відстежуйте рух миші в QGraphicsScene

QGraphicsScene, отслеживание, cursor, GameDev, Qt, mouse

Усі пам'ятають гру Crimsonland? Там треба було валити монстрів штабелями. Для переміщення по ігровому полю ми використовували клавіші W, A, S, D, а для спрямування стрільби курсор миші , за яким проводилося відстеження. Так ось, сам по собі механізм роботи цього відстеження миші гранично простий. Реалізацій може бути безліч, залежно від інструментів у програмуванні, але якщо говорити про звичайне QGraphicsScene , то дозвольте продемонструвати Вам мій варіант реалізації подібного механізму.

Структура проекта

У цьому проекті крім основних файлів використовується два додаткові класи. Перший - це кастомізований QGraphicsScene , який проводитиме відстеження положення курсору і передаватиме інформацію про його становище, а другий - це головний герой, наш улюблений Червоний Трикутник , яким ми керуватимемо за допомогою клавіш W, A, S, D.

Структура проекта:

• TargetMotion.pro - Профайл проекту;
• widget.h - Заголовний файл основного вікна програми;
• widget.cpp - Файл вихідних кодів основного вікна програми;
• triangle.h - Заголовний файл головного героя Червоного Трикутника;
• triangle.cpp - Файл вихідних кодів головного героя Червоного Трикутника;
• customscene.h - заголовний файл кастомізованої графічної сцени;
• customscene.cpp - файл вихідних кодів кастомізованої графічної сцени;
• cursor.qrc - файл ресурсів, у якому міститься кастомізований курсор миші.

Пишемо відстеження курсору миші

widget.ui

Файл форми головного вікна програми. У нього лише закидаємо об'єкт класу QGraphicsView та розтягуємо його по всьому вікну.

customscene.h

Все, що потрібно зробити в даному заголовному файлі, це лише оголосити метод для відстеження переміщення миші mouseMoveEvent() і сигнал, в якому будуть передаватись координати положення миші, не забуваючи успадкувати клас від QGraphicsScene.

#ifndef CUSTOMSCENE_H
#define CUSTOMSCENE_H

#include <QObject>
#include <QGraphicsScene>
#include <QGraphicsSceneMouseEvent>

class CustomScene : public QGraphicsScene
{
    Q_OBJECT
public:
    explicit CustomScene(QObject *parent = 0);
    ~CustomScene();

signals:
    // Сигнал для передачи координат положения курсора мыши
    void signalTargetCoordinate(QPointF point);

public slots:

private:
    // Функция, в которой производится отслеживание положения мыши
    void mouseMoveEvent(QGraphicsSceneMouseEvent *event);
};

#endif // CUSTOMSCENE_H

customscene.cpp

Ви не повірите, але у файлі вихідних кодів Ми лише викликаємо сигнал з координатами в методі mouseMoveEvent.

#include "customscene.h"

CustomScene::CustomScene(QObject *parent) :
    QGraphicsScene()
{
    Q_UNUSED(parent);
}

CustomScene::~CustomScene()
{

}

void CustomScene::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    emit signalTargetCoordinate(event->scenePos());
}

трикутник.h

А тепер оголосимо всі об'єкти та функції, необхідні для правильного відображення нашого героя та реалізації відстеження курсору у грі. Для більш повного уявлення про роботу даного класу та його витоків рекомендую ознайомитися з циклом статей "Як написати гру на Qt" , який представлений у розділі Qt Уроки .

Примітка . Для обробки натискань клавіш використовують бібліотеки WinAPI .

#ifndef TRIANGLE_H
#define TRIANGLE_H

#include <QObject>
#include <QGraphicsItem>
#include <QPainter>
#include <QPolygon>
#include <QTimer>

#include <windows.h>

class Triangle : public QObject, public QGraphicsItem
{
    Q_OBJECT
public:
    explicit Triangle(QObject *parent = 0);
    ~Triangle();

signals:

public slots:
    // Слот для получения данных о положении курсора
    void slotTarget(QPointF point);

private:
    QRectF boundingRect() const;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);

private slots:
    void slotGameTimer();   // Игровой слот

private:
    QTimer *gameTimer;      // Игровой таймер
    QPointF target;         // Положение курсора
};

#endif // TRIANGLE_H

triangle.cpp

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

#include "triangle.h"
#include <math.h>

static const double Pi = 3.14159265358979323846264338327950288419717;
static double TwoPi = 2.0 * Pi;

static qreal normalizeAngle(qreal angle)
{
    while (angle < 0)
        angle += TwoPi;
    while (angle > TwoPi)
        angle -= TwoPi;
    return angle;
}

Triangle::Triangle(QObject *parent) :
    QObject(parent), QGraphicsItem()
{
    setRotation(0);      // Устанавливаем исходный разворот треугольника
    gameTimer = new QTimer();   // Инициализируем игровой таймер
    // Подключаем сигнал от таймера и слоту обработки игрового таймера
    connect(gameTimer, &QTimer::timeout, this, &Triangle::slotGameTimer);
    gameTimer->start(10);   // Стартуем таймер
    target = QPointF(0,0);  // Устанавливаем изначальное положение курсора
}

Triangle::~Triangle()
{

}

QRectF Triangle::boundingRect() const
{
    return QRectF(-20,-30,40,60);
}

void Triangle::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    /* Отрисовка треугольника
     * */
    QPolygon polygon;
    polygon << QPoint(0,-30) << QPoint(20,30) << QPoint(-20,30);
    painter->setBrush(Qt::red);
    painter->drawPolygon(polygon);

    Q_UNUSED(option);
    Q_UNUSED(widget);
}

void Triangle::slotTarget(QPointF point)
{
    // Определяем расстояние до цели
    target = point;
    QLineF lineToTarget(QPointF(0, 0), mapFromScene(target));
    // Угол поворота в направлении к цели
    qreal angleToTarget = ::acos(lineToTarget.dx() / lineToTarget.length());
    if (lineToTarget.dy() < 0)
        angleToTarget = TwoPi - angleToTarget;
    angleToTarget = normalizeAngle((Pi - angleToTarget) + Pi / 2);

    /* В Зависимости от того, слева или справа находится Цель от Героя,
     * устанавливаем направление поворота Героя в данном тике таймера
     * */
    if (angleToTarget >= 0 && angleToTarget < Pi) {
        // Rotate left
        setRotation(rotation() - angleToTarget * 180 /Pi);
    } else if (angleToTarget <= TwoPi && angleToTarget > Pi) {
        // Rotate right
        setRotation(rotation() + (angleToTarget - TwoPi )* (-180) /Pi);
    }
}

void Triangle::slotGameTimer()
{
    /* Перемещаем треугольник в зависимости от нажатых кнопок
     * */
    if(GetAsyncKeyState('A')){
        this->setX(this->x() - 2);
    }
    if(GetAsyncKeyState('D')){
        this->setX(this->x() + 2);
    }
    if(GetAsyncKeyState('W')){
        this->setY(this->y() - 2);
    }
    if(GetAsyncKeyState('S')){
        this->setY(this->y() + 2);
    }

    /* Проверка выхода за границы поля
     * Если объект выходит за заданные границы, то возвращаем его назад
     * */
    if(this->x() - 30 < 0){
        this->setX(30);         // слева
    }
    if(this->x() + 30 > 500){
        this->setX(500 - 30);   // справа
    }

    if(this->y() - 30 < 0){
        this->setY(30);         // сверху
    }
    if(this->y() + 30 > 500){
        this->setY(500 - 30);   // снизу
    }

    QLineF lineToTarget(QPointF(0, 0), mapFromScene(target));
    // Угол поворота в направлении к цели
    qreal angleToTarget = ::acos(lineToTarget.dx() / lineToTarget.length());
    if (lineToTarget.dy() < 0)
        angleToTarget = TwoPi - angleToTarget;
    angleToTarget = normalizeAngle((Pi - angleToTarget) + Pi / 2);

    /* В Зависимости от того, слева или справа находится Цель от Героя,
     * устанавливаем направление поворота Героя в данном тике таймера
     * */
    if (angleToTarget >= 0 && angleToTarget < Pi) {
        // Rotate left
        setRotation(rotation() - angleToTarget * 180 /Pi);
    } else if (angleToTarget <= TwoPi && angleToTarget > Pi) {
        // Rotate right
        setRotation(rotation() + (angleToTarget - TwoPi )* (-180) /Pi);
    }
}

віджет.h

А тепер необхідно все звести в ігровому ядрі, яке буде в класі головного вікна програми.

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QGraphicsScene>
#include <QGraphicsItem>

#include <triangle.h>
#include <customscene.h>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    Ui::Widget *ui;
    CustomScene  *scene;    // Объявляем графическую сцену
    Triangle *triangle;     // Объявляем треугольник
};

#endif // WIDGET_H

widget.cpp

У цьому файлі оголошуються та ініціалізуються всі ігрові об'єкти (графічна сцена та трикутник), а також використовується патерн проектування типу Міст, через який передається сигнал від графічної сцени до трикутника.

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    // Устанавливаем параметры окна приложения
    this->resize(600,600);
    this->setFixedSize(600,600);

    ui->setupUi(this);
    scene   = new CustomScene();    // Инициализируем кастомизированную сцену

    ui->graphicsView->setScene(scene);  /// Устанавливаем графическую сцену в graphicsView
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);    /// Устанавливаем сглаживание
    ui->graphicsView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff); /// Отключаем скроллбар по вертикали
    ui->graphicsView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); /// Отключаем скроллбар по горизонтали

    scene->setSceneRect(0,0,500,500);   // Устанавливаем размеры графической сцены

    // Создаем кастомизированный курсор из ресурсного файла
    QCursor cursor = QCursor(QPixmap(":/cursor/cursorTarget.png"));
    ui->graphicsView->setCursor(cursor);    // Устанавливаем курсор в QGraphicsView
    triangle = new Triangle();  // Инициализируем треугольник
    triangle->setPos(250,250);  // Устанавливаем стартовую позицию треугольника
    scene->addItem(triangle);   // Добавляем треугольник на графическую сцену

    /* Разрешаем отслеживание положение курсора мыши
     * без необходимости нажатия на кнопки мыши
     * Применяем это свойство именно для QGraphicsView,
     * в котором установлена графическая сцена
     * */
    ui->graphicsView->setMouseTracking(true);

    // Подключаем сигнал от графической сцены к слоту треугольника
    connect(scene, &CustomScene::signalTargetCoordinate, triangle, &Triangle::slotTarget);
}

Widget::~Widget()
{
    delete ui;
}

Підсумок

В результаті ви отримаєте трикутник на графічній сцені, який переміщатиметься по ній під впливом клавіш W, A, S, D і завжди дивитися у бік курсору миші, якщо він знаходиться в межах графічної сцени.

Демонстрація цього прикладу наведена у відеоуроці за цією статтею.

Відеоурок