[Kevin]

Hi, so I have my code something like this (modification of existing tutorial project “multiple scenes and multiple levels”)

I am basically try to change the backbutton from a text based button to a transparent png icon instead.

But for some reason the PNG icon transparency is not working and its showing up as an arrow with a square box around it.

Is there something i need to do to allow “transparency” on an Image?

MenuButton.qml

Rectangle {
    id: button


    width: bg.width
    height: bg.height

    property alias bg: bg.source

    Image {
        id: bg
    }

.....

 

SelectLevelScene.qml

import Felgo 3.0
import QtQuick 2.0
import "../common"

SceneBase {
  id:selectLevelScene

  //.....

  MenuButton {

    bg: "../../assets/back.png"
    anchors.right: selectLevelScene.gameWindowAnchorItem.right
    anchors.rightMargin: 10
    anchors.top: selectLevelScene.gameWindowAnchorItem.top
    anchors.topMargin: 10
    onClicked: backButtonPressed()
  }
}

 

[Lorenz]

Hi Kevin,

the transparency should work out of the box.

The problem is that the rectangle which is enclosing your image has a color by the default. The fix is to add

Rectangle {
  color: "transparent"
  ...
}

to your rectangle 🙂

Please let me know if that helps.

Cheers,

Lorenz from Felgo