Shader Effect meets Marquee [SOLVED]



  • Hi,

    I'm trying to combine shader and marquee effect and having trouble with it.

    I started off with a simple project:

    @
    Rectangle {
    id: master
    width: 800
    height: 480

    Image {
     id: bgpic
     source: "images/bg.jpg"
    }
                        Rectangle {
                            anchors.centerIn: parent
                            width: 300
                            height: 30
                            color: "transparent"
                            clip: true
    
                            Text {
                                id: label
                                color: "white"
                                font.pointSize: 24;
                                text: "hello world1 hello world2 hello world3 hello world4 hello world5 hello world6"
                                x: parent.width
    
                                PropertyAnimation on x { running: true; from: label.x ; to: -label.width; duration: 50000; loops: Animation.Infinite }
                            }
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    Qt.quit();
                                }
                            }
                        }
    

    }
    @

    This example runs a simple marquee effect: the text rotates inside the shorter rectangle box, using transparency.

    Then I tried to use shaders in order to stretch the text box from nil to full height - and that works

    But when I try to combine both elements - the shader dropdown effect and the marquee rotating effect - it won't work.

    I found out that the marquee effect is obtained mainly through the clip:true property in the rectangle outside the text element, I have tried applying that to my ShaderEffect, or ShaderEffectSource or even just leave the Text/Rectangle element dealing with it, but the shader resulting from those won't add the dropdown stretch effect to the supposedly already running marquee effect.

    Do any of you know if what I'm trying is possible with Qt5 and if so, how could I do it? I will try to supply more visual elements to better relay my objective, in case this is just too confusing.

    Thanks in advance!



  • Ok I managed to solve the issue:

    • define the Item element with the Text element inside
    • define the ShaderEffectSource pointing to the Item and set hideSource to true so that the actual Item doesn't show
    • define the ShaderEffect which uses the ShaderEffectSource (and with it the Text element)
    • in the ShaderEffect, set a scrolling animation for the Item/Text element to slide horizontally
      and set the traditional animation for the shader (wobbly edges for the letters)
    • encapsulate the ShaderEffect in a rectangle with clip:true, shorter width and transparent color

    Result:

    the encapsulated rectangle shows sliding text inside, which is being animated with shaders for the wobbly effect.

    I managed to get there by using one of the examples:

    /Qt5/Qt5.0.0/5.0.0/Src/qtdeclarative/examples/quick/shadereffects

    The example shows a grid 3x2 with shader examples and the 1x1 element drags with the mouse to rotate between the Text "Qt" or the images of the Qt Logo and a Smiley Face - the mouse drag and box clipping were the elements to get me there!

    @

    import QtQuick 2.0
    import "content"

    Rectangle {
    id: root
    width: 1280
    height: 600

    Image {
    
     anchors.fill: parent
     source: "content/bg.jpg"
    }
    
    
    
    //! [source]
    ShaderEffectSource {
        id: theSource
        sourceItem: theItem
    

    hideSource: true
    }
    //! [source]

        Item {
            id: theItem
            width: 3000
            height: 160
                    Text {
                        width: 3000
                        height: 140
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        font.pixelSize: 120
                        font.family: "Times"
                        color: "blue"
                        text: "1234567890 abcdefghijklmnopqrstuvwxyz ABCDEF"
                    }
        }
    

    Rectangle {
    id: marquee
    clip:true
    width: 400
    height: 140
    anchors.centerIn: parent
    color: "transparent"

    ShaderEffect {
    id: teste
    width: 3000
    height: 160
    property variant source: theSource
    property real amplitude: 0.04 * wobbleSlider.value
    property real frequency: 20
    property real time: 0
    NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 600 }
    PropertyAnimation on x {running: true; loops: Animation.Infinite; from: marquee.width; to: -teste.width; duration: 100000; }
    //! [fragment]
    fragmentShader:
    "uniform lowp float qt_Opacity;" +
    "uniform highp float amplitude;" +
    "uniform highp float frequency;" +
    "uniform highp float time;" +
    "uniform sampler2D source;" +
    "varying highp vec2 qt_TexCoord0;" +
    "void main() {" +
    " highp vec2 p = sin(time + frequency * qt_TexCoord0);" +
    " gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * qt_Opacity;" +
    "}"
    //! [fragment]
    Slider {
    id: wobbleSlider
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: 40
    }
    }

     }
    

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.