[John]

Hi im new to coding and I was wondering if anyone could help me add a pause button to flappy bird and when you recive an incoming phone call for the game to auto pause. thanks alot

[David]

Welcome in our forums armotechsolutions,

the easiest way to add a pause function would be to add a pause state to the States in the GameScene.qml which stops the game and brings up the waitToPlay screen (It might be better to use a different screen than waitToPlay, but you have to create a new one for this).

    State {
      name: "pause"
      PropertyChanges {target: waitToPlay; opacity: 1}
      PropertyChanges {target: physicsWorld; gravity: Qt.point(0,0)}

      StateChangeScript {
        script: {
          stopGame()
        }
      }
    }

 

You need to stop the player from it’s movement so you have to add according functions stop and resume to the Player.qml which stop the movement and store the velocity to use it when the player should resume to action.

  property variant linearVelocityBeforeStop: Qt.point(0,0)

  function stop() {
    linearVelocityBeforeStop = collider.body.linearVelocity
    collider.body.linearVelocity = Qt.point(0,0)
    spriteSequence.running = false
  }

  function resume() {
    collider.body.linearVelocity = linearVelocityBeforeStop
    spriteSequence.running = true
  }

 

You need to modify the startGame and stopGame functions in GameScene.qml and add the new player functions to stop and resume the player.

  function startGame() {
    level.start()
    player.resume()
  }

  function stopGame() {
    level.stop()
    player.stop()
  }

 

The pipes won’t work correctly so you have to change some parts in Pipes.qml. The stopped property was introduced there and the code should look like this in the end.

property bool stopped: false

  function reset() {
    var animationIsRunning = animation.running
    if(animationIsRunning)
      stop()

    pipeElement.x = scene.gameWindowAnchorItem.width+pipeElement.width/2
    pipeElement.y = utils.generateRandomValueBetween(-variationDistance, variationDistance)-scene.height/3
    stopped = false

    if(animationIsRunning)
      animation.start()
  }

  function start() {
    if(stopped) {
      animation.start()
    } else {
      delayTimer.restart()
    }
  }

  function stop() {
    animation.stop()
    delayTimer.stop()
    stopped = true
  }

 

Afterwards you need a function which can toggle the states which can also be added the the GameScene.qml.

  function togglePauseState() {
    if(scene.state === "pause") {
      scene.state = "play"
    } else {
      scene.state = "pause"
    }
  }

 

Now you have to toggle the scene state by adding following lines to your FlappyBirdMain.qml.

  onApplicationResumed: {
    gameScene.togglePauseState()
  }
  onApplicationPaused: {
    gameScene.togglePauseState()
  }

 

That’s it, you need to improve the one or other animation and add other guides for a smooth experience but I assume you can do this by your own.

Cheers,

David

[John]

sweet thanks a lot…Also where can I add the pause/resume button to the screen? thanks again…coding is very complicated I have been at this for a week

[David]

Hi armotechsolutions,

you can use following code to display a toggle button during the game. Add it to your GameScene.qml.

 

  ImageButton {
    onClicked: {
      togglePauseState()
    }
    source: "scores.png"
  }

Of course you need to replace the scores.png with a image of your choice.

Cheers,

David

[John]

Hey David, thanks for the code…I tried to add it but im getting errors…I guess im not adding them in the correct lines. are you able to tell me under what area they go in the code. thanks

[David]

Hi armotechsolutions,

you can add it in GameScene.qml in the same level as the Waitscreen or all other function described above!

Cheers,

David