Programao Grfica Parte 1

Verso em C 2006 PUCPR Tutoria de Jogos 1 Ano

Paulo V. W. Radtke
pvwradtke@gmail.com http://www.ppgia.pucpr.br/~radtke/jogos/

AVISO IMPORTANTE!!

Esta verso dedicada exclusivamente para os cursos de Cincia da Computao e Engenharia da Computao. Para a verso de Sistemas de Informao, utilizando Java, pegue o arquivo correspondente e participe da aula no horrio adequado.
PUCPR - CCET 2

Contedo

Instalando as bibliotecas SDL no DevC++. Introduo biblioteca Chien2dLite. Ciclo de vida bsico de um programa. Primeiro exemplo: carregando uma tela usando SDL. Carregando sprites e mostrando-os na tela.
PUCPR - CCET 3

SDL

Sero utilizadas 3 bibliotecas da SDL:

SDL: biblioteca ncleo. Fornece funcionalidades bsicas. SDL_Image: biblioteca para a manipulao de imagens 2D. SDL_Mixer: biblioteca que extende o suporte de udio da SDL. Suporta vrios formatos de msicas, como MIDI, MP3, Ogg, tracked e diversos de udio.
PUCPR - CCET 4

SDL

Para facilitar a instalao, foi criado um pacote, disponibilizado na pgina da tutoria: pacote-dev-cpp.zip. Este arquivo deve ser descompactado no diretrio aonde se encontra instalado o DevC++. Ex: Se ele se encontra instalado em C:\DevCpp, o mesmo deve ser descompactado em C:\, a raiz do drive.
PUCPR - CCET 5

SDL

Alm disto, possvel fazer o download dos pacotes diretamente do site da SDL: http://www.libsdl.org Como toda biblioteca compartilhada, a DLL possui um grupo de arquivos que devem ser colocados no diretrio System do Windows ou distribudos junto com a aplicao.
PUCPR - CCET 6

SDL

Como no temos permisso de escrita no diretrio System, utilizaremos a segunda opo. Apesar de aparentemente mais desvantajosa, esta abordagem mais prtica do ponto de vista de distribuio.
PUCPR - CCET 7

SDL

Arquivos DLL relevantes:

SDL.dll SDL_image.dll SDL_mixer.dll zlib1.dll jpeg.dll libpng13.dll

PUCPR - CCET 8

Chien2DLite

Biblioteca bsica 2D para sprites e fontes bitmap. Se preocupa com o gerenciamento das primitivas escolhidas Baseada em uma classe (C++). A classe um singleton, e a instncia do vdeo pode ser acessada a partir de qualquer ponto do programa.
PUCPR - CCET 9

Chien2DLite

Limitaes:

Adaptada a partir de uma verso OpenGL, a biblioteca somente carrega imagens quadradas, com tamanhos potncia de 2. Ex: 8x8, 16x16, 32x32, 64x64, 128x128, 256x256, 512x512, 1024x1024, etc. A biblioteca somente desenha blocos (azulejos, do ingls tiles), no dando suporte a imagens.
PUCPR - CCET 10

Chien2DLite

A primeira verso bsica no possui primitivas 2D tradicionais. Ser implementado para as prximas aulas o suporte a desenho de pontos, retas e retngulos.

PUCPR - CCET

11

Projeto no Dev-C++

Para fazermos qualquer coisa com a biblioteca, devemos criar um projeto no DevC++. O primeiro passo criar um diretrio e extrair nele os arquivos da Chien2DLite. O arquivo exemplo01-c-imagem.zip ser utilizado neste exemplo (o arquivo contm a biblioteca Chien2DLite).
PUCPR - CCET 12

Projeto no Dev-C++

Crie um projeto novo no Dev-C++ e salve-o no diretrio escolhido:

PUCPR - CCET

13

Projeto no Dev-C++

O projeto por default vem com um arquivo main.cpp, remova-o. Para isto, pressione o boto direito do mouse sobre o nome do arquivo e selecione a opo Remove File.

PUCPR - CCET

14

Projeto no Dev-C++

Em seguida, adicione os arquivos do exemplo clicando com o boto direito do mouse no nome do projeto:

PUCPR - CCET

15

Projeto no Dev-C++

Uma vez inclusos os arquivos, temos a seguinte listagem:

Obs: os arquivos da Chien2DMappy, responsvel pelos mapas esto inclusos mas no sero utilizados neste exemplo. A sua incluso no projeto no faz diferena.
PUCPR - CCET 16

Projeto no Dev-C++

Se compilarmos o projeto como est, o mesmo no funcionar. preciso indicar ao compilador quais bibliotecas ligar ao executvel com o linker em Project -> Project Options.

PUCPR - CCET

17

Projeto no Dev-C++

Selecione a aba Parameters:

PUCPR - CCET

18

Projeto no Dev-C++

Coloque os seguintes parmetros no compilador C, C++ e no Linker:

-lmingw32 -lSDLmain -lSDL -lSDL_image

PUCPR - CCET

19

Projeto no Dev-C++

