Tutorial Avanzado QML 1 - Creando el Lienzo del Juego y los Bloques

Creando la Pantalla de la Aplicación

El primer paso es crear los elementos QML básicos en tu aplicación.

Para empezar, creamos nuestra aplicación Same Game con una pantalla principal como esta:

Esto está definido por el archivo principal de la aplicación, samegame.qml, que se ve así:

import QtQuick

Rectangle {
    id: screen

    width: 490; height: 720

    SystemPalette { id: activePalette }

    Item {
        width: parent.width
        anchors { top: parent.top; bottom: toolBar.top }

        Image {
            id: background
            anchors.fill: parent
            source: "pics/background.jpg"
            fillMode: Image.PreserveAspectCrop
        }
    }

    Rectangle {
        id: toolBar
        width: parent.width; height: 30
        color: activePalette.window
        anchors.bottom: screen.bottom

        Button {
            anchors { left: parent.left; verticalCenter: parent.verticalCenter }
            text: "New Game"
            onClicked: console.log("This doesn't do anything yet...")
        }

        Text {
            id: score
            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
            text: "Score: Who knows?"
        }
    }
}

Esto le da una ventana de juego básica que incluye el lienzo principal para los bloques, un botón de "Nuevo Juego" y una pantalla de puntuación.

Un elemento que puede que no reconozcas aquí es el elemento SystemPalette. Proporciona acceso a la paleta del sistema Qt y se utiliza para dar al botón un aspecto más nativo.

Observe que los anclajes para los tipos Item, Button y Text se establecen utilizando notación de grupo (punto) para facilitar la lectura.

Añadir los componentes Button y Block

El elemento Button del código anterior se define en un archivo de componentes independiente denominado Button.qml. Para crear un botón funcional, usamos los tipos QML Text y MouseArea dentro de un Rectangle. Aquí está el código Button.qml:

import QtQuick

Rectangle {
    id: container

    property string text: "Button"

    signal clicked

    width: buttonLabel.width + 20; height: buttonLabel.height + 5
    border { width: 1; color: Qt.darker(activePalette.button) }
    antialiasing: true
    radius: 8

    // color the button with a gradient
    gradient: Gradient {
        GradientStop {
            position: 0.0
            color: {
                if (mouseArea.pressed)
                    return activePalette.dark
                else
                    return activePalette.light
            }
        }
        GradientStop { position: 1.0; color: activePalette.button }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: container.clicked();
    }

    Text {
        id: buttonLabel
        anchors.centerIn: container
        color: activePalette.buttonText
        text: container.text
    }
}

Esto define esencialmente un rectángulo que contiene texto y sobre el que se puede hacer clic. El MouseArea tiene un manejador onClicked() que se implementa para emitir la señal clicked() del container cuando se hace clic en el área.

En Same Game, la pantalla se llena con pequeños bloques cuando el juego comienza. Cada bloque es sólo un elemento que contiene una imagen. El código del bloque se define en un archivo separado de Block.qml:

import QtQuick

Item {
    id: block

    Image {
        id: img
        anchors.fill: parent
        source: "pics/redStone.png"
    }
}

Por el momento, el bloque no hace nada; es sólo una imagen. A medida que avance el tutorial animaremos y daremos comportamientos a los bloques. Aún no hemos añadido ningún código para crear los bloques; lo haremos en el próximo capítulo.

Hemos configurado la imagen para que tenga el tamaño de su elemento padre utilizando anchors.fill: parent. Esto significa que cuando creemos y redimensionemos dinámicamente los elementos de bloque más adelante en el tutorial, la imagen se escalará automáticamente al tamaño correcto.

Observe la ruta relativa de la propiedad source del tipo Imagen. Esta ruta es relativa a la ubicación del archivo que contiene el tipo Image. Alternativamente, puede establecer el origen de la imagen en una ruta de archivo absoluta o en una URL que contenga una imagen.

Usted debe estar familiarizado con el código hasta ahora. Acabamos de crear algunos tipos básicos para empezar. A continuación, vamos a llenar el lienzo del juego con algunos bloques.

Proyecto de ejemplo @ code.qt.io