QML笔记-QML中SpriteSequence及Sprite的基本使用

目录

 

背景

基本概念

博主例子

源码打包下载

---

 

背景

最近在研究一个稍微复杂的QML官方例子，里面有个SpriteSequence及Sprite知识点，我从来没有用过，这次特意花时间提取了出来，方便以后进行查阅。这个东西用来写游戏，或者xx软件的背景，或者xx动态效果，贼吉尔6！！！

 

基本概念

SpriteSequence及Sprite，用法和前端差不多，这里我只说明其中的用法，具体参数含义可以查阅文档；

关键点一：分析素材，如下：

从这个图里面，可以看到人物有4种状态，分别是向下、向左、向右、向上；

每一个有4张图。

SpriteSequence及Sprite有只要选择好要指定的位置（X轴），以及高度（一般是整张图片/4的高度）

就可以实现动态播放了。

关键代码如下：

        SpriteSequence {
            id: sequence;
            width: 50;
            height: 100;
            interpolate: false;
            running: false;
            sprites: [
                Sprite {
                    name: "down";
                    source: image1.source;
                    frameCount: 4;
                    frameWidth: image1.width/4;
                    frameHeight: image1.height/4;
                    frameRate: 10;
                },
                Sprite {
                    name: "left";
                    source: image1.source;
                    frameCount: 4;
                    frameY: image1.height/4;
                    frameWidth: image1.width/4;
                    frameHeight: image1.height/4;
                    frameRate: 10;
                },
                Sprite {
                    name: "right";
                    source: image1.source;
                    frameCount: 4;
                    frameY: image1.height/4*2;
                    frameWidth: image1.width/4;
                    frameHeight: image1.height/4;
                    frameRate: 10;
                },
                Sprite {
                    name: "up";
                    source: image1.source;
                    frameCount: 4;
                    frameY: image1.height/4*3;
                    frameWidth: image1.width/4;
                    frameHeight: image1.height/4;
                    frameRate: 10;
                }
            ]
        }

其中frameCount和frmeY,frameWidth,frameHeight就是关键点！

interpolate: false;这个参数感觉在背景动态等方面使用特别的好，在此就设置为false；

 

 

博主例子

程序运行截图如下：

程序结构如下：

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Sprite Demo")

    Image {
        id: bg
        source: "qrc:/img/bg.jpeg"
        fillMode: Image.Pad
    }

    Soldier{

        id : soldier
    }
}

Soldier.qml

import QtQuick 2.0

Item {

        Image {
            x:200;
            id: image1;
            source: "qrc:/img/soldier.png";
            visible: false
        }

        SpriteSequence {
            id: sequence;
            width: 50;
            height: 100;
            interpolate: false;
            running: false;
            sprites: [
                Sprite {
                    name: "down";
                    source: image1.source;
                    frameCount: 4;
                    frameWidth: image1.width/4;
                    frameHeight: image1.height/4;
                    frameRate: 10;
                },
                Sprite {
                    name: "left";
                    source: image1.source;
                    frameCount: 4;
                    frameY: image1.height/4;
                    frameWidth: image1.width/4;
                    frameHeight: image1.height/4;
                    frameRate: 10;
                },
                Sprite {
                    name: "right";
                    source: image1.source;
                    frameCount: 4;
                    frameY: image1.height/4*2;
                    frameWidth: image1.width/4;
                    frameHeight: image1.height/4;
                    frameRate: 10;
                },
                Sprite {
                    name: "up";
                    source: image1.source;
                    frameCount: 4;
                    frameY: image1.height/4*3;
                    frameWidth: image1.width/4;
                    frameHeight: image1.height/4;
                    frameRate: 10;
                }
            ]
        }
        focus: true;
        Keys.onPressed: {
            switch(event.key)
            {
            case Qt.Key_Up:
                sequence.y -= 5;
                sequence.jumpTo("up");
                sequence.running = true;
                break;
            case Qt.Key_Down:
                sequence.y += 5;
                sequence.jumpTo("down");
                sequence.running = true;
                break;
            case Qt.Key_Left:
                sequence.x -= 5;
                sequence.jumpTo("left");
                sequence.running = true;
                break;
            case Qt.Key_Right:
                sequence.x += 5;
                sequence.jumpTo("right");
                sequence.running = true;
                break;
            default:
                ;
            }
        }
        Keys.onReleased: {
            sequence.running = false;
        }

}

 

 

源码打包下载

https://github.com/fengfanchen/Qt/tree/master/SpritesOfQML