在游戏中动画的设计非常中要。在QML中,它提供了丰富的animation,但是有时我们需要对图像进行变化,就像放电影一样。在今天的这篇文章中,我们将设计一个可以变化图像的动画。我们可以通过Qt所提供的Sprite功能来实现。
为了设计的方便,我们先设计一个我们自己的bear动画,这个动画的图像大小为: 2048x256。它刚好是8副图256x256
在我们的Sprite设计中,我们想按照上述图像显示的顺序依次显示每个图像,这样就可以形成一个可以连续变化的动画效果。
直接把我们的动画设计文件BearSprite贴出来:
BearSprite.qml
import QtQuick 2.0 Item { width: 256 height: 256 SpriteSequence { id: fishSprite anchors.fill: parent interpolate: false goalSprite: "" Sprite { name: "first" source: "./gfx/Bear2.png" frameWidth: 256 frameHeight: 256 frameCount: 1 frameDuration: 800 frameDurationVariation: 400 to: { "second" : 1 } } Sprite { name: "second" source: "./gfx/Bear2.png" frameCount: 1 frameX: 256 frameWidth: 256 frameHeight: 256 frameDuration: 800 frameDurationVariation: 400 to: { "third" : 1 } } Sprite { name: "third" source: "./gfx/Bear2.png" frameCount: 1 frameX: 256*2 frameWidth: 256 frameHeight: 256 frameDuration: 800 frameDurationVariation: 400 to: { "fourth" : 1 } } Sprite { name: "fourth" source: "./gfx/Bear2.png" frameCount: 1 frameX: 256*3 frameWidth: 256 frameHeight: 256 frameDuration: 800 frameDurationVariation: 400 to: { "fifth" : 1 } } Sprite { name: "fifth" source: "./gfx/Bear2.png" frameCount: 1 frameX: 256*4 frameWidth: 256 frameHeight: 256 frameDuration: 800 frameDurationVariation: 400 to: { "sixth" : 1 } } Sprite { name: "sixth" source: "./gfx/Bear2.png" frameCount: 1 frameX: 256*5 frameWidth: 256 frameHeight: 256 frameDuration: 800 frameDurationVariation: 400 to: { "seventh" : 1 } } Sprite { name: "seventh" source: "./gfx/Bear2.png" frameCount: 1 frameX: 256*6 frameWidth: 256 frameHeight: 256 frameDuration: 800 frameDurationVariation: 400 to: { "eighth" : 1 } } Sprite { name: "eighth" source: "./gfx/Bear2.png" frameCount: 1 frameX: 256*7 frameWidth: 256 frameHeight: 256 frameDuration: 800 frameDurationVariation: 400 to: { "first" : 1 } } Sprite { //WORKAROUND: This prevents the triggering of a rendering error which is currently under investigation. name: "dummy" source: "./gfx/Bear2.png" frameCount: 8 frameWidth: 256 frameHeight: 256 frameX: 0 frameDuration: 200 } } }
在上面的设计中,我们使用了一个SpriteSequence,里面放了一些我们所需要的Sprite。
Sprite { name: "sixth" source: "./gfx/Bear2.png" frameCount: 1 frameX: 256*5 frameWidth: 256 frameHeight: 256 frameDuration: 800 frameDurationVariation: 400 to: { "seventh" : 1 } }
这里的每个Sprite的设计都几乎都差不多。每个Sprite都有一个自己的名字。这里注意frameX。它其实是在我们上面显示的图里的x坐标位置。比如256x5,表示的是滴5副图。另外,我们的frameHeight和frameWidth也是和原图的大小是一样的,虽然在实际的显示中这个大小可以在Main.qml中可以设置。
使用同样的方法,我们可以做一个FishSprite。
FishSprite.qml
import QtQuick 2.0 import QtMultimedia 5.0 Item { width: 64 height: 64 property real hp: 3 SoundEffect { id: spawnSound source: "./audio/catch.wav" loops:SoundEffect.Infinite } SoundEffect { id: killedSound source: "./audio/catch-action.wav" } SpriteSequence { id: fishSprite anchors.fill: parent interpolate: false goalSprite: "" Sprite { name: "left" source: "./gfx/mob-idle.png" frameWidth: 64 frameHeight: 64 frameCount: 1 frameDuration: 800 frameDurationVariation: 400 to: { "front" : 1 } } Sprite { name: "front" source: "./gfx/mob-idle.png" frameCount: 1 frameX: 64 frameWidth: 64 frameHeight: 64 frameDuration: 800 frameDurationVariation: 400 to: { "left" : 1, "right" : 1 } } Sprite { name: "right" source: "./gfx/mob-idle.png" frameCount: 1 frameX: 128 frameWidth: 64 frameHeight: 64 frameDuration: 800 frameDurationVariation: 400 to: { "front" : 1 } } Sprite { //WORKAROUND: This prevents the triggering of a rendering error which is currently under investigation. name: "dummy" source: "./gfx/melee-idle.png" frameCount: 8 frameWidth: 64 frameHeight: 64 frameX: 0 frameDuration: 200 } NumberAnimation on x { id: fishSwim running: false property bool goingLeft: fishSprite.currentSprite == "right" to: goingLeft ? -360 : 360 duration: 300 } Component.onCompleted: { spawnSound.play() } } SpriteSequence { id: bubble width: 64 height: 64 scale: 0.4 + (0.2 * hp) interpolate: false goalSprite: "" Behavior on scale { NumberAnimation { duration: 150; easing.type: Easing.OutBack } } Sprite { name: "big" source: "./gfx/catch.png" frameCount: 1 to: { "burst" : 0 } } Sprite { name: "burst" source: "./gfx/catch-action.png" frameCount: 3 frameX: 64 frameDuration: 200 } Sprite { //WORKAROUND: This prevents the triggering of a rendering error which is currently under investigation. name: "dummy" source: "./gfx/melee-idle.png" frameCount: 8 frameWidth: 64 frameHeight: 64 frameX: 0 frameDuration: 200 } SequentialAnimation on width { loops: Animation.Infinite NumberAnimation { from: width * 1; to: width * 1.1; duration: 800; easing.type: Easing.InOutQuad } NumberAnimation { from: width * 1.1; to: width * 1; duration: 1000; easing.type: Easing.InOutQuad } } SequentialAnimation on height { loops: Animation.Infinite NumberAnimation { from: height * 1; to: height * 1.15; duration: 1200; easing.type: Easing.InOutQuad } NumberAnimation { from: height * 1.15; to: height * 1; duration: 1000; easing.type: Easing.InOutQuad } } } }
Main.qml
import QtQuick 2.0 import Ubuntu.Components 1.1 /*! \brief MainView with a Label and Button elements. */ MainView { // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "sprite.liu-xiao-guo" /* This property enables the application to change orientation when the device is rotated. The default is false. */ //automaticOrientation: true // Removes the old toolbar and enables new features of the new header. useDeprecatedToolbar: false width: units.gu(60) height: units.gu(85) Page { id: page title: i18n.tr("sprite") Column { anchors.fill: parent FishSprite { height: units.gu(30) width: units.gu(30) } BearSprite { id: bear height: units.gu(30) width: units.gu(30) NumberAnimation on x { to: page.width duration: 8*800 onRunningChanged: { if ( running == false) { bear.x = 0 start() } } } } } } }
运行我们的QML应用:
项目的源码在: git clone https://gitcafe.com/ubuntu/sprite.git
版权声明:本文为博主原创文章,未经博主允许不得转载。
时间: 2024-10-08 13:41:26