Programação com OpenGL/QT Quick Game Programing
Sobre o documento
[editar | editar código-fonte]Este tutorial foi escrito pela cooperação entre NOMOVOK e Quit Coding QUIT Coding é um membro oficial do QT Ambassador Program, como embaixadores, nós estamos comprometidos a continuar providenciando uma extraordinaria experiência com o usuário com o QT. Obrigado ao pessoal da Nokia/QT por entregar uma excelente plataforma para escrever aplicativos mobiles.
Este tutorial foi traduzido para o português a versão original por ser baixada aqui
Versão: 1.0 - 24 Outubro de 2010 Copyright © 2010 QUIt Coding. Nokia, Qt e suas respectivas logos são marcas registradas da Nokia Corporation na Finlândia e em outros lugares ao redor do mundo.
Este documento está licenciado sobre a Creative Commons Attribution-Share Alike 3.0 license. para mais informações veja em: http://creativecommons.org/licenses/by-sa/3.0/legalcode para ver todos os termos da licença;
Introdução
[editar | editar código-fonte]Este tutorial é um curso intensivo em QT Quick development usando a versão 4.7 do QT. Vamos primeiro fazer uma breve introdução do que é o QT Quick, e depois cravar uma implementação detalhada de uma game chamado 5-in-row. A interface do usuário é escrito em QML, o qual é a linguagem declarativa atrás do Qt Quick, enquanto a lógica do ame é implementado usando o Standard QT C++. Leitores deste tutorial esperamos que você seja familiarizado com o Qt. Detalhes da documentação sobre QT Quick estão fora do escopo deste tutorial. Por favor consulte a QT Reference Documentation para obter informações mais detalhes no decorrer da leitura. Este é o melhor amigo de um desenvolvedor sério de QT.
Todo código fonte do 5-in-a-row game como Debian package para N900 estão disponivel em http://quitcoding.com. Para um melhor experiência de aprendizado, nós recomendados abrir esta fontes com seu editor favorito e acompanhar o código enquanto ler este tutorial. No caso de você não tiver editor/IDE preferido, então recomendados usar o QT Creator que tem uma grande integração de desenvolvimento entre QT & QML. Experimente fazendo pequenas mudanças no código e observe o resultado, isto ajuda a entender a essência do QT Quick em pouco tempo. Depois de ler este tutorial, você ganhará um solido conhecimento em QT Quick para continuar sua jornada. Então vamos começar!
O que é QT Quick?
[editar | editar código-fonte]Qt Quick é um nome marketing para o nova UI framework declarativa, que tem sido desenvolvida com múltiplos nomes de código como a "QT Declarative UI", "Qt Kinect" and "QML". que traz ferramentas para escrever dinamicamente e animar interface de usuários em uma fração do tempo que levaria para fazer em uma UI usando os métodos tradicionais imperativos. o que também ajudará designer e desenvolvedores a cooperarem mais efetivamente pois o desenvolvedor pode se concentrar na lógica do aplicativo(C++ ou JavaScript) provendo as propriedades e signal/slots necessárias, e deixar o designer fazer a espectacular mágica na interface do usuário usando o QML.
Então o que o QT Quick tem:
- Um nova linguagem declarativa para definir interfaces do usuário chamada QML. Apesar
do fator que o nome se assemelha com o XML, o QML é não baseado no XML, mas ao invés disto usa a sintaxe do JSON(JavaScript Object Notation) um pouco mais incrementado. comparado ao XML, ela é rápida para maquinas analisarem e fácil para humanos lerem e escreverem (com pouca digitação). Obrigado a Web 2.0, JSON é amplamente usado para serializar e transmitir estrutura de dados entre conexões da rede.
- O Qt Declarative module, que implementa uma interface entre a linguagem QML e os elementos disponíveis a ele.
Este módulo também tem uma API C++ que pode ser usado para carregar e interagir com o arquivos QML de dentro de um aplicativo Qt. o QtDeclarative é implementado usando o QGraphicsView Framework e os componentes QML e QGraphicsObjects
- integração com o Qt Creator IDE para ajuda-lo a escrever QML com excelente visualização em um editor com arrastar e soltar
para fazer interfaces de usuário usando os elementos do QML, criando layout para aplicativos com estados, animações para transições entre estados e etc. o Visual designer do QML está por debaixo e não é completamente usável ainda, mas está chegando lá e mesmo sem ele, usando o Qt Creator aceleramos a escrita em QML graças as sintaxes destacadas, ao uso do qmlviewer integrado e etc.
O Qt Quick é desenhado para personalizar, animar interfaces de usuários que se tornaram comuns em aparelhos móveis, set-top boxes, netbooks e outros modernos aparelhos consumidos. Atualmente o QtDeclarative module provido pelo Qt 4.7 contem um grande diferença nos elementos QML (Retangle, Image, Flickable e etc.) mas não (pelo menos ainda) widgets de nível alto(como butões, menus e etc.). Felizmente a construção de interfaces de usuários próprias e widgets com QML é muito rápido e simples o suficiente de falar e vamos começar a codificar!
Olá em QML
[editar | editar código-fonte]Para ter um melhor entendimento do QML, vamos começar uma implementação bem simples de um aplicação QML:
import QtQuick 1.0
Rectangle {
id: panel
width: 400
height: 200
color: "# D0D0D0
Qt Quick Game Programming © 2010 QUIt Coding
Text {
id: helloText
text: "Hello QML!"
color: "red"
font.pointSize: 24
anchors.centerIn: parent
}
}
Como você pode ver, a sintaxe é bem semelhante a JSON com a maior parte com pares de "propriedade : valor" Vamos agora conhecer cada parte para compreender o básico.
import QtQuick 1.0
Nesta linha importaremos os tipo de QML (Rectange, Image, ...) que vem com o Qt e em todos os arquivos QML e sempre começaremos com esta linha. No Qt 4.7.0 a linha correta para usar seria "import Qt 4.7", mas desde do Qt 4.7.1 "QtQuick" será usado no lugar. Especificar o numero de versão é importante por questão de compatibilidade. isto garante que o comportamento do código não ficará diferente em cada linguagem QML que será expandida no futuro com novos elementos e recursos. Alguns recursos da novas versões não pode ser usado sempre, se disponível. O numero de versão também deve ser usado depois de importar algum componente modificado. Faremos mais algumas chamada assim nos capítulos seguintes.
Rectangle {
id: panel
width: 400
height: 200
color: "#D0D0D0"
Isto cria um retangulo com 400 pixel de largura e 200 pixel de altura. Daremos a este retangulo uma id chamada "panel" to poder referencia-lo em outros lugares. as cores usadas para preencher o retangulo é em RGB "#D0D0D0" (Cinza claro)
Text {
id: helloText
text: "Hello QML!"
color: "red"
font.pointSize: 24
anchors.centerIn: parent
}
Depois vamos criar um novo elemento Text, dentro do no retangulo. que será incializado com um "Olá QML!" em vermelho com fonte de 24pt de tamanho, e será ancorado no centro do retangulo. Ancorando itens relativo a outros elementos é dos poderosos recursos do QML e faz um layout fácil e intuitivo. Para rodar este exemplo, save ele como "hello.qml" e use o qmlviewer o binário será provido pelo Qt SDK:
kaj@T61KG:~/qml_hello$ qmlviewer hello.qml
Você verá que o texto em vermelho está no centro de um retangulo cinza claro, semelhante a este:
Claro que isto é apenas a demonstração superficial do que o QML pode fazer, depois aprofundaremos mais. Todos nós precisamos conhecer direito agora que como escrever em QML é fácil e divertido!