[Sam]

I’m loading a large image into the Sprite Sequence and I need to set the scaling in my code to have it smaller in the output. Is there any idea?

[GüntherFelgo Team]

Hi smx42,

you can either modify the width or height property of the Sprite Sequence accordingly, or just use the scale property to make it smaller.
For an overview of the Felgo components with all the available properties and methods, please see here: Functional List of Felgo Components.

 

Best,
GT

• This reply was modified 8 years, 9 months ago by  GT.

[Sam]

Thanks for response. Depends on your answer and the result I got from, it seems your documentation is out of date, because there isn’t any refer to the scale property. Now I found two other problems, first, the animation is flicking on the screen and second, the wrong position they get. But when I use a simple image, there is no problem with that. Here is my code:

 

import Felgo 3.0
import QtQuick 2.0

GameWindow {
    id: gameWindow
    activeScene: mainScene
    width: 960
    height: 640

    Scene {
        id: mainScene
        width: 480
        height: 320

        Rectangle {
            id: rectangle
            anchors.fill: parent
            color: "black"

            Flow {
              anchors.fill: parent
              anchors.margins: 1
              spacing: 4

              Repeater {
                id: treesRepeater
                model: 0
                delegate: SpriteSequenceVPlay {
                    scale: 0.1

                    SpriteVPlay {
                        source: "../assets/img/Tree.png"
                        frameCount: 4
                        frameWidth: 1024
                        frameHeight: 512
                        frameRate: 4
                    }
                }
              }
            }

            ButtonVPlay {
              text: "Add 50 Trees"
              width: 100
              anchors.bottom: parent.bottom
              anchors.horizontalCenter: parent.horizontalCenter
              anchors.margins: 10
              onClicked: {
                treesRepeater.model += 50
              }
            }
        }
    }
}

 

[GüntherFelgo Team]

Hi, I tried your example and fixed it this way:
– The Flow component is responsible for the positioning of the elements in your code, so it is required that the actual width and height can be accessed. It seems the scale-property tampers with the calculations and the elements then get wrong positions.

A specific width and height for the delegate (Sprite Sequence) should fix that problem:

import Felgo 3.0
import QtQuick 2.0     

 Flow {
        anchors.fill: parent
        anchors.margins: 1
        spacing: 4

        Repeater {
          id: treesRepeater
          model: 0
          delegate: SpriteSequenceVPlay {
            width: 1024 * 0.1
            height: 512 * 0.1

            SpriteVPlay {
              source: "../assets/img/Tree.png"
              frameCount: 4
              frameWidth: 1024
              frameHeight: 512
              frameRate: 4
            }
          }
        }
      }

 

As for the image: If the Sprite image is set up correctly, the animation should work fine. In your case, the image “Tree.png” should be 4096 x 512 px.
All the frames of the animation should have the same width and should be aligned next to each other within the image. If you use four frames, they should each use 1/4 of the total width = 1024 px.

 

Hope this helps you!

Best,
GT

 

 

 

[Sam]

Thank you. Actually I have 4 images of 4 sides of a tree and each one is 256×512 pixels, I just put them all horizontally in one sprite sheet image, so the result is 1024×512 pixels. So depends on your suggestion, the code would be:

 

SpriteSequenceVPlay {
    // scale: 0.1
    width: 256 * 0.1
    height: 512 * 0.1
    
    SpriteVPlay {
        source: "../assets/img/Tree.png"
        frameCount: 4
        frameWidth: 256
        frameHeight: 512
        frameRate: 4
    }
}