Forums

OverviewV-Play 2 Support (Qt 5) › MultiResolutionImage – am I using it wrong

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

    Alec

    Hello,

     

    I’m trying to use the Graphical Effects to show a blacked out image that can then transition to it’s normal colors. This works fine when I use an Image component but using a MultiResolutionImage component causes some fuzziness.

     

    A screenshot showing what I mean

     

    The one on the left is a MultiResolutionImage and looks awful. The one on the right is an Image and is nice and crisp.

     

    And the simple project code I used for this example:

     

    import VPlay 2.0
    import QtQuick 2.0
    import QtGraphicalEffects 1.0
    
    GameWindow {
        id: gameWindow
    
    
        activeScene: scene
    
        width: 960
        height: 640
    
        Scene {
            id: scene
    
            // the "logical size" - the scene content is auto-scaled to match the GameWindow size
            width: 480
            height: 320
    
            Rectangle {
                color: 'coral'
                anchors.fill: scene
            }
    
            Row{
                id: row
                anchors.centerIn: parent
                Item{
                    width: img1.width
                    height: img1.height
                    MultiResolutionImage{
                        id: img1
                        source: "../assets/vplay-logo.png"
                        visible: false
                        height: 100
                        width: 100
                    }
                    ColorOverlay{
                        anchors.fill: img1
                        source: img1
                        color: "black"
                        opacity: 0.5
                    }
                }
    
                Item{
                    width: img2.width
                    height: img2.height
                    Image{
                        id: img2
                        source: "../assets/vplay-logo.png"
                        visible: false
                        height: 100
                        width: 100
                    }
                    ColorOverlay{
                        anchors.fill: img2
                        source: img2
                        color: "black"
                        opacity: 0.5
                    }
                }
            }
    
        }
    }
    
    

     

    I am doing something wrong. I’ve used MultiResolutionImage before and they work great without adding QtGraphicalEffects. Perhaps there’s a difference in the way the two image types are rendered?

     

    Using the Blend graphical effect gives the same result. I just used ColorOverlay here to slightly reduce the code in the example.

     

    Any help would be fantastic.

     

    alb

     

    • This topic was modified 3 years, 8 months ago.
    • This topic was modified 3 years, 8 months ago.
    #8432

    Christian
    V-Play Team

    Hi alb,

    great question!

    You did nothing wrong, it is just how the MultiResolutionImage works internally..

    First, you would need to provide different versions of your image for MultiResolutionImage to make sense. That is, a low-res version img.png, then a hd version stored in +hd/img.png and a hd2 version +hd2/img.png.

    Second, you would need to revert the scaling that is applied internally in MultiResolutionImage. You can take this code as a reference which we are using to make a round circular overlay around an Image in the GameNetwork user view:

    // scaling is required otherwise the image would be blurred due to content scaling
    Item {
        scale: internalContentScaleFactorForImages
        transformOrigin: Item.TopLeft
        // we need to set a height so verticalCenter anchor works
        height: avatar.height * internalContentScaleFactorForImages
        anchors.verticalCenter: parent.verticalCenter
    
      Image {
        id: avatar
        width: roundedImage.width / internalContentScaleFactorForImages
        height: roundedImage.height / internalContentScaleFactorForImages
        smooth: true
        visible: false
      }
    
      Rectangle {
        id: maskObject
        // the black part is the inner circle
        color: "black"
        anchors.fill: avatar
        // if the logical size is used here, it looks blurry; 
        // thus first scale it twice the size of the contentScale and then scale it back again! 
        radius: avatar.width * 0.5
        visible: false
        smooth: true
    
      }
    
      OpacityMask {
        anchors.fill: avatar
        source: avatar
        maskSource: maskObject
      }
    
    }// end of scaled Item

     

    Cheers, Chris

    #8433

    Alec

    Thanks for that Chris.

     

    On first glance that looks simple enough. But where does the value for internalContentScaleFactorForImages come from? Is that related to the locigal size of the component and actual size of the source?

     

    alb

    #8434

    Christian
    V-Play Team

    The internalContentScaleFactorForImages is a context property that is available in all QML files from the VPlay import, and is set to the chosen scaling factor for images, which depends on the screen resolution.

    Cheers, Chris

    #8435

    Alec

    Excellent, thanks for your help. That small snippet I posted earlier is working perfectly now with the added scaling.

     

    Now to go and add it to my project.

     

    alb

    #8436

    Christian
    V-Play Team

    That’s great to hear!

    Can you post it here, maybe other developers find it useful too..

    Cheers, Chris

    #8437

    Alec

    Yep, posted it below.

    It might be worth noting, I’ve done the scaling on the MultiResolutionImage itself rather than the item that contains it. This means the item still slots nicely into the row. The item is set to the logical size required rather than the height/width of the MultiResolutionImage.

     

    import VPlay 2.0
    import QtQuick 2.0
    import QtGraphicalEffects 1.0
    
    GameWindow {
        id: gameWindow
    
        licenseKey: "A5C3874F0D2A214F501F3FE369F5C770C8B1332B5C1C445416B9AF7BBE0F4B223F84B79114791BE7A02A9AEF47A736E8D63E2178F431FFFBCC0BE5B52C8305B50FA4BE8CBF58EE5E7A9C498E14874907D63944720D146A60FC21544D70096FC9D645D60074FA329127868822DB9C4C5843CE71C7A423C873DC9916B2F9F2E2673ABBC16FE9843E53C31E2C9FF7BFC859D9E3E7482C0F9D949368210A3C00A87E58650D99A2D6098DD075CC297988E2ECD4147BC14C3314D8AD0B59AD3AF98D825AD03F42BE25193153B8216457E05E87B4019DA5DE2737DEC69BEF55E7DDB8E496697AA9720156F7EC01C7648AF81E946C78402DF7BCE3B04628B22AAB517F4B725D97ABE3FBCEED9980216DC70B32B8E01B4E5202ED82136C80629EC6A2E968A55BD2E2CE21D24EF3AA2864E51088ED"
    
        activeScene: scene
    
        width: 960
        height: 640
    
        Scene {
            id: scene
    
            // the "logical size" - the scene content is auto-scaled to match the GameWindow size
            width: 480
            height: 320
    
            Rectangle {
                color: 'coral'
                anchors.fill: scene
            }
    
            Row{
                id: row
                anchors.centerIn: parent
                
                Item{
                    id: item
                    height: 100
                    width: 100
    
                    MultiResolutionImage{
                        id: img1
                        source: "../assets/vplay-logo.png"
                        visible: false
                        transformOrigin: Item.TopLeft
                        height: 100 / internalContentScaleFactorForImages
                        width: 100 / internalContentScaleFactorForImages
                        scale: internalContentScaleFactorForImages
                        anchors.centerIn: parent
                    }
                    ColorOverlay{
                        anchors.fill: item
                        source: img1
                        color: "black"
                        opacity: 0.5
                    }
                }
                
    
                Item{
                    transformOrigin: Item.TopLeft
                    width: img2.width
                    height: img2.height
                    Image{
                        id: img2
                        source: "../assets/vplay-logo.png"
                        visible: false
                        height: 100
                        width: 100
                    }
                    ColorOverlay{
                        anchors.fill: img2
                        source: img2
                        color: "black"
                        opacity: 0.5
                    }
                }
            }
    
        }
    }
    
    

     

    Thanks again for your help Chris.

     

    alb

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