Forums

OverviewV-Play Installation › Help adding Parallax to game

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #12874

    Torbjorn

    Hello!

     

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

     

    I tried to implement this code:

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

     

     

     

    #12875

    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.

    #12876

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

    ?

     

    #12880

    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?

     

    #12882

    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 VPlay 2.0
    import QtQuick 2.0
    import "scenes"
    import "common"
    
    GameWindow {
      id: window
      width: 640
      height: 960
    
      // you get free licenseKeys as a V-Play customer or in your V-Play Trial
      // with a licenseKey, you get the best development experience:
      //  * No watermark shown
      //  * No license reminder every couple of minutes
      //  * No fading V-Play logo
      // you can generate one from http://v-play.net/license/trial, then enter it below:
      //licenseKey: "<generate one from http://v-play.net/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

     

    #12892

    Günther
    V-Play Team

    Hi Torbjorn!

    Welcome to V-Play 😉

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

     

    #12893

    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?

    #12895

    Alex
    V-Play Team
Viewing 8 posts - 1 through 8 (of 8 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