Qt mobile app development (III): Use sprite images for Frame Animation

Qt mobile app development (III): Use sprite images for Frame Animation

 

In the previous blog, we talked about the general support of Qt Quick for animation. Different types of animation can be combined with different interpolation functions to achieve almost all the animation effects you want, for some special effects of the game, such as frame animation, Qt has a special class for implementation. Next, let's take a look at how Frame Animation is implemented in Qt Quick.

Original article, opposed to unstated reference. Original blog address: http://blog.csdn.net/gamesdev/article/details/33743527

Generally 2D game engines are Frame Animation as a very important feature to promote, for example, cocos2d-x also has a very powerful frame animation effect, in fact, A good design allows an infinite variant of Frame Animation, giving designers unlimited space for inspiration. The Frame Animation of Qt Quick is well-developed. It can not only be independently rendered into the animation form, but also be used with the particle system to get a more dazzling example effect.

In fact, Frame Animation uses a large image to save the frame information of a role in order to save the display space. The following two examples are Frame Animation images:

The implementation of Frame Animation usually requires assistance from the state machine system. In addition to the tasks for parsing this large image, assigning corresponding states to each action of the role is also an important task of frame animation. Therefore, a game classifies different frames of a role's action as a group for playing, and finally forms the role's action. This is an example of bear whack that comes with Qt:

Next I will use an example to introduce how to use Sprite and SpriteSequence to implement Frame Animation in Qt.

Import QtQuick 2.2 import QtQuick. controls 1.1 ApplicationWindow {visible: true width: 640 height: 480 title: qsTr ("Sprite test") menuBar: MenuBar {Menu {title: qsTr ("file") MenuItem {text: qsTr ("exit") 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 ("this example is used to test the Sprite usage. ")}}

We took the Bear Frame Animation in the Qt example directly. The following is the program's:

The SpriteSequence class provides a display container for Frame Animation and controls the running status of Sprite. Sprite, like an action group, specifies the frames that a role's actions consist. The preceding example uses frameCount, frameWidth, frameHeight, and frameDuration. Sprite containers can be not SpriteSequence. For example, if Frame Animation is applied to the particle system, ImageParticle needs to be used as the Sprite container. For example, bear whack in the example of Qt uses a similar method.

 

In addition to the above method, there is also a simpler way to specify an animation by combining SpriteSequence with Sprite, that is, AnimateSprite. In the above example, we rewrite it as follows:

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

The effect is the same as above, and the syntax is simpler. In fact, it is a simple class launched by Qt that removes the effect of the custom transition (transition). It is very suitable for roles with only one action. In most cases, it is enough to use it.

In my game "taking medicine", I also benefited from the AnimatedSprite class. In fact, when time is tight, I only drew two frames:

With the help of AnimatedSprite, it is very easy to implement the Frame Animation of bacteria:

// Bacterial import QtQuick 2.2 import "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 ;}}

This article participated in the CSDN blog contest. Please support me and vote for me!