Introdução a Computação  
Aula 11 Interface Gráfica  
Edirlei Soares de Lima  
<elima@inf.puc-rio.br>  
Biblioteca Gráfica - PlayLib  
Conjunto de funções para criação e manipulação de  
formas geométricas, imagens, áudio, janelas...  
Baseada na API OpenGL.  
Pode ser usada para criação de jogos 2D, simulações,  
animações e outros aplicativos.  
Desenvolvida especialmente para esse curso!  
Estrutura de um Programa  
#
include "Graphics.h"  
Inclusão da Biblioteca gráfica  
Indicação de que as funções da  
biblioteca gráfica serão usadas  
no contexto desse programa  
using namespace PlayLib;  
Graphics graphics;  
Instância de um objeto do tipo  
Graphics que permite o uso das  
funções gráficas.  
int main(void)  
{
Cria uma janela de tamanho  
graphics.CreateMainWindow(800, 600, "Teste");  
800x600 com o título “Teste”  
Inicia o Loop principal do  
programa  
graphics.StartMainLoop();  
return 0;  
}
Resultado do Programa Anterior?  
Loop Principal  
O Loop Principal consiste de uma função que é repetida  
enquanto o programa não for fechado pelo usuário.  
Todo processamento realizado pelo programa gráfico está de  
alguma forma ligado ao Loop Principal.  
No Loop Principal deve ser programado:  
Os objetos que serão desenhados na tela e como eles serão apresentados;  
Quais animações e movimentos os objetos terão.  
Toda a lógica do programa.  
Definindo um Loop Principal  
Função que será usada como Loop Principal  
do programa  
void MainLoop()  
{
Define a cor que será utilizada para  
desenhar objetos na tela (Formato RGB)  
graphics.SetColor(0,255,0);  
Desenha um retângulo preenchido iniciando  
na posição (100,100) e indo até (200,400)  
graphics.FillRectangle2D(100, 100, 400, 200);  
}
int main(void)  
{
graphics.CreateMainWindow(800, 600, Teste");  
Define que a função MainLoop será o Loop  
Principal do programa  
graphics.SetMainLoop(MainLoop);  
graphics.StartMainLoop();  
return 0;  
}
Resultado do Programa Anterior?  
Coordenadas de Tela  
Sistema de Coordenadas  
Cartesiano  
Duas dimensões (2D)  
Coordenas X e Y  
Coordenadas de Tela  
y
600  
(200,100)  
100  
x
0
800  
200  
Desenho de Primitivas Geométricas  
Ponto:  
void DrawPoint2D(int x, int y);  
Exemplo:  
Desenha um ponto na posição  
(200, 200) da tela  
graphics.DrawPoint2D(200, 200);  
Desenho de Primitivas Geométricas  
Linha:  
void DrawLine2D(int x1, int y1, int x2, int y2);  
Exemplo:  
Desenha uma linha saindo da  
posição (100, 100) e indo até a  
posição (200, 100)  
graphics.DrawLine2D(100, 100, 200, 100);  
Desenho de Primitivas Geométricas  
Círculo:  
void DrawCircle2D(int x, int y, int radius);  
Exemplo:  
Desenha um círculo de raio 20 na  
posição (200, 200) da tela  
graphics.DrawCircle2D(200, 200, 20);  
Desenho de Primitivas Geométricas  
Círculo Preenchido:  
void FillCircle2D(int x, int y, int radius, int segments);  
Exemplo:  
Desenha um círculo preenchido  
de raio 20 com 30 segmentos na  
posição (200, 200) da tela.  
Quantos mais segmentos, mais  
redondo o circulo será.  
graphics.FillCircle2D(200, 200, 20, 30);  
Desenho de Primitivas Geométricas  
Retângulo:  
void DrawRectangle2D(int x1, int y1, int x2, int y2);  
Exemplo:  
Desenha um retângulo  
iniciando na posição (100, 100)  
e indo até a posição (200, 200)  
graphics.DrawRectangle2D(100,100,200,200);  
Desenho de Primitivas Geométricas  
Retângulo Preenchido:  
void FillRectangle2D(int x1, int y1, int x2, int y2);  
Exemplo:  
Desenha um retângulo preenchido  
iniciando na posição (100, 100) e  
indo até a posição (200, 200)  
graphics.FillRectangle2D(100,100,200,200);  
Desenho de Primitivas Geométricas  
Triângulo:  
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 triângulo com o primeiro  
ponto na posição (100, 100), segundo  
ponto na posição (200, 100) e terceiro  
ponto na posição (150, 200)  
Desenho de Primitivas Geométricas  
Triângulo 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 triângulo preenchido com  
o primeiro ponto na posição (100,  
100), segundo ponto na posição (200,  
100) e terceiro ponto na posição (150,  
200)  
Desenho de Primitivas Geométricas  
Modificando a Cor:  
void SetColor(float r, float g, float b);  
Exemplo:  
Altera a cor que será usada para  
desenhar os objetos para o valor RGB  
graphics.SetColor(255, 255, 0);  
(
255,255,0). Ou seja, mistura o máximo  
de vermelho com o máximo de verde,  
o que resulta em amarelo.  
Desenho de Primitivas Geométricas  
Formato de cor RGB:  
R = Red (Vermelho)  
G = Green (Verde)  
B = Blue (Azul)  
Escala RGB:  
R
G
B
2
55  
Maior quantidade  
Menor quantidade  
Não sabe o valor RGB da cor que  
você quer?  
http://www.colorpicker.com/  
0
Desenho de Primitivas Geométricas  
Modificando a Cor do Fundo da Tela:  
void SetBackgroundColor(float r, float g, float b);  
Exemplo:  
graphics.SetBackgroundColor(255, 255, 255);  
Altera a cor do fundo da tela para  
o valor RGB (255,255,255). Ou  
seja, mistura o máximo de todas  
as cores, o que resulta em branco.  
Desenho de Primitivas Geométricas  
Modificando a Largura das Linhas:  
void SetLineWidth(float width);  
Exemplo:  
Altera para 12 a largura das  
linhas usadas para desenhar  
as formas geométricas.  
graphics.SetLineWidth(12);  
Desenho de Primitivas Geométricas  
Escrevendo um Texto na Tela:  
void DrawText2D(int x, int y, char* text);  
Exemplo:  
graphics.DrawText2D(100, 100, Hello World!”);  
Escreve “Hello World!” na  
posição (100, 100) da tela  
Desenho de Primitivas Geométricas  
Escrevendo o valor de uma variável inteira na Tela:  
void DrawTextInt2D(int x, int y, int value);  
Exemplo:  
graphics.DrawTextInt2D(100, 100, MinhaVariavel);  
Escreve o valor atual armazenado  
na variável inteiraMinhaVariavel”  
na posição (100, 100) da tela  
Desenho de Primitivas Geométricas  
Escrevendo o valor de uma variável float na Tela:  
void DrawTextFloat2D(int x, int y, float value);  
Exemplo:  
graphics.DrawTextFloat2D(100, 100, Valor3);  
Escreve o valor atual armazenado  
na variável float “Valor3” na  
posição (100, 100) da tela  
Outras Funções  
Criar a Janela do Programa:  
void CreateMainWindow(int sizeX, int sizeY, char title[]);  
Exemplo:  
graphics.CreateMainWindow(800, 600, "Nome da Janela");  
Cria a janela principal do programa  
com o tamanho 800x600 e com o  
título “Nome da Janela”  
Outras Funções  
Executando o programa em tela cheia:  
void SetFullscreen(bool enable);  
Exemplo:  
graphics.SetFullscreen(true);  
Coloca o programa em tela cheia  
Remove o programa da tela cheia  
graphics.SetFullscreen(false);  
Outras Funções  
Verificando a Velocidade de Execução do Programa:  
float GetFPS();  
Exemplo:  
Coloca o número de frames por  
segundo na variável fps  
fps = graphics.GetFPS();  
FPS (Frames per Second): Medida que nos indica quantos frames (imagens) consecutivos a  
placa de vídeo está conseguindo gerar por segundo.  
Outras Funções  
Verificando a Velocidade de Execução do Programa:  
float GetElapsedTime();  
Exemplo:  
PosicaoX = PosicaoX + (Speed * graphics.GetElapsedTime());  
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.  
Outras Funções  
Verificando a Largura e a Altura da Tela:  
int GetScreenWidth();  
int GetScreenHeight();  
Exemplo:  
Coloca a largura da tela na  
variável width  
width = graphics.GetScreenWidth();  
height = graphics.GetScreenHeight();  
Coloca a altura da tela na variável  
height  
Desenhando Imagens  
Para desenhar uma imagem na tela é necessário:  
(1) Criar uma variável do tipo Image.  
(2) Carregar a imagem do arquivo usando o comando LoadPNGImage.  
(3) Desenhar efetivamente a imagem na tela usando o comando  
DrawImage2D.  
Desenhando Imagens  
(1) Criar uma variável do tipo Image:  
Image minha_imagem;  
OBS: Sempre declare as variáveis Image como variáveis globais.  
Exemplo:  
#
include "Graphics.h"  
using namespace GraphicsLib;  
Graphics graphics;  
Image minha_imagem1;  
Image minha_imagem2;  
Variáveis Image declaradas no  
inicio do programa. Antes e fora  
da função principal ou outras  
funções.  
int main(void)  
{
.
..  
Desenhando Imagens  
(2) Carregar a imagem do arquivo usando o comando LoadPNGImage:  
minha_imagem.LoadPNGImage("Mario.png");  
Exemplo:  
Carrega a imagem do arquivo  
Mario.png para a variável  
minha_imagem.  
int main(void)  
{
.
..  
minha_imagem.LoadPNGImage("Mario.png");  
..  
.
}
OBS: Cada imagem deve ser carregada apenas uma vez. Por isso, nunca carregue a imagem  
diretamente de dentro do Loop Principal.  
Desenhando Imagens  
(3) Desenhar efetivamente a imagem na tela usando o comando  
DrawImage2D.  
graphics.DrawImage2D(200, 200, 256, 256, minha_imagem);  
Desenha a imagemminha_imagem”  
na posição (200, 200) com tamanho  
(256, 256) na tela.  
Exemplo:  
void MainLoop()  
{
.
..  
graphics.DrawImage2D(200, 200, 256, 256, minha_imagem);  
..  
.
}
Desenhando Imagens  
Também é possível definir a posição e tamanho das imagens em  
variáveis armazenadas dentro do objeto Image. Para isso, deve-se:  
1
2
3
4
) Criar uma variável do tipo Image:  
Image minha_imagem;  
) Carregar a imagem do arquivo usando o comando LoadPNGImage:  
minha_imagem.LoadPNGImage("Mario.png");  
) Definir a posição da imagem com o comando SetPosition:  
minha_imagem.SetPosition(100,100,256,256);  
) Desenhar a imagem na tela com o comando DrawImage2D:  
graphics.DrawImage2D(minha_imagem);  
Desenhando Imagens  
Carregando uma Imagem:  
void Image.LoadPNGImage(char *filename);  
Exemplo:  
Declaração da variável  
do tipo Image que vai  
armazenar a imagem  
Image mario;  
mario.LoadPNGImage("Mario.png");  
Carrega o arquivo  
Mario.png” para a  
variável “mario”  
Desenhando Imagens  
Desenhando Imagens na Tela:  
void DrawImage2D(int x, int y, int width, int height, Image image);  
void DrawImage2D(Image image);  
Exemplo:  
graphics.DrawImage2D(200, 200, 256, 256, mario);  
Desenha a imagemmario na  
posição (200, 200) com tamanho  
(
256, 256) na tela.  
Desenhando Imagens  
Definindo a Posição uma Imagem:  
void Image.SetPosition(int x, int y, int width, int height);  
Exemplo:  
mario.SetPosition(200, 200, 256, 256);  
Define a posição da imagem  
mario” na posição (200, 200)  
com tamanho (256, 256)  
Desenhando Imagens  
Observações importantes sobre imagens:  
Somente são aceitas imagens no formato PNG. Mas isso não é uma limitação,  
o formato PNG é um dos melhores formatos para esse tipo de aplicação. A  
principal vantagem é que ele permite o uso de transparência nas imagens.  
Cerifique-se de que as imagens que serão lidas estão dentro da pasta do seu  
projeto do Visual Studio. Se preferir armazena-las em outras pastas você deve  
fornecer o caminho completo para o diretório onde as imagens estão 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.  
Tratando Entradas do Teclado  
Para poder tratar os eventos gerados pelo teclado (teclas sendo  
pressionadas) é necessário criar uma função para essa tarefa.  
Essa função deve ter a seguinte sintaxe:  
void KeyboardInput(unsigned char key, int x, int y)  
{
/* Bloco de Comandos */  
}
Também é necessário indicar que essa é a sua função para tratar eventos de  
teclado:  
graphics.SetKeyboardInput(KeyboardInput);  
Tratando Entradas do Teclado  
KeyboardInput será executada e o parâmetro key indicará qual tecla foi pressionada.  
Dessa forma, sempre que uma tecla normal do teclado for pressionada a função  
Exemplo:  
void KeyboardInput(unsigned char key, int x, int y)  
{
if (key == 'f')  
Se a letra f for pressionada  
{
graphics.SetFullscreen(true);  
Coloca o programa em tela cheia  
Se a letra w for pressionada  
}
if (key == 'w')  
{
Incrementa em +2 uma variável  
que representa a posição de um  
personagem  
posicao_personagem_x = posicao_personagem_x + 2;  
}
if (key == KEY_ESC)  
Se a tecla esc for pressionada  
Fecha o programa  
{
exit(0);  
}
}
Tratando Entradas do Teclado  
Algumas teclas especiais, como por exemplo as setas direcionais do teclado,  
requerem o uso de outra função especifica para elas.  
Essa função deve ter a seguinte sintaxe:  
void KeyboardSpecialInput(int key, int x, int y)  
{
/* Bloco de Comandos */  
}
Também é necessário indicar que essa é a sua função para tratar eventos de  
teclado especiais:  
graphics.SetKeyboardSpecialInput(KeyboardSpecialInput);  
Tratando Entradas do Teclado  
Dessa forma, sempre que uma tecla especiais do teclado for pressionada a função  
KeyboardSpecialInput será executada e o parâmetro key indicará qual tecla foi  
pressionada.  
Exemplo:  
void KeyboardSpecialInput(int key, int x, int y)  
Se a tecla direcional esquerda for  
pressionada  
{
if (key == KEY_LEFT)  
{
Decrementa em -2 uma variável  
que representa a posição de um  
personagem  
posicao_personagem_x = posicao_personagem_x - 2;  
}
if (key == KEY_RIGHT)  
Se a tecla direcional direita for  
pressionada  
{
posicao_personagem_x = posicao_personagem_x + 2;  
Incrementa em +2 uma variável  
que representa a posição de um  
personagem  
}
}
Códigos das Teclas Especiais  
KEY_LEFT  
KEY_UP  
KEY_F1  
KEY_F2  
KEY_F3  
KEY_F4  
KEY_F5  
KEY_F6  
KEY_F7  
KEY_F8  
KEY_F9  
KEY_F10  
KEY_RIGHT  
KEY_DOWN  
KEY_PAGE_UP  
KEY_PAGE_DOWN  
KEY_HOME  
KEY_END  
KEY_INSERT  
KEY_ESC  
KEY_F11  
KEY_F12  
Tratando Cliques do Mouse  
Para poder tratar os eventos gerados pelo mouse (cliques do mouse) é  
necessário criar uma função para essa tarefa.  
Essa função deve ter a seguinte sintaxe:  
void MouseClickInput(int button, int state, int x, int y)  
{
/* Bloco de Comandos */  
}
Também é necessário indicar que essa é a sua função para tratar eventos de  
clique do mouse:  
graphics.SetMouseClickInput(MouseClickInput);  
Tratando Cliques do Mouse  
Dessa forma, sempre que um botão do mouse for pressionado a função  
MouseClickInput será executada e o parâmetro button indicará qual botão foi  
pressionado. Os parâmetros x e y indicam a posição na tela em que mouse  
estava quando o clique foi realizado.  
Se o botão esquerdo foi  
pressionado  
Exemplo:  
void MouseClickInput(int button, int state, int x, int y)  
{
if ((button == MOUSE_LEFT_BUTTON)&&(state == MOUSE_STATE_DOWN))  
{
destino_x = x;  
destino_y = y;  
As variáveis destino_x e destino_y  
}
recebem a posição x e y do mouse  
}
no momento do clique, ou seja,  
onde o usuário clicou.  
Códigos da Teclas do Mouse  
Botões:  
Estados:  
MOUSE_LEFT_BUTTON  
MOUSE_MIDDLE_BUTTON  
MOUSE_RIGHT_BUTTON  
MOUSE_STATE_DOWN  
MOUSE_STATE_UP  
Tratando o Movimento do Mouse  
Para poder tratar os eventos de movimento gerados pelo mouse é necessário  
criar uma função para essa tarefa.  
Essa função deve ter a seguinte sintaxe:  
void MouseMotionInput(int x, int y)  
{
/* Bloco de Comandos */  
}
Também é necessário indicar que essa é a sua função para tratar eventos de  
movimento do mouse:  
graphics.SetMouseMotionInput(MouseMotionInput);  
Tratando o Movimento do Mouse  
Dessa forma, sempre que o mouse for movimentado pelo usuário a função  
MouseClickInput será executada e os parâmetros x e y indicaram a posição  
do mouse na tela.  
Exemplo:  
void MouseMotionInput(int x, int y)  
{
mouse_x = x;  
mouse_y = y;  
}
As variáveis mouse_x e mouse_y  
recebem a posição x e y do mouse,  
ou seja, o local onde o usuário está  
com o cursor do mouse.  
Tratando o Movimento com Clique do Mouse  
Para poder tratar os eventos de movimento gerados pelo mouse enquanto o  
usuário estiver com o botão do mouse pressionado é necessário criar uma  
função para essa tarefa. Essa função é útil para tratar situações onde o  
usuário deve clicar e arrastar um objeto para outra posição.  
A função para tratar esse evento deve ter a seguinte sintaxe:  
void MouseClickMotionInput(int x, int y)  
{
/* Bloco de Comandos */  
}
Também é necessário indicar que essa é a sua função para tratar eventos de  
movimento do mouse enquanto o botão do mouse estiver pressionado:  
graphics.SetMouseClickMotionInput(MouseClickMotionInput);  
Tratando o Movimento com Clique do Mouse  
Dessa forma, sempre que o mouse for movimentado pelo usuário a função  
MouseClickInput será executada e os parâmetros x e y indicaram a posição  
do mouse na tela.  
Exemplo:  
void MouseClickMotionInput(int x, int y)  
{
mouse_x = x;  
mouse_y = y;  
}
As variáveis mouse_x e mouse_y  
recebem a posição x e y do mouse,  
ou seja, o local onde o usuário está  
com o cursor do mouse mouse.  
Tratando Cliques do Mouse Sobre uma Imagem  
Para poder tratar os eventos de clique do mouse sobre uma determinada  
imagem é necessário definir uma função para essa tarefa.  
A função para tratar esse evento deve ter a seguinte sintaxe:  
void MouseClickMinhaImagem(int button, int state, int x, int y)  
{
/* Bloco de Comandos */  
}
Também é necessário indicar que essa é a sua função para tratar eventos de  
clique do mouse sobre a imagem em questão usando o comando SetOnClick:  
MinhaImagem.SetOnClick(MouseClickMinhaImagem);  
Tratando o Movimento com Clique do Mouse  
Dessa forma, sempre que o usuário clicar sobre a imagemMinhaImagem”, a  
função MouseClickMinhaImagem será executada e o parâmetro button  
indicará qual botão foi pressionado. Os parâmetros x e y indicam a posição na  
tela relativa a imagem em que mouse estava quando o clique foi realizado.  
Exemplo:  
void MouseClickMinhaImagem(int button, int state, int x, int y)  
{
carregando_imagem = true;  
}
Tratando o Movimento com Clique do Mouse  
Importante: Para poder usar este evento é necessário que a posição da  
imagem tenha sido definida com o comando SetPosition.  
Exemplo:  
Image minha_imagem;  
void MouseClickMinhaImagem(int button, int state, int x, int y)  
{
clicou_na_imagem = true;  
}
int main(void)  
{
.
..  
minha_imagem.LoadPNGImage("Marvin.png");  
minha_imagem.SetPosition(0,100,256,256);  
minha_imagem.SetOnClick(MouseClickMarvin);  
.
..  
}