Forums

OverviewV-Play 1 Supportabout sprites & text over the top (button art & button text on top) › Reply To: about sprites & text over the top (button art & button text on top)

OverviewV-Play 1 Supportabout sprites & text over the top (button art & button text on top) › Reply To: about sprites & text over the top (button art & button text on top)
#6340

Michael

Thanks Chris. I’m attempting this now. A problem I have now is I use Column to lay out my SimpleButtons, but when I convert these to images (using SingleSpriteFromFile or MultiresolutionImage) the auto spacing affored by columns is not working. I’m using 1.5.0.

Here’s my code:

main.qml

import VPlay 1.0
import QtQuick 1.1

GameWindow {
  activeScene: scene
  width: 960
  height: 640

  Scene {
    id: scene
    width: 480
    height: 320

    Rectangle {
        width: parent.width
        height: parent.height
        color: "grey"
    }

    SpriteBatchContainer {}

    Column {
        anchors.centerIn: parent
        spacing: 20

        Button2 {
          text: "(btn1) click me!"
          onClicked: console.debug("btn1 was clicked")
        }

        Button2 {
          text: "(btn2) click me!"
          onClicked: console.debug("btn2 was clicked")
        }

    }

  }
}

Button2.qml

import QtQuick 1.1
import VPlay 1.0

Item {
  id: button

  property alias text: buttonText.text
  property alias textColor: buttonText.color
  property alias textSize: buttonText.font.pixelSize

  signal clicked

  SingleSpriteFromFile {
    //  transformOrigin: Item.TopLeft  // doesn't seem to do anything to fix my issue
    id: btnImg
    source: ma.pressed ? "btnGeneral-down.png" : "btnGeneral-up.png"
    filename: "img/wm.json"
  }

//  MultiResolutionImage {
//    id: btnImg
//    source: "img/btnGeneral-up.png"
//    anchors.centerIn: parent
//  }

  Text {
    id: buttonText
    anchors.centerIn: btnImg
    font.pixelSize: 14
    color: "white"
  }

  MouseArea {
    id: ma
    anchors.fill: btnImg
    onClicked: button.clicked()
  }

}

When I run the above, I get the both buttons (and their text) over the top of each other in the center of the scene.

If I replace the Column style to regular x: y: positionings, it works as expected. I’d really like to use Column as I’ve used it through for auto-laying out. Is there a solution?

Thanks,

Michael.

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