Qt移动应用开发：使用精灵图片实现帧动画

Qt移动应用开发：使用精灵图片实现帧动画

 

上一篇博文讲到了Qt Quick对于动画的一般支持，动画的形式多样，配合不同的插值函数，可以几乎实现所有想要的动画效果，而对于游戏的一些特殊的效果比如说帧动画，Qt更是有专门的类来实现。下面我们就来看看Qt Quick中究竟是对帧动画是如何实现的吧。

原创文章，反对未声明的引用。原博客地址：http://blog.csdn.net/gamesdev/article/details/33743527

一般2D的游戏引擎都将帧动画作为一项非常重要的功能特性加以宣传，比如说cocos2d-x也有很强大的帧动画效果，事实上，一个良好的设计可以让帧动画有无限的变种形式，从而给设计人员无限的灵感空间。Qt Quick的帧动画做得很完善，不仅可以单独渲染成动画的形式，而且可以和粒子系统相搭配，获得更炫的例子效果。

事实上帧动画为了节省显存的空间，一般会采用一张大图的形式来保存一个角色的所帧信息，下面两个例子就是帧动画图片：

 

帧动画的实现通常需要状态机系统的辅助。因为除了解析这张大图的任务外，为角色的每个动作赋予相应的状态也是帧动画的重要任务。所以一款游戏会将角色的某个动作的不同帧作为一组来分类播放，最后形成角色的行为动作。这是Qt自带的例子bear whack的截图：

下面我就使用一个实例来向大家介绍一下Qt如何使用Sprite和SpriteSequence来实现帧动画的。

 

01. import QtQuick 2.2
02. import QtQuick.Controls 1.1
03.
04. ApplicationWindow {
05. visible: true
06. width: 640
07. height: 480
08. title: qsTr("Sprite测试")
09.
10. menuBar: MenuBar {
11. Menu {
12. title: qsTr("文件")
13. MenuItem {
14. text: qsTr("退出")
15. onTriggered: Qt.quit( );
16. }
17. }
18. }
19.
20. SpriteSequence
21. {
22. id: spriteSequence
23. anchors.centerIn: parent
24. width: 256
25. height: 256
26. interpolate: false
27. running: true
28. sprites:
29. [
30. Sprite
31. {
32. name: "floating"
33. source: "Bear1.png"
34. frameCount: 9
35. frameWidth: 256
36. frameHeight: 256
37. frameDuration: 80
38. }
39. ]
40. }
41.
42. Text
43. {
44. anchors.top: spriteSequence.bottom
45. anchors.horizontalCenter: spriteSequence.horizontalCenter
46. text: qsTr("本例用来测试Sprite的使用情况。")
47. }
48. }

 

我们直接将Qt例子中的小熊帧动画拿过来了。下面是程序的截图：

SpriteSequence类的作用是为帧动画提供一个显示的容器，并且控制Sprite的运行情况。而Sprite呢，则类似于一个动作组，它可以指定角色的动作由哪些帧组成。上面的例子是通过使用frameCount、frameWidth、frameHeight和frameDuration来达到目的。Sprite的容器可以不是SpriteSequence，比如说将帧动画应用在粒子系统上就需要ImageParticle作为Sprite的容器了，比如说Qt自带的例子bear whack就使用了类似的手法。

 

除了上面的方法外，还有一种将SpriteSequence和Sprite结合起来的更加简单的方法来指定动画，那就是AnimateSprite。还是上面的例子，我们这样改写：

 

01. AnimatedSprite
02. {
03. id: animatedSprite
04. anchors.centerIn: parent
05. width: 256
06. height: 256
07. frameCount: 9
08. frameWidth: 256
09. frameHeight: 256
10. frameDuration: 80
11. interpolate: false
12. source: "Bear1.png"
13. }

 

效果和上面一样，而且语法更加简单。其实正是Qt去掉了自定义transition（过渡）的效果而推出的一个简单类，非常适合只有单个动作的角色。大多数情况下我们使用它就足够了。

在我制作的游戏《吃药了》中，我也受益于AnimatedSprite类，其实在时间紧迫的情况下，我只绘制出了两帧：

于是在AnimatedSprite的帮助下，实现细菌的帧动画就变得非常简单：

1.

01. // 细菌
02. import QtQuick 2.2
03. import "GameController.js" as Controller
04.
05. Block
06. {
07. id: bacterium
08. type: Controller.TYPE_BACTERIUM
09. property alias source: sprite.source
10.
11. AnimatedSprite
12. {
13. id: sprite
14. width: parent.width
15. height: parent.height
16.
17. frameWidth: 128
18. frameHeight: 128
19. frameCount: 2
20. frameRate: 2
21. running: true
22. }
23.
24. function setSource( color )
25. {
26. var imageResources = ["bacterium-red.png",
27. "bacterium-yellow.png",
28. "bacterium-blue.png"];
29. source = "../../images/" + imageResources[color];
30. }
31.
32. function setInvisible( )
33. {
34. sprite.visible = false;
35. }
36. }