背景

最近在研究一个稍微复杂的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的基本使用相关推荐

QML笔记-4中方式运行qml文件
目录使用QQmlApplicationEngine运行qml 使用qml工具运行使用qmlScene工具运行qml文件使用QtQuick Prototype运行qml文件使用QQmlAppli ...
QML笔记-QML基本数据类型的使用
目录基本概念举个栗子基本概念这里的数据类型不仅仅有C++里面的int,String等, 还有个很有特点的类型var,这个又可以放数组,也可以放函数,也可以混着换,很少有趣. 举个栗子程序运行 ...
WebQML笔记-qml获取canvas中元素是否被按下
以前出了几个用QWebView,获取html前端数据的博文, 使用QWebElement可以直接获取html中元素的填充的值. 在此不在多提.这个是纯QML获取canvas中元素是否被按下的思路. 这 ...
QML笔记-使用connect界面数据交互（qml中Designer使用）
程序运行截图如下: 点击右边的sender 左边会接收到数据: 多次点击后: 这里关键是记录两点: 1. 是qml界面不同控件数据的传输 2. 使用设计器完成简单的qml控件设计先来记录下qml中D ...
Qt 5.12学习笔记--QML性能策略
Qt 5.12学习笔记--QML性能策略 1 简介 2 时间因素 2 性能分析 3 JavaScript 部分 4 绑定 5 类型转换 6 解析属性 6 属性绑定 7 序列提示(Sequence ti ...
QML笔记：QML基本概念及使用
QML笔记:QML基本概念及使用 Qt5中的Qt Qml和Qt Quick架构 Qt Qml模块本身并没有涉及图形显示,所有的图形处理都由Qt Quick模块完成. Qt Quick 以QPA(Qt ...
[QML开发笔记]-QML滑屏效果
[QML开发笔记]-QML滑屏效果 QML的SwipeView滑屏控件.PageIndicator翻页指示器控件的功能介绍和使用方法.同样的功能我通过QWidget也进行了实现,可以参考QWidget ...
QML地图Map中使用QPainterPath,并显示任意点经纬度位置
QML地图Map中提供了供绘制图形的组件,例如MapPolyline,MapCircle等,但是这些组件在绘制复杂轨迹时就显得功能不够全面,因此我将QPainterPath在Map中进行使用并进行绘制 ...
[QML开发笔记]-QML绘制仪表盘
[QML开发笔记]-QML绘制仪表盘使用QML绘制仪表盘,主要是因为使用QPainter绘制控件绘制习惯了,使用QML也要绘制一个试试.总体感觉,QML绘制起来还是挺方便的,QML自带的仪表盘控件功 ...

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

背景

基本概念

博主例子

源码打包下载

QML笔记-QML中SpriteSequence及Sprite的基本使用相关推荐

最新文章

热门文章