QT mobile App Development (iii): animating frames with Sprite images

Qt mobile App Development ( three ): Use Sprite picture for frame animation

On a blog post about the general support of QT Quick animation, various forms of animation, with different interpolation functions, you can almost achieve all the desired animation effect, and for some special effects of the game such as frame animation, QT has a special class to achieve. Let's take a look at how the QT quick is implemented for frame animation.

original article, against undeclared references. Original Blog address:http://blog.csdn.net/gamesdev/article/details/33743527

The 2D game engine generally promotes frame animation as a very important feature, such as Cocos2d-x also has a very powerful frame animation effect, in fact, a good design can let the frame animation has infinite variant form, thus gives the designer infinite inspiration space. Qt Quick's frame animation is perfect, not only can be rendered in the form of animation alone, but also with the particle system, to get a more dazzling example effect.

In fact, frame animation in order to save memory space, generally use a large image of the form to save a character frame information, the following two examples are frame animation pictures:

The implementation of frame animation usually requires the assistance of the state machine system. Because in addition to the task of parsing this large map, assigning the corresponding state to each action of a character is also an important task of frame animation. So a game classifies the different frames of a character's action as a group, and finally forms the action of the character. This is the example of the QT band Bear Whack:

I'll use an example to show you how Qt uses sprites and spritesequence for frame animation.

Import QtQuick 2.2import qtquick.controls 1.1ApplicationWindow {visible:true width:640 height:480 title:q STr ("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 use of a sprite Case ")    }}

We just took the little Bear frame animation from the QT example. Here's the program:

The purpose of the Spritesequence class is to provide a display container for frame animations and to control the operation of the sprite. And the Sprite, like an action group, can specify which frames the character's actions are made of. The example above is achieved by using Framecount, Framewidth, Frameheight, and Frameduration. The container of a sprite may not be spritesequence, for example, applying a frame animation to a particle system requires imageparticle as a container for a sprite, such as the example of a QT band whack using a similar approach.

In addition to the above method, there is a more simple way to combine spritesequence and sprite to specify animation, that is animatesprite. Or the above example, we rewrite this:

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 much simpler. It is a simple class of QT that removes the effect of customizing the Transition (transition) and is ideal for a single-action character. Most of the cases we use it is enough.

In my game "take medicine" in my production, I also benefited from the Animatedsprite class, in fact, in time of urgent circumstances, I only draw out two frames:

Thus, with the help of animatedsprite, the realization of the frame animation of the bacterium becomes very simple:

Bacterial 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;    }}

This article participated in the CSDN Bowen Contest, please support me, vote for me!