[Torbjorn]

Hello!

 

I just installed your Flappy Bird version (https://github.com/Felgo/FlappyBird) and now I want to try to add a few parallax scrolling backgrounds.

 

I tried to implement this code:

 import Felgo 3.0
 import QtQuick 2.0

 GameWindow {

   Scene {

     ParallaxScrollingBackground {
       movementVelocity: Qt.point(100,0)
       ratio: Qt.point(0.5,1.0)
       sourceImage: "../assets/img/background-mountains.png"
     }

     ParallaxScrollingBackground {
       id: background1
       movementVelocity: Qt.point(-100,0)
       ratio: Qt.point(1.0,1.0)
       sourceImage: "../assets/img/background-hills.png"
     }

     ParallaxScrollingBackground {
       id: background2
       movementVelocity: Qt.point(10,0)
       ratio: Qt.point(1.3,1.0)
       sourceImage: "../assets/img/background-lawn.png"
     }

   } // end of Scene

 } // end of GameWindow

The way I tried to do this, was to create a new QML File (Quick 2) into the “Scene” folder, and then I pasted the code above. This is obviously wrong as nothing happened 🙂 I am pretty new and trying to learn. Can anyone help me?

 

Kind regards

 

 

 

[spike]

Well, your game basically consists of one GameWindow and multiple Scenes. You tell the GameWindow which scene to show by setting the activeScene property. But what’s important is to give each scene an id:

 

 Scene {
  id: myScene
  ...

 

In the code you provided it should be enough to assign the id “myScene” to the activeScene property of the GameWindow.

GameWindow {
  activeScene: myScene

  Scene {
    id: myScene
    ...

 

If you make the small changes to the code above it should work. If it does not work, make sure that code is the one you tell your qml engine in the main.cpp to load or omit the GameWindow and go into the file where you instantiate a GameWindow and add your scene definition there.

[Torbjorn]

Hello spike, thanks for your reply.

I kept trying different approaches and in the Project, there is already a qml called Background.qml. Inside this I find this:

import Felgo 3.0

import QtQuick 2.0

Item {

  width: bg.width

  height: bg.height

  MultiResolutionImage {

    id: bg

    source: "../../assets/img/bg.png"

 

Would it be easier/possible to change this into

 

Import QtQuick 2.0    
    
ParallaxScrollingBackground{
            sourceImage: "img/bg.png"
            anchors.centerIn: parent
            mirrorSecondImage: false
            movementVelocity: Qt.point(-75, 0)

?

 

• This reply was modified 8 years ago by  grimstad@ymail.com.
• This reply was modified 8 years ago by  grimstad@ymail.com.
• This reply was modified 8 years ago by  grimstad@ymail.com.

[Torbjorn]

I tried to implement according to your guidelines. Cant seems to get it right. I found GameWindow in the FlappyBirdMain.qml, but this one says activeScene: splash.

Should I delete everything in FlappyBirdMain.qml and copy the modified code you showed me?

 

• This reply was modified 8 years ago by  grimstad@ymail.com.

[Torbjorn]

Result turned out wrong. Parallax is not centered correctly and it scrolls in the foreground, not background.

Here is my result:

https://vid.me/6QIa

Here is my code:

import Felgo 3.0
import QtQuick 2.0
import "scenes"
import "common"

GameWindow {
  id: window
  width: 640
  height: 960

  // you get free licenseKeys as a Felgo customer or in your Felgo Trial
  // with a licenseKey, you get the best development experience:
  //  * No watermark shown
  //  * No license reminder every couple of minutes
  //  * No fading Felgo logo
  // you can generate one from http://felgo.com/license/trial, then enter it below:
  //licenseKey: "<generate one from http://felgo.com/license/trial>"

  property alias window: window
  activeScene: splash

  // show the splash and start the loading process as soon as the GameWindow is ready
  Component.onCompleted: {
    splash.opacity = 1
    mainItemDelay.start()
  }

  // since the splash has a fade in animation, we delay the loading of the game until the splash is fully displayed for sure
  Timer {
    id: mainItemDelay
    interval: 500
    onTriggered: {
      mainItemLoader.source = "MainItem.qml"
    }
  }

  // as soon as we set the source property, the loader will load the game
  Loader {
    id: mainItemLoader
    onLoaded: {
      if(item) {
        hideSplashDelay.start()
      }
    }
  }

  // give the game a little time to fully display before hiding the splash, just to be sure it looks smooth also on low-end devices
  Timer {
    id: hideSplashDelay
    interval: 200
    onTriggered: {
      splash.opacity = 0
    }
  }

  SplashScene {
    id: splash
  }

ParallaxScrollingBackground {
       id: bg
       movementVelocity: Qt.point(10,0)
       ratio: Qt.point(1.0,1.0)
       sourceImage: "../assets/img/bg.png"
     }
}

 

What am I doing wrong? :O

 

[GüntherFelgo Team]

Hi Torbjorn!

Welcome to Felgo 😉

With the FlappyBird demo a few things already happen that might need further explanation. So I strongly recommend to do some of our basic tutorials to get used to working with Felgo and QML.

 

Now let’s see what is going wrong with your implementation.

First of all, it is necessary to understand how the GameWindow and the Scenes work together:

• Scenes come with a mechanism called content scaling to be able to support different devices having different screen sizes or densities, see here.
• One Scene usually represents one screen/part of your game, e.g. IntroScene, MenuScene, SettingsScene, LevelSelectionScene, GameScene, …
• The GameWindow is then used to manage switching between different Scenes, see here.

So to replace the background, we can take a look at the GameScene. Within the GameScene, there is no background defined it just contains QML items like PhysicsWorld, Player or Level. If we take a closer look at the Level (in qml/game/Level.qml) we can see that it contains the Background item (qml/common/Background.qml).

So by replacing the background in Background.qml we can use a scrolling background instead:

import Felgo 3.0
import QtQuick 2.0

Item {
  width: bg.width
  height: bg.height

//  old background
//  MultiResolutionImage {
//    id: bg
//    source: "../../assets/img/bg.png"
//  }

  ParallaxScrollingBackground {
    id: bg
    movementVelocity: Qt.point(-10,0)
    ratio: Qt.point(1.0,1.0)
    sourceImage: "../../assets/img/bg.png"
  }

// ...

}

In you code example, you simply added the background to the GameWindow, which always shows the background above all other Scenes in the window.

Cheers,
Günther

 

[Torbjorn]

Hello Günter, and thank you for welcoming me!

 

I have been studying some tutorials and your reply and I made it work 🙂

My goal is to make the parallax images scroll while the game is playing, and stop and reset when player dies. I am missing something. This is what I did:

    ParallaxScrollingBackground {
      id: pxBg
      sourceImage: "../assets/img/PARA.png"
      mirrorSecondImage: false
      movementVelocity: Qt.point(-75, 0)
      running: false

I set the

running: false

 

And then activated the scroll this way

    State {
      name: "play"
      PropertyChanges {target: scene; gameIsRunning: true}
      PropertyChanges {target: pxBg; running: true}
      PropertyChanges {target: physicsWorld; gravity: Qt.point(0,gravityValue)}
      StateChangeScript {
        script: {
          startGame()
        }
      }

By setting the

pxBg; running: true

 

Parallax starts as player hits play and parallax stops when player dies – but.. Parallax doesn’t reset to the same position as when the game first started. It just starts scrolling from the position where the player dies.

Is there any:

PropertyChanges {target: x; x: x}

That I can use in the

State {
      name: "gameOver"

To reset the parallax when player starts a new game?

• This reply was modified 8 years ago by  grimstad@ymail.com.

[AlexFelgo Team]

Hi Torbjorn,

you can call the resetBackgrounds() method of the ParallaxScrollingBackground in the StateChangeScript: http://felgo.com/doc/vplay-parallaxscrollingbackground/#resetBackgrounds-method

Cheers,
Alex

• This reply was modified 8 years ago by  Alex.