QT界面开发-游戏案例

目录

---

目录

一、设计登录主页面

1.0添加资源文件

1.1设置窗口（标题、图标、背景）

1.2自定义按钮类

1.3开始按钮 弹跳效果

1.4播放音乐

二、切换游戏界面

2.1最核心的逻辑

2.2代码创建工具栏

2.3返回主页面按钮

2.3优化切换页面

三、选择关卡按钮（无跳转）

3.1简要介绍

3.2for循环生成关卡选择按钮

3.3标签技术来显示按钮上的数字

3.4字体类来修改文字属性

四、打包发布

4.1生成release版本的exe文件

4.2利用QT自带 windeployqt 的生成打包文件

4.3采用第三方工具打包文件

---

一、设计登录主页面

1.0添加资源文件

将所需要的图片、音频添加到资源文件中

1.1设置窗口（标题、图标、背景）

设置窗口属性

     //1.添加资源文件

    //2.指定窗口大小--固定大小
    this->setFixedSize(900,600);

    //3.设置窗口左上角图标
    this->setWindowIcon(QIcon(":/resour/04.png"));

    //4.设置窗口标题
    this->setWindowTitle("姬霓太美");

    //5.加载背景图片--重写画图事件函数
    //详见绘图事件函数中

    //6.在ui文件中添加工具栏，并将其他无用部分删除

加载背景图片和游戏名称图片

//重写绘图函数--声明作用域，不然会被编译为全局函数
//头文件--
void newload::paintEvent(QPaintEvent*)
{
    //1.创建一个画家对象
    QPainter painter1(this); //指定父亲

    //2.创建pixmap类型的对象，用于加载背景图片
    QPixmap pixmap1;

    //3.利用pixmap1加载背景图片
    pixmap1.load(":/resour/01.jpg");

    //4.利用画家将pixmap1加载的背景图画出来
    //注意drawpixmap的参数
    painter1.drawPixmap(0,0,this->width(),this->height(),pixmap1);

    //5.利用pixmap加载《游戏名》图片
    pixmap1.load(":/resour/06.png");       //URL:互联网上标准资源的唯一地址

    //6.改变图片大小
    //scaled:缩放、规模
    pixmap1=pixmap1.scaled(pixmap1.width()*0.4,pixmap1.height()*0.4);

    //7.将 游戏名 的图片画出来
    painter1.drawPixmap(20,33,pixmap1);

}

1.2自定义按钮类

目的是：按下按钮时，有一个弹动的效果

1.自定义按钮类：mybutton，继承于QPushButton，具有父类的一些属性，也有自己的特有属性

2.自己编写构造函数，第一个参数是未点击按钮图片时的路径，第二个是点击按钮时图片的路径

3.有两个成员函数保存图片路径，加载函数时一些特殊的设定

1.重写mybutton类构造函数

头文件：

//重写构造函数
    //explicit mybutton(QWidget *parent = nullptr);

    //注意第二个参数为默认参数，实现和声明只需要有一个说明即可
    mybutton(QString normalimg,QString pressimg = "");

    //两个成员函数保存图片路径
    QString normalimgpath;
    QString pressimgpath;

cpp文件：

