Desenhando na tela#
Agora que já temos nosso jogo seguindo uma estrutura básica padrão iremos começar a colocar coisas na tela. Por enquanto só temos um fundo vermelho e isso não é lá muito interessante. Neste handout iremos desenhar bandeiras de paises para aprender as funcionalidades da Pygame que nos permitem desenhar polígonos e imagens na tela.
Revisão#
Vamos começar relembrando um pouco da estrutura do nosso jogo:
Isso foi realizado nas funções abaixo.
inicializa: inicializa pygame e recursos necessários para o jogodesenha: atualiza a tela, desenhando figuras e escrevendo texto na telarecebe_eventos: recebe interação do usuáriogameloop: roda até que o jogador feche o jogo. Chama as funçõesdesenhaerecebe_eventos.finaliza: finaliza a pygame e salva possíveis resultados do jogo.
Exercise 1
Answer
Bom, para desenhar na tela faz sentido mexer na função desenha! Note que todas as outras continuarão exatamente iguais ao nosso exercício anterior. Por isso, elas já estarão preenchidas no nosso exercício deste handout.
Vamos agora relembrar o sistema de coordenadas do Pygame:
Veja a figura abaixo.
Exercise 2
Answer
O ponto na esquerda-topo é o \((0,0)\) e o eixo horizontal cresce para a direita. Logo, a coordenada \(x\) é maior que 150 pois o ponto vermelho está na metade da direita do retângulo.
Exercise 3
Answer
O ponto na esquerda-topo é o \((0,0)\) e o eixo vertical cresce para baixo. Logo, a coordenada \(y\) é menor que 100 pois o ponto vermelho está na metade de cima do retângulo.
Polígonos#
Desenhar polígonos em Pygame é muito fácil. Vejamos o código abaixo.
cor = (255, 0, 0)
vertices = [(250, 0), (500, 200), (250, 400), (0, 200)]
pygame.draw.polygon(window, cor, vertices)
- A variável
corcontém uma tupla representando as componentes RGB da cor. - A variável
verticescontém os valores pontos \((x_i, y_i)\) do nosso polígono. - A chamada
pygame.draw.poligondesenha um polígono na janelawindow(primeiro argumento) preenchido com acor(segundo parâmetro) e com vértices listados com tuplas emvertices(terceiro argumento).
Vamos iniciar com o exerício Bandeira da França. Acesse o exercício, leia o enunciado, abra o código no VSCode e volte para o handout. Iremos discutí-lo passo a passo.
Começaremos analisando o problema por partes. O exercício nos pede para desenhar em uma janela de largura \(300\times 200\).
Exercise 4
Answer
São três retângulos na horizontal, todos de tamanho igual. Logo, cada um tem largura 100.
Exercise 5
Answer
O valor deverá ser valor baixo nas componentes azul e verde e alto na componente vermelho. Logo, (255, 0, 0) é a escolha correta e representa o vermelho mais intenso possível.
Exercise 6
Answer
O retângulo azul inicia no segundo terço da coordenada \(x\). A ordem dos vértices é importante também, logo o último vértice obrigatoriamente é o imediatamente abaixo.
Com essas informações na cabeça podemos resolver o exercício!
Exercise 7
Imagens#
Continuamos agora nas bandeiras, mas desta vez usaremos uma um pouquinho mais complexa: a bandeira da Argentina. Agora, além de desenhar polígonos também precisaremos desenhar aquele solzinho no meio da bandeira.
Mostrar imagens na tela também é fácil, mas exige um pouquinho mais de preparação da nossa parte. Precisamos
- carregar a imagem do sol do disco
- pintá-la na tela durante a etapa de desenho
Exercise 8
Answer
O carregamento de todos os recursos do jogo sempre é feito na função inicializa.
O carregamento de imagens no Pygame é feito usando a função pygame.image.load.
Exercise 9
Answer
pygame.image.load recebe o caminho do arquivo a ser carregado. Essa chamada também pode receber um arquivo aberto usando open, mas o mais comum é passar o caminho do arquivo.
Especificamos caminho e não nome pois podemos carregar arquivos em outras pastas. Por exemplo, podemos colocar todas as nossas imagens em uma pasta img e passar o caminho completo ao carregá-las. Se existe um arquivo com nome heart.png dentro de img, podemos carregá-lo passando o caminho img/heart.png: pygame.image.load('img/heart.png').
pygame.image.load devolve a imagem carregada na memória. Esta chamada só precisa ser feita uma vez na função inicializa. A partir desse ponto podemos usar a função window.blit(img, (x, y)) para desenhar na posição (x, y) uma imagem img já carregada por pygame.image.load.
Já sabemos como desenhar as listras da bandeira, então falta somente desenhar o solzinho. Ele deverá ser desenhado exatamente no centro da nossa janela. As listras deverão ter altura igual a 50 pixels.
Dica PRO 1
Nestes primeiros exemplos teremos uma quantidade pequena de imagens para carregar. Nós poderíamos armazenar cada recurso carregável (asset) em uma variável, mas quantas imagens, sons e outros arquivos existem em um jogo de verdade? Nós precisaríamos de muitas variáveis! Para organizar melhor o nosso código, todos os assets que forem carregados serão guardados em um dicionário chamado assets. Esse dicionário será criado e preenchido na função inicializa e passado como argumento para a função desenha.
Exercise 10
Desenhando Texto#
Talvez você tenha estranhado o título desta seção, mas qualquer texto deve realmente ser desenhado para aparecer na tela. Os caracteres de um texto também são desenhados como pixels. Veja o exemplo abaixo:
- Todo sistema inclui uma fonte padrão que é usada em seus elementos de interface gráfica. Carregamos o nome dessa fonte usando
pygame.font.get_default_font(). - Carregamos a fonte em si na memória nesta linha. Precisamos passar também o tamanho da fonte usada (segundo parâmetro).
Com a fonte carregada, podemos criar a imagem com o texto desenhado usando def_font.render. Os argumentos são o texto a ser desenhado, se queremos ativar anti-aliasing e a cor usada no desenho.
Exercise 11
Answer
O carregamento de todos os recursos do jogo sempre é feito na função inicializa.
Exercise 12
Answer
Sempre desenhamos imagens usando a função blit de nossa janela. Ela recebe como primeiro argumento a imagem a ser desenhada e como segundo argumento uma tupla contendo as coordenadas (x, y) em que a imagem deve ser desenhada.
Exercise 13
Agora já sabemos (quase) tudo que precisamos para desenhar cenas complexas na tela. Nosso próximo passo será receber eventos de mouse e teclado para adicionar interatividade nos nossos programas