How to make a game like Pong with Felgo - HUD

Tutorial Chapters

  1. Overview
  2. Creation of a Felgo game
  3. GameWindow, Scenes and Physical Worlds
  4. The Level and the Ball
  5. Level Boundaries
  6. Paddles
  7. HUD
  8. Menus
  9. AI
  10. Special Effects
  11. Music and Sound
  12. Further Perspectives

HUD

The HUD is usable to display all information which is necessary for the player during the game session. In VPong the scores of the players should be displayed at any time. After creating a HUD.qml in the qml directory, following code can be used to display two scores and a menu button in a row in the middle of the screen. The text binding for some hud elements prove, how important alias names are. They are used to get access to other elements in code.

 import QtQuick 2.0
 import Felgo 3.0

 // Using a row is suitable because all HUD elements are in one row
 Row {

   // Left Item for the score of the left player
   Item {
     width: 60
     height: hud.height
     Text {
       text: player1.score
       font.pixelSize: 14
       font.family: fontHUD.name
       color: "black"
       anchors.centerIn: parent
     }
   }

   // A simple menu button which will enables the in-game menu
   Item {
     width: 60
     height: hud.height
     Text {
       text: "M"
       font.pixelSize: 14
       font.family: fontHUD.name
       color: "white"
       anchors.centerIn: parent
     }
     MouseArea {
       anchors.fill: parent
       onClicked: {
       }
     }
   }

   // Right Item for the score of the left player
   Item {
     width: 60
     height: hud.height

     Text {
       text: player2.score
       font.pixelSize: 14
       font.family: fontHUD.name
       color: "black"
       anchors.centerIn: parent
     }
   }
 }

Now the HUD needs to be added in the FelgoScene.qml directly after the level instance.

 ...
   Level {
     id: level
     // The logical size needs to be set to provide it for all child objects
     width: parent.width
     height: parent.height
   }

   HUD {
     id: hud
     height: 60
     anchors.centerIn: parent
   }
 ...

The scores are counted and displayed correctly now.

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