怎样在QML中利用Sprite来做我们须要的动画

在游戏中动画的设计很中要。

在QML中，它提供了丰富的animation。可是有时我们须要对图像进行变化，就像放电影一样。在今天的这篇文章中，我们将设计一个能够变化图像的动画。

我们能够通过Qt所提供的Sprite功能来实现。

为了设计的方便，我们先设计一个我们自己的bear动画，这个动画的图像大小为： 2048x256。它刚好是8副图256x256

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="800" height="150" alt="">

在我们的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应用：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="300" alt="">

项目的源代码在： https://github.com/liu-xiao-guo/sprite

巴特西

怎样在QML中利用Sprite来做我们须要的动画

BearSprite.qml

FishSprite.qml

Main.qml

最新文章

热门文章