目錄

?

背景

基本概念

博主例子

源碼打包下載

---

?

背景

最近在研究一個稍微復雜的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.2Window {visible: truewidth: 640height: 480title: qsTr("Sprite Demo")Image {id: bgsource: "qrc:/img/bg.jpeg"fillMode: Image.Pad}Soldier{id : soldier} }

Soldier.qml

import QtQuick 2.0Item {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

總結

以上是生活随笔為你收集整理的QML笔记-QML中SpriteSequence及Sprite的基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。