GameDev on Qt - Tutorial 1. Track mouse movement in QGraphicsScene

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

Everyone remembers the game Crimsonland ? There had to cut stacks of monsters. To move on the playing field, we used the keys W, A, S, D, and shooting direction the mouse cursor, which was produced track. So, in itself mechanism of this very track the mouse is very simple. The implementation can be many, depending on the instruments used in programming, but if we talk about a common QGraphicsScene , then let me show you my version of the implementation of such a mechanism.

Project structure

In this project, in addition to the main file used two additional classes. First - this is a QGraphicsScene customized, which will make tracking the cursor position and transmit information about its position, and the second - is the protagonist of our favorite red triangle, which we will manage with the keys W, A, S, D.

Project structure:

• TargetMotion.pro - Project Profile;
• widget.h - Header file the main application window;
• widget.cpp - source files of the main application window;
• triangle.h - The header of the protagonist of the Red Triangle;
• triangle.cpp - source files of the protagonist of the Red Triangle;
• customscene.h - Header file customized graphic scene;
• customscene.cpp - File source customized graphic scene;
• cursor.qrc - resource file, which contains a customized mouse pointer.

Writing mouse cursor tracking

widget.ui

File form of the main application window. It just put an object of class QGraphicsView and stretch it around the window.

customscene.h

All that needs to be done in this header file, it is only declare a method for tracking the movement of the mouse mouseMoveEvent() , and the signal, which will be transferred to the coordinates of the mouse, do not forget to extend class from 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:
    // The signal of transmit the coordinates of the mouse position
    void signalTargetCoordinate(QPointF point);

public slots:

private:
    // The function, which made tracking the mouse
    void mouseMoveEvent(QGraphicsSceneMouseEvent *event);
};

#endif // CUSTOMSCENE_H

customscene.cpp

You will not believe, but in the source code file we just call signal with coordinates in mouseMoveEvent method.

#include "customscene.h"

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

CustomScene::~CustomScene()
{

}

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

triangle.h

And now declare all objects and functions necessary for the correct rendering of our hero and the implementation of tracking the cursor in the game. For a more complete understanding of the operation of this class and its origins are encouraged to review a series of articles "How to make a game using Qt", which is presented in the section Qt Lessons .

Note. To handle keys used WinAPI library.

#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:
    // The slot for the cursor position data
    void slotTarget(QPointF point);

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

private slots:
    void slotGameTimer();   // Game slot

private:
    QTimer *gameTimer;      // Game timer
    QPointF target;         // Cursor position
};

#endif // TRIANGLE_H

triangle.cpp

Drawing triangle occurs once in this case, but the reversal of the object and its movement in the graphic scene occurs periodically by a signal from the timer and gaming signals from the graphics cursor is moved on the stage. If the cursor does not move, but only moves the triangle, the triangle still follows the mouse cursor as a triangle stores information about the last cursor position in the graphic scene.

#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);      // Set the starting triangle rotation
    gameTimer = new QTimer();   // Init game timer
    // Connect the signal from the timer and the slot game processing timer
    connect(gameTimer, &QTimer::timeout, this, &Triangle::slotGameTimer);
    gameTimer->start(10);   // Start timer
    target = QPointF(0,0);  // Set the initial position of the cursor
}

Triangle::~Triangle()
{

}

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

void Triangle::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    /* drawing triangle
     * */
    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)
{
    // Calculate the distance to the target
    target = point;
    QLineF lineToTarget(QPointF(0, 0), mapFromScene(target));
    // The angle of rotation in the direction to the target
    qreal angleToTarget = ::acos(lineToTarget.dx() / lineToTarget.length());
    if (lineToTarget.dy() < 0)
        angleToTarget = TwoPi - angleToTarget;
    angleToTarget = normalizeAngle((Pi - angleToTarget) + Pi / 2);

    /* Depending on whether the left or the right is the purpose of the hero, 
     * set the direction of rotation of the Hero of the tick timer
     * */
    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()
{
    /* Move a triangle as a function of the buttons pressed
     * */
    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);
    }

    /* Check output of bounds. 
     * If the subject is beyond the set boundaries, then return it back
     * */
    if(this->x() - 30 < 0){
        this->setX(30);         // left
    }
    if(this->x() + 30 > 500){
        this->setX(500 - 30);   // right
    }

    if(this->y() - 30 < 0){
        this->setY(30);         // top
    }
    if(this->y() + 30 > 500){
        this->setY(500 - 30);   // bottom
    }

    QLineF lineToTarget(QPointF(0, 0), mapFromScene(target));
    // The angle of rotation in the direction to the target
    qreal angleToTarget = ::acos(lineToTarget.dx() / lineToTarget.length());
    if (lineToTarget.dy() < 0)
        angleToTarget = TwoPi - angleToTarget;
    angleToTarget = normalizeAngle((Pi - angleToTarget) + Pi / 2);

    /* Depending on whether the left or the right is the purpose of the hero, 
     * set the direction of rotation of the Hero of the tick timer
     * */
    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);
    }
}

widget.h

Now all you need to keep the nucleus in the game, which will be located in the class of the main application window.

#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;    // We declare a graphic scene
    Triangle *triangle;     // We declare triangle
};

#endif // WIDGET_H

widget.cpp

This file declares and initializes all the game objects (graphical scene and triangle), and is also used design pattern such as Bridge, through which the signal is transmitted from the graphic scene to the triangle.

#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();    // Init custom scene

    ui->graphicsView->setScene(scene);  /// set scene into graphicsView
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);    
    ui->graphicsView->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
    ui->graphicsView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff); 

    scene->setSceneRect(0,0,500,500);   

    // Create Custom Cursor
    QCursor cursor = QCursor(QPixmap(":/cursor/cursorTarget.png"));
    ui->graphicsView->setCursor(cursor);    // Set cursor intoe QGraphicsView
    triangle = new Triangle();  // Init triangle
    triangle->setPos(250,250);  // Set start position
    scene->addItem(triangle);   // Add triangle into the scene

    /* Allowed to monitor the position of the mouse 
     * without the need for pressing the mouse button. 
     * We use this property is to QGraphicsView, which set the scene graphics
     * */
    ui->graphicsView->setMouseTracking(true);

    connect(scene, &CustomScene::signalTargetCoordinate, triangle, &Triangle::slotTarget);
}

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

Result

The result is a triangle on the graphic scene to be moved by it under the influence of the keys W, A, S, D, and always look in the direction of the mouse cursor when it is in the range of graphic scenes.

Video