Прислали мне как то тестовое задание. Надо написать шахматы с использованием C++ и QML. QML до этого не изучал, только слышал и читал про него, поэтому решил что напишу только с использованием C++ и библиотеки Qt. Написал, отправил, возвращают и просят графическую часть переписать на QML. Делать нечего, сел за изучения сего чуда и переписал графическую часть. Теперь хочу поделиться приобретённым опытом.
Весь процесс написания шахмат описывать не буду, опишу только процесс постижения QML. Думаю эта статья будет в помощь начинающим в QML.
Начнём
Окно приложения разделено на 2 части: в левой доска с фигурами; в правой протокол ходов (необходим согласно заданию) и кнопки управления (Новая игра, Выход, Сохранить и т… д.)
Нам надо, на QML, воссоздать шахматную доску и фигуры на ней. Вся математика ходов прописана на C++.
Поскольку работаем с QML и Виджетами подключаем QT += qml quick declarative. Работать будем с QML 1.1, поскольку модуль Declarative не умеет работать с QML 2.0. Используем Declarative, потому что только он совместим с QWidget. Все остальные компоненты по работе с QML нет.
Подготовим QDeclarativeView, переопределим этот класс:
Файл decl.h
#ifndef DECL_H #define DECL_H #include <QtWidgets> #include <QtDeclarative> class MyDecl : public QDeclarativeView { Q_OBJECT protected: virtual void mouseReleaseEvent(QMouseEvent *me); public: MyDecl(QWidget *parent = 0); ~MyDecl(); signals: void declMouseRelease(int x, int y); }; #endif // DECL_HФайл decl.cpp
#include "decl.h" MyDecl::MyDecl(QWidget *parent) : QDeclarativeView(parent) { } MyDecl::~MyDecl() { } void MyDecl::mouseReleaseEvent(QMouseEvent *me) { emit declMouseRelease(me->x(), me->y()); }Зачем это делать? Дело в том, что управление фигурами осуществляется мышкой. Получить сигнал из QML сложновато, поэтому будем посылать сигнал обработчику из этого виджета.
Теперь создаём объект в основном классе программы:
MyDecl *decl;Подключаем к нему наш будущий QML файл, задаём переменные и выводим на окно. Это делаем в конструкторе:
decl = new QDeclarativeView; decl->engine()->rootContext()->setContextProperty("w1x", 0); decl->engine()->rootContext()->setContextProperty("w1y", 0); decl->engine()->rootContext()->setContextProperty("w1a", 0); decl->engine()->rootContext()->setContextProperty("w1c", 0); decl->engine()->rootContext()->setContextProperty("w1t", "texture.png"); decl->setSource(QUrl(QStringLiteral("qrc:/Images/main.qml"))); connect(decl, SIGNAL(declMouseRelease(int,int)), SLOT(getBoardMouse(int,int))); QHBoxLayout *mainWindow = new QHBoxLayout; QVBoxLayout *boardLayout = new QVBoxLayout; boardLayout->addWidget(decl,0, Qt::AlignTop | Qt::AlignLeft); mainWindow->addLayout(boardLayout, 4); Размещаем виджет, на котором рисуется QML часть, вверху-слева, что бы не делать вычислений для смещения мышки. Координаты доски (0;0) будут соответствовать координатам виджета (0;0).
Зачем нужны переменные w1x, w1y, w1c, w1t, w1a будет описано ниже.
Теперь создадим и подключим к проекту main.qml
import QtQuick 1.1 Rectangle { width: 480 height: 480 Image { x: 0 y: 0 source: "Textures/board.png" } } Пока что мы только загружаем шахматную доску
Теперь необходимо разместить на ней фигуры.
import QtQuick 1.1 Rectangle { width: 480 height: 480 Image { x: 0 y: 0 source: "Textures/board.png" Rectangle { x: w1x y: w1y width: 56 height: 56 color: w1c ? "#8000ff80" : "#00000000" Image { x: 0 y: 0 source: w1t visible: w1a } } } } Немного разберёмся, что здесь написано.
Внутри Image мы разместили Rectangle размером 56х56 (именно такой размер одного квадрата на доске, в данной реализации). Координаты будут зависеть от некоторых переменных w1x и w1y. Координаты указываются относительно родительского объекта, в данном случае Image (доска). Внутри ячейки создаём объект Image — это будет шахматная фигура. Ей задаём координаты (0;0), двигаться она будет вместе с родительским Rectangle. Текстура для фигурки будет указываться в переменной w1t. Переменная w1c необходима для определения выбрана ли данная фигура, если выбрана, то Rectangle заполняется салатовым цветом. Фигуру могут убить и нам не надо будет ее рисовать, за это и отвечает w1a.
Переменные w1x, w1y, w1c, w1t, w1a задаются/изменяются из C++.
decl->engine()->rootContext()->setContextProperty("w1x", piece.x); decl->engine()->rootContext()->setContextProperty("w1y", piece.y); decl->engine()->rootContext()->setContextProperty("w1c", piece.choice); decl->engine()->rootContext()->setContextProperty("w1a", piece.active); decl->engine()->rootContext()->setContextProperty("w1t", piece.source);В setContextProperty первым параметром передаётся имя параметра в QML, его можно задавать динамически при помощи QString. Вторым передаётся значение. И в соответствии от этих значений меняются значения в QML.
Это был описан процесс для 1-й фигуры, а их всего 32. Для такого количества методика не очень удобная. Поэтому есть немного другое решение.
Для начала изменим графическую часть на QML. Создадим новый объект:
Файл PieceSprite.qml
iimport QtQuick 1.1 Rectangle { property string texture: "" property bool active: true width: 56 height: 56 Image { x: 0 y: 0 source: parent.texture visible: parent.active } Behavior on x { NumberAnimation { duration: 500 easing.type: Easing.InOutQuad } } Behavior on y { NumberAnimation { duration: 500 easing.type: Easing.InOutQuad } } }Добавили параметры texture и active. Для Image (фигура) отслеживаем изменение координат x и y, что бы фигуры двигались плавно(добавили анимацию передвижения).
Изменим main.qml, добавив в него новый объект и создадим все фигуры используя JavaScript
import QtQuick 1.1 Rectangle { id: appWindow width: 480 height: 480 Image { x: 0 y: 0 source: "Images/Textures/board.png" Component.onCompleted: { var component = Qt.createComponent("PieceSprite.qml"); var compName; var sprite; for (var i = 1; i <= 16; i++) { for (var c = 0; c < 2; c++) { if (c == 1) { compName = "wp" + i; } else { compName = "bp" + i; } sprite = component.createObject(appWindow); if (sprite == null) { // Error Handling console.log("Error creating object"); } else { sprite.x = 0; sprite.y = 0; sprite.active = false; sprite.objectName = compName; } } } } } }Задаём имена для объектов — wp для белых фигур и bp для чёрных, плюс порядковый номер от 1 до 16. По этим именам мы и будем обращаться к нашим фигурам.
Теперь в C++, в конструкторе, убираем определение переменных:
decl = new QDeclarativeView; decl->setSource(QUrl(QStringLiteral("qrc:/Images/main.qml"))); connect(decl, SIGNAL(declMouseRelease(int,int)), SLOT(getBoardMouse(int,int))); QHBoxLayout *mainWindow = new QHBoxLayout; QVBoxLayout *boardLayout = new QVBoxLayout; boardLayout->addWidget(decl,0, Qt::AlignTop | Qt::AlignLeft); mainWindow->addLayout(boardLayout, 4);Для изменения параметров объектов в QML создадим функцию:
void Chess::setQmlPieceParametr(const piece &p, bool setTexture) { char pColor = p.white ? 'w' : 'b'; // Определяем цвет фигуры белый/черный int x = offset_x + (p.cell.x() * piece_size); // Координата Х для фигуры int y = offset_y + BOARD_SIZE - (p.cell.y() * piece_size); // Координата Y для фигуры QString compColor = p.choise ? "#8000ff80" : "#00000000"; // Если фигура выбрана в данный момент, подсвечиваем салатовым QString compName = QString("%1p%2").arg(pColor).arg(p.pId); // Генерируем имя объекта к которому нужно обратиться QObject *pieceSprite = decl->rootObject()->findChild<QObject*>(compName); // Ищем объект по названию в QML if (pieceSprite) { // Если объект найден, то устанавливаем параметы pieceSprite->setProperty("x", x); pieceSprite->setProperty("y", y); pieceSprite->setProperty("active", p.active); pieceSprite->setProperty("color", compColor); if (setTexture) { // Текстуру устанавливаем только при начале новой игры и если пешка дошла до другого края доски pieceSprite->setProperty("texture", QString("Images/Textures/%1").arg(pColor) + p.texture); } } } Функция позволяет установить параметры для одной фигуры. В связи с тем, что клетки на доске начинаются не с края, а высота считается снизу, необходимо пересчитывать координаты.
Параметры фигуры хранятся в структуре piece
struct piece { QPoint cell; int type; bool first_step; QString texture; bool white; bool choise; bool active; int pId; }; Вот, собственно говоря и всё. Ссылка на проект в ГугльДокс.
Спасибо, если Вы это читали.
ссылка на оригинал статьи http://habrahabr.ru/post/266985/
Добавить комментарий