Forums

OverviewV-Play 2 Support (Qt 5) › How to set the scale for sprites in sequence

Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #9624

    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?

    #9626

    Günther
    V-Play 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 V-Play components with all the available properties and methods, please see here: Functional List of V-Play Components.

     

    Best,
    GT

    • This reply was modified 3 years ago by  GT.
    #9628

    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 VPlay 2.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
                  }
                }
            }
        }
    }

     

    #9640

    Günther
    V-Play 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 VPlay 2.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

     

     

     

    #9641

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

     

Viewing 5 posts - 1 through 5 (of 5 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support