Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Platformer with Level Editor

 import QtQuick 2.0
 import QtQuick.Controls.Styles 1.0
 import Felgo 3.0

 GameButton {
   id: imageButton

   height: parent.height

   // properties of the ButtonStyle background Rectangle
   property int borderWidth: 1
   property color borderColor: "black"
   property int radius: 3
   property color color: "white"

   // aliases to enable access to these components from the outside
   property alias image: image
   property alias hoverRectangle: hoverRectangle

   // we override the default Felgo style with our own style
   style: ButtonStyle {
     background: Rectangle {
       border.width: imageButton.borderWidth
       border.color: imageButton.borderColor
       radius: imageButton.radius

       // add a gradient as background
       gradient: Gradient {
         // take color as the first color
         GradientStop { position: 0.0; color: imageButton.color }
         // tint color, to make it a little darker and use it as second color
         GradientStop { position: 1.0; color: Qt.tint(imageButton.color, "#24000000") }
       }
     }
   }

   onClicked: audioManager.playSound("click")

   // the image displayed
   MultiResolutionImage {
     id: image

     anchors.fill: parent
     anchors.margins: 1

     fillMode: Image.PreserveAspectFit
   }

   // this white rectangle covers the button when the mouse hovers above it
   Rectangle {
     id: hoverRectangle

     anchors.fill: parent

     radius: imageButton.radius
     color: "white"

     // when the mouse hovers over the button, this rectangle is slightly visible
Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded