Forums

OverviewV-Play 1 Support › Rectangle with round corners

Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #5113

    Christian
    V-Play Team

    Hi,

    in the current development of my game, I’d need to use rectangles with rounded corners. It appears this is not supported by the cocos renderer?

    Is there any known way to do this?

    I’m afraid I won’t be able to use simple sprites instead of the rectangles, because I have rectangles of many different sizes and programmatic determined colors.

    Cheers, Chrisu

    #5114

    Christian
    V-Play Team

    Hi Chrisu,

    challenging question as always 😉

    I have a question about your exact use-case: Is it really just rectangles with borders that you need, or would you also need sprites?

     

    What you are looking for, could probably be done by adding tinting (dynamic change of colors of sprites) and 9-slice sprites aka 9-patch sprites. You could implement the 9-patch technique by yourself by placing images with a Grid element and scaling the inner part appropriately. But for the sprite tinting we would need to add support for it to V-Play.

    If you rely on rectangles (which have a worse performance than batched sprites though, because they are not batched and each rectangle requires an own draw call) there is currently no way to get the rounded borders. We are working on an improved clipping item though, which also supports a texture and not only rectangular area. But you would still require a 9-patch texture then so the borders look sharp on each platform.

     

    I would rather go for a 9-patch sprite with tinting as described above (which we both need to add to the engine first), but if you could describe your use-case more another solution might be better!

    Cheers, Chris

    #5116

    Christian
    V-Play Team

    Hey,

    thanks for your answer. I think I could work with sprites and tinting, I won’t even need 9-patch because the radius of the rounded corner is proportional to the rectangle’s size.

    I want to do something like this for my Blitzkopf game:

    https://i.imgur.com/R4IA5yj.png and https://i.imgur.com/b2sA5Xd.png

    So different colors and sizes of a rectangle with rounded corners.

    How would one implement tinting with V-Play?

    #5117

    Christian
    V-Play Team

    Ok I see – how many colors are you planning to have approximately?

    Currently tinting is not supported, we need to add this to V-Play. In the meantime, you could use one image per colored rectangle and pack everything into a spritesheet.

    Cheers, Chris

    #5136

    Christian
    V-Play Team

    Hmm I see, so this would be the only solution at the moment.

    The problem is, I would like to determine the color of the rectangle at runtime, I have a start and an end color, and want to interpolate 2-4 colors in between, like you see in the screenshots, only the brightest and darkest color is determined at compile time.

    But in the meantime I will find a different solution, let me know when tinting is possible :)

    Cheers, Chrisu

    #5137

    Christian
    V-Play Team

    OK I found another way to solve this…I put an image of a rectangle with round corners over a rectangle element. The image only has the corners in black and everything else is transparent. The rectangle is of my determined color. Works perfectly :)

     

    EDIT: Should I be worried about performance when I have about 11×11 of those “constructions”? The images for the rectangle are in 256×256 for HD2, 128×128 for HD and 64×64 for SD.

    #5138

    Christian
    V-Play Team

    Wow that is a pretty cool solution! I.e. you got 121 elements of it – in that case maybe use a SingleSpriteFromFile as it is only 1 draw call for the sprites and not 121 of them. The rectangles are still 121 draw calls but you can’t change that, so this is the maximum you get out of it. Anyways, it would be best to test it on lower-end devices and first have a look how much performance is affected, because it might not be that bad..

    Cheers, Chris

    #5139

    Christian
    V-Play Team

    Is it supported to scale a SingleSpriteFromFile? Because the number of those rectangles is variable from 5×5 to 13×13 and so the size would differ all the time.

    If not I think I should create one rectangle image for every one of those sizes?

    #5140

    Christian
    V-Play Team

    Yes you can set the width and height explicitly and the image gets then scaled to this size, or adjust the scale factor of SingleSpriteFromFile elements.

    Cheers, Chris

    #5972

    Marios

    Chris,

    I would love to see a tutorial about buttons with rounded edges using sprites.

    It’s an all time classic topic.

    komarios

    #5974

    Alex
    V-Play Team

    Hi komarios,

    there are several ways to achieve this, highly depending on the use case.

    The easiest way i can think of is creating an image with round corners and then creating a button using the image as background.

    Button.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
    
      width: 100
      height: 60
    
      // you could also use a MultiresolutionImage here to improve performance and memory usage on low end devices
      Image {
        source: "img/round_corners.png"
        anchors.fill: parent
      }
    
      Text {
        id: buttonText
        anchors.centerIn: parent
        font.pixelSize: 14
        color: "#f5b68a"
      }
    
      MouseArea {
        anchors.fill: parent
        onClicked: button.clicked()
      }
    }

    Then you can use the button like this:
    main.qml

    import VPlay 1.0
    import QtQuick 1.1
    
    GameWindow {
      activeScene: scene
      width: 960
      height: 640
    
      Scene {
        id: scene
        width: 480
        height: 320
    
        Button {
          anchors.centerIn: parent
          text: "click me!"
          onClicked: console.debug("aw yeah, don't stop clicking me")
        }
      }
    }

     

    What kind of buttons were you thinking of? Like Chrisu, with “random” colors? A possible downside of his solution is that the edges are not transparent (if needed), but have the background color instead.

    Cheers,
    Alex

     

     

    #6262

    Michael

    As a newcomer I wondered the same thing about rounded corners – seems like radius is not supported. It’s minor, but the problem for QML newcomers like me is, I press F1 on Rectangle in Qt Creator, and get the QML help for Rectangles, and copy & paste the first example, which happens to be a rounded-rectangle, and run it, and find the rendered shows a regular rectangle. I think gradient is not working either. I guess I can understand the reason for the omission, but as a suggestion I think it’s ideal to show a web page with a table of QML components & put a tick next to supported elements/members and a cross next to those that are unsupported.

    #6272

    Christian
    V-Play Team

    Hi Michael,

    with the next major V-Play release all QML properties will be supported, so this makes our all lives a bit easier then. 😉

    For the current version, the solution provided by Alex above with using images is also the one with best performance and the one recommended.

    Cheers, Chris

    #6341

    Michael

    Hi

    I’m just wondering if tinting was ever introduced? If so, it would be useful.

    Cheers, Michael.

Viewing 14 posts - 1 through 14 (of 14 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