Forums

OverviewV-Play 1 Support › about sprites & text over the top (button art & button text on top)

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #6333

    Michael

    Hi

    I’m using SingleSpriteFromFile. It seems I can’t write a Text string over the top of a drawn sprite. Is that right? I have a sprite as a generic button & I was hoping to write the button text over the top of it.

    If I make Text a child of SingleSpriteFromFile & center the Text, I can’t anything. If I bring out Text and associate the centering with the explicit id of the SingleSpriteFromFile, I can see a flash of text (before it apparently is overwritten by the sprite).

    Is there any good idea for how I can solve my issue, apart from making buttons for each situation, which I hope to avoid?

    Cheers, Michael.

    #6339

    Christian
    V-Play Team

    Hi Michael,

    again you have a very good question here.. šŸ˜‰

    For your game, I can see that making a button for all kinds of words is not an option, thus you should definetely use the Text element as you suggested.

    To make a Text element work together with a Sprite from a sprite sheet, you need to define manually where your SpriteBatchContainer is put in the Scene. By default, all sprites in a sprite sheet are drawn on top of all the other elements. If you want to change that order, just set the z value of a explicitly added SpriteBatchContainer in your Scene to -1 and all the sprites will be drawn behind your normal elements.

    Alternatively, you can also use MultiResolutionImages, because z-ordering with these components work as for all other items. Usually, if you do not have animated sprites in your game, working with MultiResolutionImages is still fine performance-wise.

    Cheers, Chris

    #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.

    #6342

    Michael

    HiI think I see my issue – I need to specify a width & height for the item container. I’ll see how I go.

    Cheers, Michael

     

    #6343

    Michael

    I have this as a general working solution (thanks to Alex for a past code tip for the button!), but I still have a minor issue:

    import QtQuick 1.1
    import VPlay 1.0
    
    Item {
      id: button
    
      width: btnImg.width
      height: btnImg.height
    
      property alias text: buttonText.text
      property alias textColor: buttonText.color
      property alias textSize: buttonText.font.pixelSize
    
      signal clicked
    
      SingleSpriteFromFile {
        id: btnImg
        source: ma.pressed ? "btnGeneral-down.png" : "btnGeneral-up.png"
        filename: "img/wm.json"
        anchors.centerIn: parent
      }
    
      Text {
        id: buttonText
        anchors.centerIn: btnImg
        font.pixelSize: 14
        color: "white"
      }
    
      MouseArea {
        id: ma
        anchors.fill: btnImg
        onClicked: button.clicked()
      }
    
    }

    Inserting SpriteBatchContainer before the sprite buttons solves my problem for a simple layout (with just sprite and one rectangle serving as background colour), but I have another scene with many rectangles for visual layout purposes (3 rectangles within a column and each of these rectangles are serving as a container for a button & sprite image & text). When I use SpriteBatchContainer in this case, I can only seem to get the button text and the button sprite is lost (probably behind a rectangle). I guess I’m not understanding the SpriteBatchContainer use, or I need to rearrange the z-order of the rectangles, but then I’ll probably lose the convenience of the auto columnar layout with my current coding). I think I’ll give up & use theĀ MultiResolutionImage solution, as it sorts out the z-order issue nicely & automatically. I think it would be nice if you can add this ‘auto-z’ function to SingleSpriteFromFile, if possible as it’s much nicer to have the spritesheet.

    Cheers, Michael.

    #6354

    Christian
    V-Play Team

    Hi Michael,

    auto-sorting of sprites is a very complex issue, because you are limited by the maximum texture size of different devices, and it is not possible programmatically to define what should be drawn within one spritesheet. Also, this means that sprite-ordering is only possible within one scene. If you need sprite ordering in multiple scenes, the only way to go is using MultiResolutionImage currently. Sprites are most useful for your game scene if it consists of many animated sprites – so for displaying simple buttons using MRI is the best solution.

    Cheers, Chris

    #6357

    Michael

    Thanks Chris. I was initially focussing on sprites as images to avoid the earlier reported issue with MRI.

    Cheers, Michael.

Viewing 7 posts - 1 through 7 (of 7 total)

RSS feed for this thread

You must be logged in to reply to this topic.

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