Introduo a Computao
Aula 11 Interface Grfica
Edirlei Soares de Lima
<elima@[Link]>
LOGO
Biblioteca Grfica
Conjunto de funes para criao e manipulao
de formas geomtricas, imagens, janelas...
Baseada na API OpenGL.
Pode ser usada para criao de jogos 2D,
simulaes, animaes e outros aplicativos.
Desenvolvida especialmente para esse curso!
LOGO
Estrutura de um Programa
#include "Graphics.h"
Incluso da Biblioteca grfica
using namespace GraphicsLib;
Indicao de que as funes da
biblioteca grfica sero usadas no
contexto desse programa
Graphics graphics;
Instncia de um objeto do tipo
Graphics que permite o uso das
funes grficas.
int main(void)
{
[Link](800, 600, Teste");
[Link]();
return 0;
}
Cria uma janela de tamanho
800x600 com o ttulo Teste
Inicia o Loop principal do
programa
LOGO
Resultado do Programa Anterior?
LOGO
Loop Principal
O Loop Principal consiste de uma funo que
repetida enquanto o programa no for fechado pelo
usurio.
Todo processamento realizado pelo programa grfico
est de alguma forma ligado ao Loop Principal.
No Loop Principal deve ser programado:
Os objetos que sero desenhados na tela e como eles sero
apresentados;
Quais animaes e movimentos os objetos tero.
Toda a lgica do programa.
LOGO
Definindo um Loop Principal
void MainLoop()
{
[Link](0,255,0);
graphics.FillRectangle2D(100, 100, 400, 200);
}
Funo que ser usada como Loop
Principal do programa
Define a cor que ser utilizada para desenhar
objetos na tela (Formato RGB)
Desenha um retngulo preenchido iniciando
na posio (100,100) e indo at (200,400)
int main(void)
{
[Link](800, 600, Teste");
[Link](MainLoop);
[Link]();
return 0;
}
Define que a funo MainLoop ser o Loop
Principal do programa
LOGO
Resultado do Programa Anterior?
LOGO
Coordenadas de Tela
Sistema de Coordenadas
Cartesiano
Duas dimenses (2D)
Coordenas X e Y
Coordenadas de Tela
LOGO
y
600
(200,100)
100
0
x
200
800
LOGO
Desenho de Primitivas Geomtricas
Ponto:
void DrawPoint2D(int x, int y);
Exemplo:
graphics.DrawPoint2D(200, 200);
Desenha um ponto na posio
(200, 200) da tela
LOGO
Desenho de Primitivas Geomtricas
Linha:
void DrawLine2D(int x1, int y1, int x2, int y2);
Exemplo:
graphics.DrawLine2D(100, 100, 200, 100);
Desenha uma linha saindo da
posio (100, 100) e indo at a
posio (200, 100)
LOGO
Desenho de Primitivas Geomtricas
Crculo:
void DrawCircle2D(int x, int y, int radius);
Exemplo:
graphics.DrawCircle2D(200, 200, 20);
Desenha um crculo de raio 20 na
posio (200, 200) da tela
LOGO
Desenho de Primitivas Geomtricas
Crculo Preenchido:
void FillCircle2D(int x, int y, int radius, int segments);
Exemplo:
graphics.FillCircle2D(200, 200, 20, 30);
Desenha um crculo preenchido
de raio 20 com 30 segmentos na
posio (200, 200) da tela.
Quantos mais segmentos, mais
redondo o circulo ser.
LOGO
Desenho de Primitivas Geomtricas
Retngulo:
void DrawRectangle2D(int x1, int y1, int x2, int y2);
Exemplo:
graphics.DrawRectangle2D(100,100,200,200);
Desenha um retngulo
iniciando na posio (100, 100)
e indo at a posio (200, 200)
LOGO
Desenho de Primitivas Geomtricas
Retngulo Preenchido:
void FillRectangle2D(int x1, int y1, int x2, int y2);
Exemplo:
graphics.FillRectangle2D(100,100,200,200);
Desenha um retngulo preenchido
iniciando na posio (100, 100) e
indo at a posio (200, 200)
LOGO
Desenho de Primitivas Geomtricas
Tringulo:
void DrawTriangle2D(int x1, int y1, int x2, int y2, int x3, int y3);
Exemplo:
graphics.DrawTriangle2D(100,100,200,100,150,200);
Desenha um tringulo com o primeiro
ponto na posio (100, 100), segundo
ponto na posio (200, 100) e terceiro
ponto na posio (150, 200)
LOGO
Desenho de Primitivas Geomtricas
Tringulo Preenchido:
void FillTriangle2D(int x1, int y1, int x2, int y2, int x3, int y3);
Exemplo:
graphics.FillTriangle2D(100,100,200,100,150,200);
Desenha um tringulo preenchido com
o primeiro ponto na posio (100, 100),
segundo ponto na posio (200, 100) e
terceiro ponto na posio (150, 200)
LOGO
Desenho de Primitivas Geomtricas
Modificando a Cor:
void SetColor(float r, float g, float b);
Exemplo:
[Link](255, 255, 0);
Altera a cor que ser usada para
desenhar os objetos para o valor RGB
(255,255,0). Ou seja, mistura o
mximo de vermelho com o mximo de
verde, o que resulta em amarelo.
LOGO
Desenho de Primitivas Geomtricas
Formato de cor RGB:
R = Red (Vermelho)
G = Green (Verde)
B = Blue (Azul)
Escala RGB:
255
Maior quantidade
No sabe o valor RGB da
cor que voc quer?
[Link]
Menor quantidade
LOGO
Desenho de Primitivas Geomtricas
Modificando a Cor do Fundo da Tela:
void SetBackgroundColor(float r, float g, float b);
Exemplo:
[Link](255, 255, 255);
Altera a cor do fundo da tela para
o valor RGB (255,255,255). Ou
seja, mistura o mximo de todas
as cores, o que resulta em branco.
LOGO
Desenho de Primitivas Geomtricas
Modificando a Largura das Linhas:
void SetLineWidth(float width);
Exemplo:
[Link](12);
Altera para 12 a largura das
linhas usadas para desenhar
as formas geomtricas.
LOGO
Desenho de Primitivas Geomtricas
Escrevendo um Texto na Tela:
void DrawText2D(int x, int y, char* text);
Exemplo:
graphics.DrawText2D(100, 100, Hello World!);
Escreve Hello World! na
posio (100, 100) da tela
LOGO
Desenho de Primitivas Geomtricas
Escrevendo o valor de uma varivel inteira na Tela:
void DrawTextInt2D(int x, int y, int value);
Exemplo:
graphics.DrawTextInt2D(100, 100, MinhaVariavel);
Escreve o valor atual armazenado
na varivel inteira MinhaVariavel
na posio (100, 100) da tela
LOGO
Desenho de Primitivas Geomtricas
Escrevendo o valor de uma varivel float na Tela:
void DrawTextFloat2D(int x, int y, float value);
Exemplo:
graphics.DrawTextFloat2D(100, 100, Valor3);
Escreve o valor atual armazenado
na varivel float Valor3 na
posio (100, 100) da tela
LOGO
Outras Funes
Criar a Janela do Programa:
void CreateMainWindow(int sizeX, int sizeY, char title[]);
Exemplo:
[Link](800, 600, "Nome da Janela");
Cria a janela principal do programa
com o tamanho 800x600 e com o
ttulo Nome da Janela
LOGO
Outras Funes
Executando o programa em tela cheia:
void SetFullscreen(bool enable);
Exemplo:
[Link](true);
Coloca o programa em tela cheia
[Link](false);
Remove o programa da tela cheia
LOGO
Outras Funes
Verificando a Velocidade de Execuo do Programa:
float GetFPS();
Exemplo:
fps = [Link]();
Coloca o nmero de frames por
segundo na varivel fps
FPS (Frames per Second): Medida que nos indica quantos frames
(imagens) consecutivos a placa de vdeo est conseguindo gerar por
segundo.
LOGO
Outras Funes
Verificando a Velocidade de Execuo do Programa:
float GetElapsedTime();
Exemplo:
PosicaoX = PosicaoX + (Speed * [Link]());
Calcula o deslocamento em X de forma
independente da taxa de frames por segundo.
Isso muito importante, pois permite que a
velocidade do deslocamento seja independente
da velocidade que o jogo est sendo executado.
LOGO
Outras Funes
Verificando a Largura e a Altura da Tela:
int GetScreenWidth();
int GetScreenHeight();
Exemplo:
width = [Link]();
height = [Link]();
Coloca a largura da tela na
varivel width
Coloca a altura da tela na varivel
height
LOGO
Desenhando Imagens
Para desenhar uma imagem na tela necessrio:
(1) Criar uma varivel do tipo Image.
(2) Carregar a imagem do arquivo usando o comando
LoadPNGImage.
(3) Desenhar efetivamente a imagem na tela usando o comando
DrawImage2D.
LOGO
Desenhando Imagens
(1) Criar uma varivel do tipo Image:
Image minha_imagem;
OBS: Sempre declare as variveis Image como variveis globais.
Exemplo:
#include "Graphics.h"
using namespace GraphicsLib;
Graphics graphics;
Image minha_imagem1;
Image minha_imagem2;
int main(void)
{
...
Variveis Image declaradas
no inicio do programa.
Antes e fora da funo
principal ou outras funes.
LOGO
Desenhando Imagens
(2) Carregar a imagem do arquivo usando o comando
LoadPNGImage:
minha_imagem = [Link]([Link]");
Exemplo:
Carrega a imagem do arquivo
[Link] para a varivel
minha_imagem.
int main(void)
{
...
minha_imagem = [Link]([Link]");
...
}
OBS: Cada imagem deve ser carregada apenas uma vez. Por isso, nunca carregue a
imagem diretamente de dentro do Loop Principal.
LOGO
Desenhando Imagens
(3) Desenhar efetivamente a imagem na tela usando o
comando DrawImage2D.
graphics.DrawImage2D(200, 200, 256, 256, minha_imagem);
Exemplo:
Desenha a imagem minha_imagem
na posio (200, 200) com tamanho
(256, 256) na tela.
void MainLoop()
{
...
graphics.DrawImage2D(200, 200, 256, 256, minha_imagem);
...
}
LOGO
Desenhando Imagens
Carregando uma Imagem:
Image LoadPNGImage(char *filename);
Exemplo:
Declarao da varivel
do tipo Image que vai
armazenar a imagem
Image mario;
mario = [Link]([Link]");
Carrega o arquivo
[Link] para a
varivel mario
LOGO
Desenhando Imagens
Desenhando Imagens na Tela:
void DrawImage2D(int x, int y, int width, int height, Image image);
Exemplo:
graphics.DrawImage2D(200, 200, 256, 256, mario);
Desenha a imagem mario na
posio (200, 200) com tamanho
(256, 256) na tela.
LOGO
Desenhando Imagens
Observaes importantes sobre imagens:
Somente so aceitas imagens no formato PNG. Mas isso no
uma limitao, o formato PNG um dos melhores formatos
para esse tipo de aplicao. A principal vantagem que ele
permite o uso de transparncia nas imagens.
Cerifique-se de que as imagens que sero lidas esto dentro da
pasta do seu projeto do Visual Studio. Se preferir armazenalas em outras pastas voc deve fornecer o caminho completo
para o diretrio onde as imagens esto para o comando
LoadPNGImage.
Se a sua imagem estiver em outro formado (JPG, GIF, BMP...)
voc deve convert-la para o formato PNG antes de carrega-la.
LOGO
Tratando Entradas do Teclado
Para poder tratar os eventos gerados pelo teclado (teclas sendo
pressionadas) necessrio criar uma funo para essa tarefa.
Essa funo deve ter a seguinte sintaxe:
void KeyboardInput(unsigned char key, int x, int y)
{
/* Bloco de Comandos */
}
Tambm necessrio indicar que essa a sua funo para tratar
eventos de teclado:
[Link](KeyboardInput);
LOGO
Tratando Entradas do Teclado
Dessa forma, sempre que uma tecla normal do teclado for
pressionada a funo KeyboardInput ser executada e o parmetro
key indicar qual tecla foi pressionada.
Exemplo:
void KeyboardInput(unsigned char key, int x, int y)
{
if (key == 'f')
{
[Link](true);
}
if (key == 'w')
{
posicao_personagem_x = posicao_personagem_x + 2;
}
if (key == KEY_ESC)
{
exit(0);
}
}
Se a letra f for pressionada
Coloca o programa em tela cheia
Se a letra w for pressionada
Incrementa em +2 uma varivel
que representa a posio de um
personagem
Se a tecla esc for pressionada
Fecha o programa
LOGO
Tratando Entradas do Teclado
Algumas teclas especiais, como por exemplo as setas direcionais
do teclado, requerem o uso de outra funo especifica para elas.
Essa funo deve ter a seguinte sintaxe:
void KeyboardSpecialInput(int key, int x, int y)
{
/* Bloco de Comandos */
}
Tambm necessrio indicar que essa a sua funo para tratar
eventos de teclado especiais:
[Link](KeyboardSpecialInput);
LOGO
Tratando Entradas do Teclado
Dessa forma, sempre que uma tecla especiais do teclado for
pressionada a funo KeyboardSpecialInput ser executada e o
parmetro key indicar qual tecla foi pressionada.
Exemplo:
void KeyboardSpecialInput(int key, int x, int y)
{
if (key == KEY_LEFT)
{
posicao_personagem_x = posicao_personagem_x - 2;
}
if (key == KEY_RIGHT)
{
posicao_personagem_x = posicao_personagem_x + 2;
}
}
Se a tecla direcional esquerda for
pressionada
Decrementa em -2 uma varivel
que representa a posio de um
personagem
Se a tecla direcional direita for
pressionada
Incrementa em +2 uma varivel
que representa a posio de um
personagem
LOGO
Cdigos das Teclas Especiais
KEY_LEFT
KEY_UP
KEY_RIGHT
KEY_DOWN
KEY_PAGE_UP
KEY_PAGE_DOWN
KEY_HOME
KEY_END
KEY_INSERT
KEY_ESC
KEY_F1
KEY_F2
KEY_F3
KEY_F4
KEY_F5
KEY_F6
KEY_F7
KEY_F8
KEY_F9
KEY_F10
KEY_F11
KEY_F12
LOGO
Tratando Cliques do Mouse
Para poder tratar os eventos gerados pelo mouse (cliques do
mouse) necessrio criar uma funo para essa tarefa.
Essa funo deve ter a seguinte sintaxe:
void MouseClickInput(int button, int state, int x, int y)
{
/* Bloco de Comandos */
}
Tambm necessrio indicar que essa a sua funo para tratar
eventos de clique do mouse:
[Link](MouseClickInput);
LOGO
Tratando Cliques do Mouse
Dessa forma, sempre que um boto do mouse for pressionado a
funo MouseClickInput ser executada e o parmetro button
indicar qual boto foi pressionado. Os parmetros x e y indicam a
posio na tela em que mouse estava quando o clique foi realizado.
Exemplo:
void MouseClickInput(int button, int state, int x, int y)
{
if ((button == MOUSE_LEFT_BUTTON)&&(state == MOUSE_STATE_DOWN))
{
destino_x = x;
Se o boto esquerdo foi
destino_y = y;
pressionado
}
}
As variveis destino_x e destino_y
recebem a posio x e y do mouse
no momento do clique, ou seja,
onde o usurio clicou.
LOGO
Tratando o Movimento do Mouse
Para poder tratar os eventos de movimento gerados pelo mouse
necessrio criar uma funo para essa tarefa.
Essa funo deve ter a seguinte sintaxe:
void MouseMotionInput(int x, int y)
{
/* Bloco de Comandos */
}
Tambm necessrio indicar que essa a sua funo para tratar
eventos de movimento do mouse:
[Link](MouseMotionInput);
LOGO
Tratando Cliques do Mouse
Dessa forma, sempre que o mouse for movimentado pelo usurio a
funo MouseClickInput ser executada e os parmetros x e y
indicaram a posio do mouse na tela.
Exemplo:
void MouseMotionInput(int x, int y)
{
mouse_x = x;
mouse_y = y;
}
As variveis mouse_x e mouse_y
recebem a posio x e y do mouse,
ou seja, o local onde o usurio est
com o cursor do mouse.
LOGO
Cdigos da Teclas do Mouse
Botes:
MOUSE_LEFT_BUTTON
MOUSE_MIDDLE_BUTTON
MOUSE_RIGHT_BUTTON
Estados:
MOUSE_STATE_DOWN
MOUSE_STATE_UP
