AchievementOverlay.qml Example File

 import QtQuick 2.0
 import Felgo 3.0
 import "scripts/AchievementQueue.js" as AchievementQueue

 Item {
   id: achievementOverlay

   // make opacity changes smooth
   Behavior on opacity {
     NumberAnimation { duration: 150}

   // the achievement that is currently displayed gets stored here
   property variant achievement

   // this is called if a new achievement should be shown
   function showAchievement(ach) {
     // push the new achievement to the queue
     // if no achievement is currently shown, display it
     if(!hideAfterDelay.running) display()

   // this is called to actually display the first achievement in the queue
   function display() {
     // take the achievement from the queue and
     achievement = AchievementQueue.take()
     opacity = 1

   // this either hides the overlay if no more achievements are in the queue, or displays the next one
   function hide() {
     if(AchievementQueue.size() > 0) display()
     else opacity = 0

   // the achievement is shown until the player presses it or this timer runs out
   Timer {
     id: hideAfterDelay
     interval: 10000
     onTriggered: achievementOverlay.hide()

   // this is the visual representation of the achievement
   Item {
     // it needs fill the whole screen horizontally, therefore make as big as the gameWindow so it works on every display ratio
     width: parent.width
     height: parent.height
     anchors.left: parent.left

     // if the player presses the overlay, hide it
     MouseArea {
       anchors.fill: parent
       onClicked: achievementOverlay.hide()

     // the background of the overlay
     Rectangle {
       color: "black"
       anchors.fill: parent
       opacity: 0.8

     Text {
       text: "Congratulations, You just unlocked the achievement:"
       color: "white"
       font.pixelSize: 18
       anchors.horizontalCenter: parent.horizontalCenter
       y: 8

     Text {
       text:  achievement ? : "sdfsd"
       color: "white"
       font.pixelSize: 24
       anchors.horizontalCenter: parent.horizontalCenter
       y: 28

     Text {
       text: achievement ? achievement.description : "sdfsdgsdggdgsfdfdsfsdf"
       color: "white"
       font.pixelSize: 16
       anchors.horizontalCenter: parent.horizontalCenter
       y: 54

     // display a dummy close sign, just to give the player a hint that he can close the achievement by pressing
     Text {
       text: "X"
       color: "#444444"
       font.pixelSize: 30
       anchors.right: parent.right
       anchors.rightMargin: 8

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
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support