Uma vez colocados os parmetros, o programa compilar e o executvel ser gerado. Ao executar o mesmo funciona. S que por enquanto, o programa s exibe uma tela preta. Para encerrar o programa, pressione ESC ou feche a janela.
PUCPR - CCET 20

Explicao do Cdigo Fonte

Vamos nos concentrar na funo main, ignorando (por enquanto), a funo entrada, responsvel pelo polling do teclado. A funcionalidade bsica da biblioteca simples, apenas 6 funes resolvem a parte de inicializao, encerramento e redesenho de tela.
PUCPR - CCET 21

Explicao do Cdigo Fonte

Chien2DLite *video = Chien2DLite::pegaInstancia();

Aqui criamos uma referncia ao objeto da Chien2DLite (um ponteiro). O objeto deve ser recuperado SEMPRE atravs deste mtodo esttico. Este mtodo acessvel de qualquer ponto do programa.
PUCPR - CCET 22

Explicao do Cdigo Fonte

video->inicia(640, 480, Chien2DLite::janela, true, "Exemplo 01 - Imagem");

Este mtodo cria a janela em si. Os 5 parmetros so descritos a seguir, na assinatura do mtodo.

PUCPR - CCET

23

Explicao do Cdigo Fonte

video->inicia(largura, altura, modo, retrao, titulo);

Largura e altura indicam a resoluo horizontal e vertical da tela. Em modo janela, podem ser qualquer valor. Em tela cheia, deve ser uma resoluo suportada pelo monitor. Garantido em Windows: 640x480 e 800x600.
PUCPR - CCET 24

Explicao do Cdigo Fonte

video->inicia(largura, altura, modo, retrao, titulo);

Modo indica se a tela vai ser em modo janela ou tela cheia. Valores possveis (valores constantes em Chien2DLite.h):

Chien2DLite::janela Chien2DLite::telaCheia
PUCPR - CCET 25

Explicao do Cdigo Fonte

video->inicia(largura, altura, modo, retrao, titulo);

Valor booleano indicando se a aplicao deve ou no esperar o retrao. Em modo janela ele ignorado, j em tela cheia ele implementado em conjunto com double buffer. Valores possveis: true e false.
PUCPR - CCET 26

Explicao do Cdigo Fonte

video->inicia(largura, altura, modo, retrao, titulo);

String indicando o nome da aplicao. Qualquer valor string vlido (entre aspas) aceito.

PUCPR - CCET

27

Explicao do Cdigo Fonte

video->limpaTela();

O mtodo limpaTela, como o nome sugere, limpa a tela com a cor preta. til entre redesenho de frames nos jogos.

PUCPR - CCET

28

Explicao do Cdigo Fonte

video->sincroniza(); O mtodo sincroniza faz a troca de buffers e efetiva o redesenho da tela.

PUCPR - CCET

29

Explicao do Cdigo Fonte

video->encerra();

A funo encerra fecha a janela e remove os recursos alocados PELA Chien2DLite. Recursos alocados com funes SDL devem ser removidos manualmente.
PUCPR - CCET 30

Explicao do Cdigo Fonte

Chien2D::removeInstancia();

Finalmente, a funo removeInstancia remove a instancia da classe da memria. Como boa prtica de pogramao, interessante chamar essa funo no final dos seus programas.
PUCPR - CCET 31

Carregando uma Imagem

Imagens na SDL so do tipo SDL_Surface. Este tipo uma estrutura que alocada quando a imagem criada/alocada. Para usarmos uma imagem do disco, devemos criar um ponteiro para uma surface:

SDL_Surface *imagem;

PUCPR - CCET

32

Carregando uma Imagem

Para carregar imagens de diversos formatos do disco, devemos utilizar a SDL image. O include desta biblioteca o SDL_image.h. Ele j importado atravs do chien2dlite.h. Normalmente, aplicaes SDL devem incluir este arquivo.
PUCPR - CCET 33

Carregando uma Imagem

A funo que carrega uma imagem a IMG_Load. Ela carrega automaticamente diversos tipos de arquivos (BMP, PNG, etc). A funo retorna uma SDL_Surface da imagem indicada por uma string: SDL_Surface *imagem = IMG_Load(imagem640480.png);

PUCPR - CCET 34

Carregando uma Imagem

Ao carregar a imagem pode ocorrer um erro. Caso a imagem no exista ou no haja mais espao em memria, a surface retornada nula (NULL, 0). Em geral, interessante testar esta condio para no usar um ponteiro nulo.
PUCPR - CCET 35

Carregando uma Imagem

Pesquisa adicional na documentao da SDL:

Normalmente, surfaces criadas de diferentes fontes no tem o mesmo formato que o display de vdeo. Para acelerar o processo de redesenho, devemos converter as imagens para o formato do display. Pesquise na documentao da SDL como fazer isto.

PUCPR - CCET

36

Desenhando a Imagem

Para desenharmos diretamente na tela enquanto usamos a Chien2DLite, precisamos pegar a surface do display do sistema. Para isto, usamos a funo: SDL_GetVideoSurface(); A funo retorna o ponteiro da surface associada ao display do sistema.
PUCPR - CCET 37