mybutton::mybutton(QString normalimg, QString pressimg)
{
    //创建一个Pixmap,更好的显示图片
    QPixmap pixmap1;

    //保存输入的路径
    normalimgpath = normalimg;
    pressimgpath  = pressimg;


    //加载默认显示的图片
    int pixnum = pixmap1.load(normalimgpath);  //函数返回值为bool
    //如果加载失败返回false,提示加载失败
    if(!pixnum)
    {
        //此时的this，指的是mybutton
        QString pixstr = QString("%1 图片加载失败").arg(this->normalimgpath);
        qDebug()<setFixedSize(pixmap1.width(),pixmap1.height());
    
    //设置不规则图片格式
    //边界--0px---透明背景
    this->setStyleSheet("QPushButton{border:0px;}");
    
    //设置图片：给按钮添加图片
    this->setIcon(QIcon(":/resour/05.png"));
    
    
    //设置图片大小
    this->setIconSize(QSize(pixmap1.width(),pixmap1.height()));
    
    //利用画家画出来
    //在主窗口
    
}

2.主窗口创建 开始游戏 按钮

暂时还没有弹动的功能

    //7.创建一个自定义类型的按钮
    mybutton* mybutton1 = new mybutton(":/resour/05.png");

    //将按钮添加到对象树上
    mybutton1->setParent(this);

    //移动自定义按钮的位置
    mybutton1->move(this->width()*0.5-mybutton1->width()*0.5,this->height()*0.7);

1.3开始按钮 弹跳效果

3.1按压动画

需要添加动画类------

//按压动画
void mybutton::zoom1()
{
    //创建一个动画类指针对象，第一个参数是目标控件，第二个参数是动画方式geometry:几何
    QPropertyAnimation* animation1 = new QPropertyAnimation(this,"geometry");

    //创建动画的起始位置
    //函数参数：起始位置x值、y值、长、宽
    animation1->setStartValue(QRect(this->x(),this->y(),this->width(),this->height()));

    //创建动画结束的位置
    //结束位置x值、y值、长、宽
    animation1->setEndValue(QRect(this->x(),this->y()+10,this->width(),this->height()));

    //设置动画时间
    animation1->setDuration(200);

    //设置动画轨迹
    //easing:减轻、纾解
    //curve:曲线、弯线
    //variant:变量、变化、变种     bounce:弹性、弹跳、反弹
    animation1->setEasingCurve(QEasingCurve::OutBounce);

    //启动动画
    animation1->start();
}

3.2上弹动画

与按下动画类似

3.3组合

采用信号和槽的机制，使用 lambda 表达式的技术来实现

//测试一下
    connect(mybutton1,&QPushButton::clicked,[=](){
        //调试一下
        qDebug()<<"点击了按钮";
        //property:所有物、性能、财产
        //animation:活力、生气、动画片、动画制作


        //开始按钮执行动画
        //函数由自定义按钮提供
        //按下的动画
        mybutton1->zoom1();
        //弹起动画
        mybutton1->zoom2();
        
        //有一个小bug，快速连续按按钮，按钮就掉下去了
    });

1.4播放音乐

1.使用QSound类，但是需要在.pro文件内添加--多媒体XX

QT       += core gui multimedia

然后使用自定义的按钮类型创建一个播放音乐的按钮

创建一个音乐类对象，加载音乐，设定播放模式

利用信号和槽的技术，实现点击音乐播放的效果

不知道为什么mp3格式解码不成功？

    //创建加载音乐--路径＋指定父类
    QSound* sound1 = new QSound(":/resour/001.wav",this);

    //设置播放次数
    //-1是无限循环播放
    sound1->setLoops(-1);

    //信号和槽--点击按钮，播放音乐
    connect(mybutton0,&QPushButton::clicked,this,[=](){
        //开始播放音乐
        sound1->play();
    });

    //信号和槽--点击按钮，播放音乐
    connect(ui->pushButton,&QPushButton::clicked,this,[=](){
        //开始播放音乐
        sound1->stop();
    });

查阅资料显示：以上方法仅适用于简单播放wav类型的文件。

2.如果想要正常的播放mp3类型的文件，采用以下这种方式

头文件--

//创建加载音乐
    QMediaPlayer* player1 = new QMediaPlayer;

    //设置父亲
    player1->setParent(this);

    //指定播放路径  url:资源路径
    //播放的是---本地音乐
    //player1->setMedia(QUrl::fromLocalFile ("D:\\QT\\10TEN\\TEN\\resour\\001.mp3"));

    //播放资源文件--- 复制url地址
    player1->setMedia(QUrl("qrc:/resour/001.mp3"));


    //设置音量
    player1->setVolume(50); //0~100音量范围,默认是100


    //信号和槽--点击按钮，播放音乐
    connect(mybutton0,&QPushButton::clicked,this,[=](){
        //开始播放音乐
        qDebug()<<"开始播放音乐";
        player1->play();
    });

    //信号和槽--点击按钮，播放音乐
    connect(ui->pushButton,&QPushButton::clicked,this,[=](){
        //开始播放音乐
        qDebug()<<"停止播放音乐";
        player1->stop();
    });

二、切换游戏界面

2.1最核心的逻辑

1.创建一个新的类

2.在当前类里存放一个新类的指针

3.触发事件，隐藏该类，显示新类

 //需要有一个延时的效果
        QTimer::singleShot(500,this,[=](){
            //进入新页面

            //该类隐藏
            this->hide();

            //创建一个新类
            newpage* newpage1 = new newpage;

            //显示新类
            newpage1->show();
        });

2.2代码创建工具栏

这里采用代码的方式来生成工具栏，点击退出游戏则关闭窗口

//代码创建菜单栏
    QMenuBar* bar1 = new QMenuBar();

    //将菜单栏添加到对象树中
    this->setMenuBar(bar1);

    //创建具体菜单
    QMenu* menu1 = bar1->addMenu("开始");

    //创建菜单子项
    QAction* quit1 = menu1->addAction("退出游戏");

    //退出游戏
    connect(quit1,&QAction::triggered,this,[=](){
       //关闭窗口
        this->close();
    });

2.3返回主页面按钮

也是实例化出一个自定义按钮对象，将正常显示图片和按下图片显示的地址作为参数传进函数

1.移动按钮对象至合适位置：

   //创建返回主菜单按钮
    //传进去两个参数，一个默认状态、一个选中状态
    mybutton* mybutton2 = new mybutton(":/resour/08_1.png",":/resour/08_2.png");

    //给他设置父亲,父亲为这个窗口
    mybutton2->setParent(this);


    //移动他的位置
    mybutton2->move(this->width()-mybutton2->width()-10,this->height()-mybutton2->height()-10);

2.设置按钮对象参数

默认显示非按压时图片，与显示 开始游戏 按钮类似

这部分代码就是自定义按钮的构造函数，函数语句一样

只是知识传进去的参数不一样，显示的图片不一样

3.按下按钮，切换按钮图标

首先利用信号和槽的技术，将按钮与事件连接起来，但是暂时用不到

利用的是--重写鼠标按压与释放函数

按下鼠标时，重新设置自定义按钮的图标即可，只需要改几个参数

void mybutton::mousePressEvent(QMouseEvent* ev)
{
    if(pressimgpath !="")
    {
        qDebug()<<"鼠标按压";

        //如果不为空，则加载图片

        //加载按压显示的图片

        QPixmap pixmap1;
        int pixnum = pixmap1.load(pressimgpath);  //函数返回值为bool

        pixmap1 = pixmap1.scaled(pixmap1.width()*0.18,pixmap1.height()*0.18);

        //如果加载失败返回false,提示加载失败
        if(!pixnum)
        {
            //此时的this，指的是mybutton
            QString pixstr = QString("%1 图片加载失败").arg(this->pressimgpath);
            qDebug()<setFixedSize(pixmap1.width(),pixmap1.height());

        //设置不规则图片格式
        //边界--0px---透明背景
        this->setStyleSheet("QPushButton{border:3px;}");

        //设置图片：给按钮添加图片
        this->setIcon(QIcon(pressimgpath));


        //设置图片大小
        this->setIconSize(QSize(pixmap1.width(),pixmap1.height()));
    }

    //其他的事件交给父类处理
    QPushButton::mousePressEvent(ev);
}

鼠标释放函数与此类似，便不再展示

4.切换回主页面的实现

与主页面切换到新页面不同，新页面返回主页面采用自定义触发信号的方式

这里重新解释一下主页面切换到新页面的原理：

主页面内实例了一个新页面类的对象，然后将自身隐藏，将新页面显示出来

但是新页面内无法创建主页面的对象，所以采用：主页面监听新页面是否发出返回信号，如果新页面触发了返回主页面的按钮，主页面则执行隐藏新页面，显示主页面的语句

新页面.h文件中的信号声明部分：

signals:
    
    //返回到主页面的信号
    //只需要声明，不需要实现
    void returnnewload();

新页面.cpp文件内内按下返回按钮，则触发信号：

    // 点击按钮，返回主菜单
    connect(mybutton2,&QPushButton::clicked,this,[=](){
        
        qDebug()<<"返回主页面";
        
        //为了显示动画效果，延时300毫秒
        QTimer::singleShot(300,this,[=](){
            
            //触发返回主页面的信号
            emit returnnewload();
        });
        
    });

主页面.cpp文件内监听新页面

    //创建一个新类
    newpage* newpage1 = new newpage(this);

    //监听是否有返回信号

    connect(newpage1,&newpage::returnnewload,this,[=](){

        //如果有返回信号
        //隐藏新类，显示本类
        newpage1->hide();

        this->show();
    });

2.3优化切换页面

目标显示效果：页面切换时，窗口位置不变

原理：将旧页面的坐标信息传递给新页面即可

//将该类的几何坐标信息传递给新页面
    newpage1->setGeometry(this->geometry());

三、选择关卡按钮（无跳转）

3.1简要介绍

在新页面内不仅有有返回主页面的按钮，同样有选择关卡的按钮

关卡按钮的生成是采用 for 循环实现的

按钮上的文字是通过便签实现的

3.2for循环生成关卡选择按钮

通过调试函数+信号和槽技术来实现按压相应按钮显示第几关的提示

    //创建关卡选择按钮--不实现跳转
    //总共创建12个按钮，上面分别标上数字，点击会提示点击了几号关卡
    for(int i=0;i<15;i++)
    {
        //创建自定义按钮
        mybutton* selectbutton = new mybutton(":/resour/07.png");
        //指定父类
        selectbutton->setParent(this);

        //移动至合适位置
        //可以给自定义函数增加一个缩放系数，默认为1，有的话就进行缩放
        selectbutton->move(150+(i%4)*150,60+(i/4)*130);


        //检查一下是否可以点击
        connect(selectbutton,&QPushButton::clicked,this,[=](){
            //显示
            qDebug()<

3.3标签技术来显示按钮上的数字

需要给标签设定大小、移动位置、文本对齐与穿透属性

穿透属性：是为了让鼠标可以穿过按钮上标签层，使得按钮可以捕获鼠标点击的功能

        //在按钮上添加标号
        //利用标签的技术
        QLabel* labell = new QLabel(this);  //不设置父类的话，显示不正常

        //设置标签大小
        labell->setFixedSize(selectbutton->width(),selectbutton->height());

        //需要移动标签的位置
        labell->move(150+(i%4)*150,60+(i/4)*130);


        //设置显示内容
        labell->setText(QString::number(i+1));   //这样的话 全部堆积在了左上角

        //设置居中的格式 aligment:文本对齐、设置文本对齐
        labell->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);

        //设置鼠标穿透，可以穿过标签到达按钮
        labell->setAttribute(Qt::WA_TransparentForMouseEvents);

3.4字体类来修改文字属性

 //设置一个文字类
        QFont font1;
        
        //设置字体
        font1.setFamily("黑体");
        
        //设置字号
        font1.setPointSize(15);
        
        //将该字体设置给标签
        labell->setFont(font1);

四、打包发布

打包发布部分主要有两个大步骤，首先生成打包需要的文件，其次利用第三方工具打包发布

4.1生成release版本的exe文件

首先生成release版本的exe文件，方法就是在写代码页面的左下角的debug更换为release，然后重

新编译一遍即可，并将其放置到一个文件夹内

4.2利用QT自带 windeployqt 的生成打包文件

windeployqt在安装目录中的 bin 文件夹内，记住这个命令

在放置exe文件的文件夹内，打开命令提示符，输入刚刚的命令

命令为：windeployqt 文件名.exe

就会生成一系列文件，主要是一些动态链接库

这些文件就是后续打包发布我们需要的文件

到这一步，就可以把所有的文件发给朋友，朋友点开

4.3采用第三方工具打包文件

1.需要安装两个软件

第一个：空软件脚本化安装系统--NSIS

下载地址：https://nsis.sourceforge.io/Download

第二个：开发工具--HW VNIS Edit

下载地址：HM NIS Edit 2.03

然后参考这篇文章：

手把手教NIS Edit安装向导的使用 - kinglyboy - 博客园 (cnblogs.com)