Programação com OpenGL/QT Quick Game Programing

Origem: Wikilivros, livros abertos por um mundo aberto.

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:

Exemplo de uma aplicação QML básica

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!

Separaçao entre QML UI e a lógica da aplicação[editar | editar código-fonte]

Implementação em jogos 5-in-a-row[editar | editar código-fonte]

Main UI[editar | editar código-fonte]

Menu principal e controles[editar | editar código-fonte]

Jogos de tabuleiros e animação[editar | editar código-fonte]

Estrutura de dados de jogos[editar | editar código-fonte]

Uso do OpenGL e fluidos 3D[editar | editar código-fonte]