Qt游戏制作-翻金币案例

1. 创建项目

点击新建项目，选择Qt窗口应用，下一步

设置项目名为CoinFlip，注意路径不要有中文，下一步

类名为MainScene（主场景），基类为QMainWindow，选择生成界面ui

至于其他设置和之前的创建项目一致，完成项目创建后如下：

编译项目，发现创建没有问题

---

2. 添加资源

添加资源和之前类似，先把res文件下复制到项目文件CoinFlip下，然后根据我们之前讲过的导入资源的方法导入资源即可。资源在下：

res.zip

添加后如图所示：

---

3. 项目基本配置

3.1. 配置主场景

下面我们首先配置项目的固定大小、图标和标题

    //配置国定大小
    setFixedSize(320,588);

    //设置图标
    setWindowIcon(QIcon(":/res/Coin0001.png"));

    //设置标题
    setWindowTitle("翻金币主场景");

3.2. 开始——退出菜单实现

我们先在ui中创建好开始菜单的退出选项，并且获取到它的名字actionquit。

说明：这里的退出刚开始只能输入英文quit，然后在右下角的Text中将其设为中文的退出

然后我们用信号槽将其和关闭函数连接起来，实现点击退出结束程序的功能

    //退出按钮实现
    connect(ui->actionquit,&QAction::triggered,[=](){
       this->close();
    });

---

3.3. 绘制背景和背景标题

我们先在主场景的头文件中声明一个绘图函数

    //重写paintEvent事件  画背景图
    void paintEvent (QPaintEvent *);

然后再在主场景资源文件中重写绘图事件，绘制背景和背景的标题

//绘图事件  画背景图
void MainScene::paintEvent(QPaintEvent *)
{
    //画背景
    QPainter painter(this);
    QPixmap pix;
    pix.load(":/res/PlayLevelSceneBg.png");
    painter.drawPixmap(0,0,this->width(),this->height(),pix);

    //画背景上的标题
    pix.load(":/res/Title.png");
    pix = pix.scaled(pix.width()*0.5,pix.height()*0.5);//图标的缩放
    painter.drawPixmap(10,30,pix);

}

注意：

• 当背景大小和窗口大小不符时，我们可以在drawPixmap()函数中增加两个参数，将背景拉伸为指定宽和高的图片
• 当图标大小不合适时，我们可以通过调用scaled()函数，将其进行缩放然后重新赋值给自己进行绘制

可以看到初步配置后的项目窗口如下所示：

---

4. 开始按钮创建

4.1. 封装自定义按钮MyPushButton

因为Qt中并没有设置按下和弹起两种状态的控件，因此我们只有自定义一个按钮MyPushButton，并在Qt中创建好

创建好之后，我们要修改其继承的类，把QWidget改为QPushButton（修改三处）

mypushbutton.h中的：

mypushbutton.cpp中的

4.2. 构造丞数（默认显示图片，按下后显示的图片）

我们注释掉自带的构造函数，声明了一个具有初始默认值的构造函数，因为我们不希望按下后开始按钮切换图片，所以我们默认按下的图片为空。

    //explicit MyPushButton(QWidget *parent = nullptr);

    //构造函数 参数1 正常显示的图片路径   参数2 按下后显示的图片路径
    MyPushButton(QString normalImg,QString pressImg="" );

    //成员属性 保存用户传入的默认显示路径 以及按下后显示的图片路径
    QString normalImgPath;
    QString pressImgPath;

然后在构造函数中，我们先判断导入图片是否成功，然后再对开始的图标进行了设置

• 设置国定大小——setFixedSize();
• 设置不规则图片样式——setStyleSheet("QPushButton{border:0px;});
• 设置图标——setIcon();
• 设置图标大小——setIconSize();

MyPushButton::MyPushButton(QString normalImg, QString pressImg)
{
    this->normalImgPath = normalImg;
    this->pressImgPath = pressImg;

    QPixmap pix;
    bool ret = pix.load(normalImg);
    if(!ret){
        qDebug()<<"图片加载失败";
        return;
    }

    //设置图片固定大小
    this->setFixedSize(pix.width(),pix.height());

    //设置不规则图片样式
    this->setStyleSheet("QPushButton{border:0px;}");

    //设置图标
    this->setIcon(pix);

    //设置图标大小
    this->setIconSize(QSize(pix.width(),pix.height()));

}

4.3. 测试开始按钮

然后我们在主场景函数中实例化开始按钮，并通过move()函数，设置开始按钮的位置

    //开始按钮
    MyPushButton * startBtn = new MyPushButton(":/res/MenuSceneStartButton.png");
    startBtn->setParent(this);
    startBtn->move(this->width()*0.5 - startBtn->width()*0.5,this->height()*0.7);

完成后效果如下：

4.4. 开始制作特效

然后我们开始制作按下按钮的弹跳特效，首先我们在mypushbutton头文件中，声明两个特效函数

    //弹跳特效
    void zoom1();//向下跳
    void zoom2();//向上跳

然后我们再分别在cpp文件中实现两个特效函数

4.5. zoom1向下跳

弹跳动画流程：

1. 创建动画对象——new QPropertyAnimation();
2. 设置动画时间间隔（ms为单位）——