[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 Felgo 3.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 9 years, 5 months ago by  alb.
• This topic was modified 9 years, 5 months ago by  alb.

[ChristianFelgo 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

[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

[ChristianFelgo 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

[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

[ChristianFelgo Team]

That’s great to hear!

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

Cheers, Chris

[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 Felgo 3.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