Book Image

Qt5 C++ GUI Programming Cookbook

By : Lee Zhi Eng
Book Image

Qt5 C++ GUI Programming Cookbook

By: Lee Zhi Eng

Overview of this book

With the advancement of computer technology, the software market is exploding with tons of software choices for the user, making their expectations higher in terms of functionality and the look and feel of the application. Therefore, improving the visual quality of your application is vital in order to overcome the market competition and stand out from the crowd. This book will teach you how to develop functional and appealing software using Qt5 through multiple projects that are interesting and fun. This book covers a variety of topics such as look-and-feel customization, GUI animation, graphics rendering, implementing Google Maps, and more. You will learn tons of useful information, and enjoy the process of working on the creative projects provided in this book
Table of Contents (16 chapters)
Qt5 C++ GUI Programming Cookbook
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Sprite animation


In this example, we will learn how to create sprite animation in QML.

How to do it…

  1. First of all, we'll need to add our sprite sheet to Qt's resource system so that it can be used in the program. Open up qml.qrc and click the Add | Add Files buttons. Select your sprite sheet image and save the resource file by pressing Ctrl + S.

  2. After that, create a new empty window in main.qml:

    import QtQuick 2.3
    import QtQuick.Window 2.2
    
    Window {
      visible: true
      width: 420
      height: 380
      Rectangle {
        anchors.fill: parent
        color: "white"
      }
    }
  3. Once you're done with that, we will start creating an AnimatedSprite object in QML:

    import QtQuick 2.3
    import QtQuick.Window 2.2
    
    Window {
      visible: true;
      width: 420;
      height: 380;
      Rectangle {
        anchors.fill: parent;
        color: "white";
      }
    
      AnimatedSprite {
        id: sprite;
        width: 128;
        height: 128;
        anchors.centerIn: parent;
        source: "qrc:///horse_1.png";
        frameCount: 11;
        frameWidth: 128;
        frameHeight: 128;
     ...