[Andrew]

Whenever I try using a ParallaxScrollingBackground item, the background ends up being offset. Here is my code for a static background.

GameWindow {
    width: 480
    height: 320

    Scene {
        width: 480
        height: 320

        MultiResolutionImage{
            source: "img/startBackground-sd.png"
            anchors.centerIn: parent
        }
    }
}

Which outputs https://i.imgur.com/K0nxgMO.png which is correct.

 

Now when I change code to

GameWindow {
    width: 480
    height: 320

    Scene {
        width: 480
        height: 320

        ParallaxScrollingBackground{
            sourceImage: "img/startBackground-sd.png"
            anchors.centerIn: parent
            mirrorSecondImage: false
            movementVelocity: Qt.point(-75, 0)
        }
    }
}

It outputs https://i.imgur.com/sAoeAmT.png

 

Removing the

anchors.centerIn: parent

yields https://i.imgur.com/2wzGnz7.png which is offset by a bit for some reason. The blue area is the safe zone and the green is the 16:9 and 4:3 zone.

 

It seems like it should be a simple fix but I just can’t get it to work correctly.

• This topic was modified 9 years, 7 months ago by  Nuggetslug.
• This topic was modified 9 years, 7 months ago by  Nuggetslug.

[ChristianFelgo Team]

Hi,

the ParallaxScrollingBackground has no width & height set, which is why centering does not work.

What it does internally, is putting 2 MultiResolutionImage components next to each other, which are inside a ParallaxItem. (Hint: you can have a look at the source code by right-clicking on the item and then select “Follow Symbol Under Cursor”.)

 

Did you change the resoultuion in your last screenshot at runtime, or is this the result that is shown when you start your application with the GameWindow size 480×320?

Cheers, Chris

[Andrew]

All the screenshots are the default 480×320. Also, when I use the ctrl + 7 preset resolution (1024, 768), there is a black strip on the top of the screen. That is the only preset resolution which has that black strip.

[David]

Hi Nuggetslug,

you use an image for the ParallaxScrollingBackground which is not 480*320 but 570*360 including a safe area based on on the documentation. The image is set to x,y of the scene and is bigger than the scene so you need to move the ParallaxScrollingBackground to the left (360-320)/2 and the top (570-480)/2 based on the size difference of your image to the scene.

ParallaxScrollingBackground{
      sourceImage: "img/startBackground-sd.png"
      x: -(570-480)/2
      y: -(360-320)/2
      mirrorSecondImage: false
      movementVelocity: Qt.point(-75, 0)
}

We will include an alias to the image used in the ParallaxScrollingBackground in the next Daily Build so it will be easier to obtain the image size, but for the moment you can use your numbers hardcoded.

 

Cheers, David

[Andrew]

Wow, thank you so much! This worked perfectly.

[Caeser]

Hi David, when will the next build be released? for multiresolutions this presents quite a problem 🙁

[ChristianFelgo Team]

Hi Caeser,

We will probably release it next week,  in the meantime you can use the fix mentioned by David.

Cheers, Chris