• Home

TexturePackerSprite

The TexturePackerSprite element defines a series of sprite frames within an image for a TexturePackerSpriteSequence. It has an increased performance thanks to its support for sprite sheets created with TexturePacker. More...

• List of all members, including inherited members

Properties

• name : string
• to : var

Detailed Description

The TexturePackerSprite component is needed for the TexturePackerSpriteSequence like the Sprite is needed for the SpriteSequence. It supports sprite sheet created with TexturePacker. It also has an improved performance compared to the Sprite component.

Read the guide How to use TexturePacker with Felgo to know why sprite sheets reduce the memory consumption and improve the performance of your game.

This component is derived from {TexturePackerAnimatedSprite}. It adds two new properties, name and to. Additionally it changes some default values.

The name property can be seen as the identifier of a state in a stochastic state machine and the to property describes this state's transitions to other states.

Both visible and running are also false by default because the TexturePackerSpriteSequence handles them. The same applies to loops, which is set to TexturePackerSprite.Infinite by default.

Here is an example of how to use two TexturePackerSprite in a TexturePackerSpriteSequence:

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {
     Scene {
         TexturePackerSpriteSequence {

             TexturePackerSprite {
                 name: "jump"
                 source: "../assets/img/squaby.json"
                 frameNames: ["squ1-jump-1.png", "squ1-jump-2.png", "squ1-jump-3.png", "squ1-jump-4.png"]
                 frameRate: 3

                 to: {"jump": 1, "walk": 3}
             }
             TexturePackerSprite {
                 name: "walk"
                 source: "../assets/img/squaby.json"
                 frameNames: ["squ1-walk-1.png", "squ1-walk-2.png", "squ1-walk-3.png", "squ1-walk-4.png"]
                 frameRate: 3

                 to: {"jump": 1, "walk": 1}
             }
         }
     }
 }

To change the active animation manually, use the jumpTo() function like in this example:

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {
   Scene {
     TexturePackerSpriteSequence {
       id: squabySprite
       anchors.centerIn: parent

       TexturePackerSprite {
         name: "walk"
         source: "../assets/img/squaby.json"
         frameNames: ["squ1-walk-1.png", "squ1-walk-2.png", "squ1-walk-3.png", "squ1-walk-4.png"]
         frameRate: 3
       }
       TexturePackerSprite {
         name: "jump"
         source: "../assets/img/squaby.json"
         frameNames: ["squ1-jump-1.png", "squ1-jump-2.png", "squ1-jump-3.png", "squ1-jump-4.png"]
         to: {"jump": 1, "walk": 3}
         frameRate: 3
       }
     }// SpriteSequenceFromFile

     Row {
       anchors.bottom: parent.bottom // put on the bottom
       GameButton {
         text: "Jump"
         onClicked: {
           squabySprite.jumpTo("jump")
         }
       }// GameButton
       GameButton {
         text: "Walk"
         onClicked: {
           squabySprite.jumpTo("walk")
         }
       }// GameButton
     }// Row
   }
 }

This component supports content scaling to pick the best image quality for your screen density.

Property Documentation

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {
     Scene {
         TexturePackerSpriteSequence {

             TexturePackerSprite {
                 name: "jump"
                 source: "../assets/img/squaby.json"
                 frameNames: ["squ1-jump-1.png", "squ1-jump-2.png", "squ1-jump-3.png", "squ1-jump-4.png"]
                 frameRate: 3

                 to: {"jump": 1, "walk": 3}
             }
             TexturePackerSprite {
                 name: "walk"
                 source: "../assets/img/squaby.json"
                 frameNames: ["squ1-walk-1.png", "squ1-walk-2.png", "squ1-walk-3.png", "squ1-walk-4.png"]
                 frameRate: 3

                 to: {"jump": 1, "walk": 1}
             }
         }
     }
 }