Desenhando a Imagem

Uso tpico:

SDL_Surface *display = SDL_GetVideoSurface();

PUCPR - CCET

38

Desenhando a Imagem

Uma vez com a imagem e o display de vdeo, utilizamos a funo SDL_BlitSurface. A funo copia parte de uma surface para outra. uma cpia rpida de pontos.

PUCPR - CCET

39

Desenhando a Imagem

Uso tpico: SDL_BlitSurface(imagem, 0, display, 0); Copia a surface imagem (inteira) para a surface display (inteira), a partir das coordenadas (0,0).
PUCPR - CCET 40

Desenhando a Imagem

A funo SDL_BlitSurface serve para outras situaes. Podemos inclusive copiar um pedao da surface de origem em um pedao da surface de destino. Caso voc tenha maior interesse nesta funo, consulte a documentao da SDL (online ou faa o download).
PUCPR - CCET 41

Eliminando a Imagem

Uma surface criada na SDL ocupa memria alocada dinamicamente. Esta memria DEVE ser liberada quando ela no for mais ser utilizada. Assim, antes de encerrar o programa, devemos eliminar a imagem:

SDL_FreeSurface(imagem);
PUCPR - CCET 42

Exerccio 1

Modifique o cdigo fonte bsico para mostrar uma imagem no redesenho.

1.

2. 3. 4.

Carregar uma imagem do disco (imagem640480.png). Recuperar o display do vdeo. Durante o redesenho, faa o blit da tela. Antes de encerrar o programa, libere a memria associada a imagem.

Salve os arquivos em disco para a prxima aula (pode apagar o executvel e os .o).
PUCPR - CCET 43

Carregando Sprites (Azulejos)

Agora vamos discutir como carregar sprites e blocos de mapa, chamados de Azulejos na Chien2DLite. Para isto, utilizamos o seguinte mtodo:

unsigned int carregaAzulejo(string arquivo, string apelido, int tipoAzulejo);

PUCPR - CCET 44

Carregando Sprites (Azulejos)

unsigned int carregaAzulejo(string arquivo, string apelido, int tipoAzulejo);

Arquivo indica o nome do arquivo a ler do disco.

PUCPR - CCET

45

Carregando Sprites (Azulejos)

unsigned int carregaAzulejo(string arquivo, string apelido, int tipoAzulejo);

Apelido indica o nome pelo qual o azulejo ser chamado no sistema.

PUCPR - CCET

46

Carregando Sprites (Azulejos)

unsigned int carregaAzulejo(string arquivo, string apelido, int tipoAzulejo);

tipoAzulejo indica o tamanho do bloco:

Chien2DLite::azulejo8 Chien2DLite::azulejo16 Chien2DLite::azulejo32 Chien2DLite::azulejo64

PUCPR - CCET 47

Carregando Sprites (Azulejos)

unsigned int carregaAzulejo(string arquivo, string apelido, int tipoAzulejo); O inteiro retornado o identicador nico do azulejo no sistema, diferente de zero. Se retornar zero, falhou o carregamento.
PUCPR - CCET 48

Carregando Sprites (Azulejos)

Normalmente, esta operao falha se:

1.

2.

3.

A imagem no existe no caminho indicado. No h mais memria no sistema para a imagem. A imagem no quadrada com tamanho potncia de 2. Este ser o erro mais provvel inicialmente.
PUCPR - CCET 49

Carregando Sprites

Uso tpico:

unsigned int sprite = video-> carregaAzulejo(imagem.png", apelido", Chien2DLite::azulejo32);

PUCPR - CCET

50

Mostrando o Sprite

O azulejo um tile set, ou seja, ele pode conter vrios blocos dentro dele. Para desenharmos um sprite precisamos do identificado do sprite, o ndice dentro do tile set e da posio x e y:

bool desenhaAzulejo(unsigned int identificador, unsigned int indice, int x, int y);
PUCPR - CCET 51

Mostrando o Sprite

Uso tpico:

video->desenhaAzulejo(sprite, 0, 30,224);

PUCPR - CCET

52

Eliminando o Sprite

Em um jogo com muitas fases, po carregamento de recursos a cada fase inevitvel. Nestes casos, preciso eliminar azulejos que no sero mais utilizados:

void removeAzulejo(unsigned int id);

PUCPR - CCET 53

Exerccio 2

Modifique o exerccio anterior para:

1. 2.

3.

Carregue o sprite no arquivo sprite.png. Mostre-o na tela SOBRE a imagem carregada. Elimine o sprite antes de encerrar o modo de vdeo.

Obs1: a seqncia no redesenho importa. O que desenhado por ltimo desenhado em cima. Obs2: guarde os arquivos para a prxima aula.
PUCPR - CCET 54

Desafio

Modifique o programa para desenhar mais de um sprite na tela. Depois, experimente fazer um sprite atravessar a tela. Para ficar mais interessante, faa o sprite ir e vir de um canto a outro da tela.
PUCPR - CCET 55

Prxima Aula

Desenhando um Tilemap Desenhando Fontes Tratando a Entrada

PUCPR - CCET

56