Qt行動裝置 App開發（三）：使用精靈圖片實現幀動畫

Qt行動裝置 App開發（三）：使用精靈圖片實現幀動畫

 

       上一篇博文講到了Qt Quick對於動畫的一般支援，動畫的形式多樣，配合不同的插值函數，可以幾乎實現所有想要的動畫效果，而對於遊戲的一些特殊的效果比如說幀動畫，Qt更是有專門的類來實現。下面我們就來看看Qt Quick中究竟是對幀動畫是如何?的吧。

原創文章，反對未聲明的引用。原部落格地址：http://blog.csdn.net/gamesdev/article/details/33743527

       一般2D的遊戲引擎都將幀動畫作為一項非常重要的功能特性加以宣傳，比如說cocos2d-x也有很強大的幀動畫效果，事實上，一個良好的設計可以讓幀動畫有無限的變種形式，從而給設計人員無限的靈感空間。Qt Quick的幀動畫做得很完善，不僅可以單獨渲染成動畫的形式，而且可以和粒子系統相搭配，獲得更炫的例子效果。

       事實上幀動畫為了節省顯存的空間，一般會採用一張大圖的形式來儲存一個角色的所幀資訊，下面兩個例子就是幀動畫圖片：

       幀動畫的實現通常需要狀態機器系統的輔助。因為除瞭解析這張大圖的任務外，為角色的每個動作賦予相應的狀態也是幀動畫的重要任務。所以一款遊戲會將角色的某個動作的不同幀作為一組來分類播放，最後形成角色的行為動作。這是Qt內建的例子bear whack的：

下面我就使用一個執行個體來向大家介紹一下Qt如何使用Sprite和SpriteSequence來實現幀動畫的。

import QtQuick 2.2import QtQuick.Controls 1.1ApplicationWindow {    visible: true    width: 640    height: 480    title: qsTr("Sprite測試")    menuBar: MenuBar {        Menu {            title: qsTr("檔案")            MenuItem {                text: qsTr("退出")                onTriggered: Qt.quit( );            }        }    }    SpriteSequence    {        id: spriteSequence        anchors.centerIn: parent        width: 256        height: 256        interpolate: false        running: true        sprites:        [            Sprite            {                name: "floating"                source: "Bear1.png"                frameCount: 9                frameWidth: 256                frameHeight: 256                frameDuration: 80            }        ]    }    Text    {        anchors.top: spriteSequence.bottom        anchors.horizontalCenter: spriteSequence.horizontalCenter        text: qsTr("本例用來測試Sprite的使用方式。")    }}

我們直接將Qt例子中的小熊幀動畫拿過來了。下面是程式的：

       SpriteSequence類的作用是為幀動畫提供一個顯示的容器，並且控制Sprite的運行情況。而Sprite呢，則類似於一個動作組，它可以指定角色的動作由哪些幀組成。上面的例子是通過使用frameCount、frameWidth、frameHeight和frameDuration來達到目的。Sprite的容器可以不是SpriteSequence，比如說將幀動畫應用在粒子系統上就需要ImageParticle作為Sprite的容器了，比如說Qt內建的例子bear whack就使用了類似的手法。

 

       除了上面的方法外，還有一種將SpriteSequence和Sprite結合起來的更加簡單的方法來指定動畫，那就是AnimateSprite。還是上面的例子，我們這樣改寫：

AnimatedSprite{    id: animatedSprite    anchors.centerIn: parent    width: 256    height: 256    frameCount: 9    frameWidth: 256    frameHeight: 256frameDuration: 80interpolate: false    source: "Bear1.png"}

效果和上面一樣，而且文法更加簡單。其實正是Qt去掉了自訂transition（過渡）的效果而推出的一個簡單類，非常適合只有單個動作的角色。大多數情況下我們使用它就足夠了。

       在我製作的遊戲《吃藥了》中，我也受益於AnimatedSprite類，其實在時間緊迫的情況下，我只繪製出了兩幀：

於是在AnimatedSprite的協助下，實現細菌的幀動畫就變得非常簡單：

// 細菌import QtQuick 2.2import "GameController.js" as ControllerBlock{    id: bacterium    type: Controller.TYPE_BACTERIUM    property alias source: sprite.source    AnimatedSprite    {        id: sprite        width: parent.width        height: parent.height        frameWidth: 128        frameHeight: 128        frameCount: 2        frameRate: 2        running: true    }    function setSource( color )    {        var imageResources = ["bacterium-red.png",                              "bacterium-yellow.png",                              "bacterium-blue.png"];        source = "../../images/" + imageResources[color];    }    function setInvisible( )    {        sprite.visible = false;    }}

本文參加了CSDN博文大賽，請大家支援我，為我投一票！