Wiggly

Wiggly demuestra cómo utilizar un efecto de sombreado, creado con Qt Quick Effect Maker (QQEM), en su aplicación Qt Quick. Una sencilla interfaz de usuario Qt Quick permite cambiar el texto wiggly y el tamaño de la onda, así como aplicar el efecto de nube eléctrica.

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Conceptos básicos de la aplicación

La mayor parte del ejemplo está contenida y configurada en el archivo main.qml. En primer lugar, cree un elemento que se utilizará como fuente del efecto.

Rectangle {
    id: sourceItem
    anchors.centerIn: parent
    width: textItem.width + 60 * mainWindow.px
    height: textItem.height + 30 * mainWindow.px
    color: "#d0d0d0d0"
    border.color: "#d0ffffff"
    border.width: 4 * mainWindow.px
    radius: 20 * mainWindow.px
    layer.enabled: true
    layer.smooth: true
    visible: false
    Text {
        id: textItem
        anchors.centerIn: parent
        text: wigglyTextField.text
        font.family: font1.font.family
        font.pixelSize: Math.min(200 * mainWindow.px, 0.8 * mainWindow.width / text.length)
    }
}

El elemento es un Rectangle con un elemento Text en su interior. El tamaño del rectángulo depende del número de caracteres del texto para que quepa bien en la ventana de la aplicación. Las líneas importantes aquí son layer.enabled: true que crea la textura fuera de pantalla para el efecto y visible: false que oculta este elemento ya que el efecto reemplazará su contenido. Si el elemento es visible, tiene este aspecto sin el efecto ondulado:

A continuación, crea la barra de herramientas de configuración utilizada para controlar el efecto.

TextField {
    id: wigglyTextField
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.3
    text: "Wiggly"
}
Slider {
    id: wigglyAmountYSlider
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.15
    from: 0
    to: 100
    value: 40
}
Slider {
    id: wigglyAmountXSlider
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.15
    from: 0
    to: 100
    value: 20
}
Switch {
    id: electricSwitch
    anchors.verticalCenter: parent.verticalCenter
}

Estos componentes utilizan el icono Qt Quick Controlsapilados dentro de un elemento Row. El primero es un TextField, que puedes utilizar para cambiar el texto ondulado. Luego hay elementos Slider separados, para controlar el tamaño de la onda en coordenadas X e Y. El último control es un Switch, para activar el efecto de nubes eléctricas.

WigglyEffect {
    id: wigglyEffect
    source: sourceItem
    anchors.fill: sourceItem
    timeRunning: true
    wigglyAmountX: wigglyAmountXSlider.value
    wigglyAmountY: wigglyAmountYSlider.value
    electricCloudColor.a: electricSwitch.checked ? 1.0 : 0.0
    wigglyShadows: 0.5
}

Este WigglyEffect se aplica al sourceItem definido anteriormente. El código establece timeRunning a true para animar el efecto. Finalmente, conecta algunas propiedades del efecto shader a los componentes controladores.

También puedes mirar el archivo WigglyEffect.qml para ver los detalles del efecto. Pero ese archivo es creado por la herramienta QQEM, por lo que normalmente no deberías modificarlo manualmente. En su lugar, utilice el Qt Quick Effect Maker como se indica en la siguiente sección.

Modificar el efecto en QQEM

Como se ha mencionado anteriormente, el efecto WigglyEffect se ha creado utilizando la herramienta Qt Quick Effect Maker. Para obtener más información sobre la instalación de QQEM, consulte la documentación Instalación de Qt Quick Effect Maker.

Para modificar los efectos

1. Abre el archivo de proyecto del efecto (qep) en la herramienta QQEM.
2. Modifica los nodos del efecto, las propiedades o el código del sombreador y observa la vista previa en directo.
3. Cuando estés listo, exporta el efecto modificado a tu aplicación.

Cuando el proyecto WigglyEffect/WigglyEffect.qep se abre en QQEM, deberías ver algo como esto:

En la parte izquierda, puedes ver el Node view con diferentes nodos de este efecto. La vista superior derecha es Property view, con propiedades (API) del efecto. La esquina inferior derecha muestra Live view del efecto, con el elemento fuente de vista previa actualmente seleccionado. Para ver la vista previa en vivo con el contenido real, añada la imagen de sourceItem a la lista de fuentes en Edit > Preferences y selecciónela en la lista emergente de la barra de herramientas de vista previa.

Para modificar el código del shader para el efecto wiggly, haga doble clic en el nodo Wiggly o selecciónelo y cambie del modo DESIGN al modo CODE. Luego selecciona la pestaña VERT para ver el sombreador de vértices, donde se encuentra la mayor parte del código del efecto:

@mesh 63, 1
out vec3 wigglyColor;

float rainbowColor(float phase) {
    return abs(sin(texCoord.x * 2.0 + iTime + phase));
}

@main
{
    float wave = sin(vertCoord.x * 0.01 + iTime * 3.0);
    vertCoord.x += wigglyAmountX * wave;
    vertCoord.y += wigglyAmountY * wave;
    const float tau = 6.28318530718;
    wigglyColor.r = rainbowColor(0.0);
    wigglyColor.g = rainbowColor(1.0/3.0 * tau);
    wigglyColor.b = rainbowColor(2.0/3.0 * tau);
    float shadowAmount = (wigglyAmountX + wigglyAmountY) * wave;
    wigglyColor.rgb += shadowAmount * wigglyShadows * 0.01;
}

La primera línea establece el tamaño de la malla ShaderEffect. Esto es necesario, ya que por defecto sólo hay vértices en las esquinas y el efecto wiggly requiere más vértices en movimiento. A continuación, establece el sombreador de vértices para dar salida a la variable wigglyColor, que se utilizará más tarde en el sombreador de fragmentos para aplicar alguna sombra. A continuación, introduzca una función llamada rainbowColor, que devuelve el color de un solo canal en la fase.

Dentro del método principal, el código primero establece el vertCoord para mover las posiciones de los vértices en una onda sinusoidal. Las siguientes líneas establecen los canales rojo, verde y azul del arco iris ondulado. Las dos últimas líneas aplican algunas sombras siguiendo la onda.

A continuación, selecciona la pestaña FRAG para ver el código del fragment shader:

@main
{
    fragColor.rgb *= wigglyColor * fragColor.a;
}

El fragment shader es muy simple y sólo multiplica el color fuente actual con el wigglyColor recibido del vertex shader.

Más del procesamiento podría haberse hecho en el lado del fragment shader, pero tener el código en el vertex shader generalmente es más performante debido a que el número de vértices es notablemente menor que el número de fragmentos (píxeles). Algunas herramientas, como Shadertoy, sólo permiten escribir un fragment shader. Pero como Qt Quick y QQEM también soportan sombreadores de vértices personalizados, deberías intentar aprovecharlos.

Cuando modificas estos shaders, la salida del Live view cambia instantáneamente. Para utilizar el shader modificado en la aplicación de ejemplo, selecciona File > Export en el menú.

Ahora puedes jugar más con las características de QQEM. Por ejemplo, añadir nuevos nodos, cambiar o añadir nuevas propiedades, utilizar estas propiedades en el código del shader, etc. Aquí tienes un ejemplo de cómo queda el efecto con el nodo LedScreen añadido al principio del gráfico de nodos:

Archivos:

• wiggly/CMakeLists.txt
• wiggly/WigglyEffect/WigglyEffect.qml
• wiggly/main.cpp
• wiggly/main.qml
• wiggly/qml.qrc
• wiggly/wiggly.pro