segunda-feira, 15 de junho de 2020

Pygames: Animando o pulo do seu personagem

Continuando a sequência de posts sobre animações (https://vemfazermatematicaegames.blogspot.com/2020/06/pygames-animando-os-movimentos.html), hoje iremos abordar como inserir a opção do pulo, na programação já desenvolvida.
A primeira modificação é relacionada a repetição (while running) já construída que terá dois estados: ANDANDO (focada no personagem que se movimentar para a direita e a esquerda) e PULANDO (onde o personagem irá pular com a tecla espaço).


Observando o código acima, temos que a ação normal é estar ANDANDO (if) que executa as programações já vistas anteriormente. Porém, quando a tecla e Espaço é apertada, a ação é modificada para PULANDO (elif) que irá executar a programação do pulo. Note que com essa construção, o personagem pode só pular ou só andar, nunca as duas coisas ao mesmo tempo.
A programação do PULANDO possui uma fórmula adaptada da física (fórmula do lançamento oblíquo no eixo Y), que pode ser vista abaixo:


Essa fórmula física foi adaptada para o contexto do game, já que em um game é o programador que define qual a velocidade do personagem e qual a gravidade existe no modelo. Por isso temos valores baseados em tp (tamanho do pulo) e no FPS, pois existe uma relação entre a atualização de frames e os valores obtidos na equação. Você conseguiria descobrir o que é? Uma dica é que temos uma equação de 2º grau e que suas raízes tem influência na posição do pulo do personagem. 



Finalizando, você deve ter notado que o loading das imagens foi simplificado, ficando apenas as imagens em uma direção (direita) e ao usar o comando "pygame.transform.flip" é possível rebater a imagem como em um espelho, conseguindo-se a sequência de imagens para o lado esquerdo também.


Com isso finalizamos esse post e o código aqui apresentado pode ser encontrado em: https://drive.google.com/drive/folders/1dC7GSPAVSizvtDhA1HMEHrkXSIbHz8UP?usp=sharing. Agora é a sua vez de customizar esse código para o seu game e adicionar novas funcionalidades. Seria possível um personagem andar e pular ao mesmo tempo? E se tivermos mais do que um personagem? Nos comentários abaixo conte um pouco da sua experiência e até a próxima!

segunda-feira, 8 de junho de 2020

Pygames: Animando os movimentos direcionais de um personagem

No post anterior (https://vemfazermatematicaegames.blogspot.com/2020/06/pygames-criando-animacoes.html) construímos uma animação pautada em diversas posições de um personagem que ficam se repetindo. Hoje iremos acrescentar as setas direcionais (direita e esquerda) para controlar o movimento desse personagem animado. Você pode conferir os arquivos e a programação aqui utilizados na seguinte pasta do GDrive: https://drive.google.com/drive/folders/18Tr4eOVSye8fzX8lNzHH_eqG_J9-DL8_?usp=sharing.


O primeiro detalhe é que precisamos duplicar as imagens do personagem que andava para direita e agora, temos de ter a opção para a esquerda (isso pode ser realizado usando o InkScape com a opção "inverter objetos horizontalmente [tecla H]). Na programação teremos o loading com os seguintes códigos:


Para fazer que o personagem se movimente utilizamos as opções já vistas em post anteriores (event.type == pygame.KEYDOWN e event.type == pygame.KEYUP) com o uso do deltaX igual a zero quando a tecla está levantada e valor igual 5 ou -5 (direita e esquerda) para fazer o personagem deslizar pelo eixo X (Y está fixo nesse exemplo) e o "xpos" faz o calculo do quanto foi deslocado pelo eixo X:


A seguir temos uma sequência de "if" (se) que delimita algumas situações:


O primeiro "if deltaX != 0" significa que se o deltaX é definido como zero", então ele inicia o cálculo de iterações responsáveis pelas animações (fica correndo direto) e tem ligação direta com o "indexImg" (fórmula para iteração das imagens que foram carregadas). Temos dois "if" (xpos maior e menor do que o tamanho da tela) responsáveis por delimitar o máximo que o personagem anda na tela. Agora vem a parte mais importante, a sequência de casos possíveis de deslocamento na tela e o que fazer em cada situação, que estão escritas no código abaixo:


Quando temos o valor do delta maior ou menor que zero (estritamente) significa que estamos apertando as teclas direcionais e movimentando o personagem para direita ou esquerda, por isso logo em seguida temos o código do "screen.blit" responsável pelas imagens da direita ou da esquerda, conforme a tecla que foi apertada. Mas quando for zero, significa ausência de tecla apertada e temos duas possibilidades: ter uma imagem específica carregada na posição de frente ou um contador de estado que guarde qual foi a última tecla utilizada (esse é a situação que utilizaremos no nosso exemplo). Com os dois "elif deltaX == 0 and pressionado == " temos além da verificação do deltaX igual a zero, a verificação do estado "pressionado", que se observamos no código das teclas acima, quando o valor de "pressionado" é igual a 1 era na tecla esquerda e 2 na tecla da direita, o que permite que se guarde essa memória e, exiba na tela o "screen.blit" de acordo com a posição correta que acabou de ser teclada. 
Agora é a sua vez, procure inserir novas imagens de outros personagens e tente fazer as adaptações. E se precisar utilizar outras teclas, como proceder? Deixe nos comentários suas descobertas e até a próxima.

quinta-feira, 4 de junho de 2020

Pygames: Criando animações

Animações são uma parte essencial do repertório de quem pretende construir um game e nisso está embutido uma série de quesitos, que você pode conferir no vídeo a seguir feito pela RIOT (desenvolvedora do League of Legends):


O vídeo acima tem diversos cuidados a se ter com a construção de uma animação que devem ser levadas em conta, mas vamos nos focar em um pequeno recorte desse mundo vasto da animação. No post de hoje vamos tratar de como inserir um conjunto de imagens para formar uma animação em Python (biblioteca Pygames).
A primeira ação é obter uma sequência de imagens (de preferência em PNG para poder sobrepor o cenário de fundo), que quando organizadas em um loop (repetição) possam dar a sensação de movimento (animação). Veja o exemplo abaixo, no qual temos a disposição um personagem em diversas posições, cuja animação irá resultar em uma caminhada:


O produto final você pode encontrar no seguinte link: https://drive.google.com/drive/folders/18SZCn-IYdvgMIRLNZDHc-SaSdFCfMts7?usp=sharing. Ao observar a programação, percebemos que além das programações que já costumam ser usadas, tivemos o acréscimo de novas, a começar pela responsável pelo carregamento das imagens, que é a "images.append(pygame.image.load("nomedoarquivo.extensão"))" (destacada em verde abaixo). Ela aparece várias vezes para cada imagem a ser carregada e na ordem que deve aparecer. Além disso, é necessário ter uma iteração baseada no contador "itera" que irá permitir o loop das imagens uma após a outra (destacado em vermelho) para gerar o movimento. E por fim, o comando "blit (nomedoarquivogenérico, (posiçãoX, posiçãoY))" para mostrar na tela a animação (destacado em azul).


Você pode usar esse layout de programação para sua animação, bastando apenas adaptar a quantidade de imagens carregadas e o valor na fórmula de iteração (substituir o %8 pelo valor correspondente a quantidade de imagens) para a nova situação. Bora testar isso? Conte nos comentários abaixo quais foram sua dificuldades e como conseguiu resolver. Até a próxima!

terça-feira, 2 de junho de 2020

Pygames: Construindo um game PVP com timer.

Em primeiro lugar, caso você não saiba o que é PVP, a sigla significa Player versus Player e se refere a uma modalidade de jogos eletrônicos multijogador na qual jogadores enfrentam-se mutuamente (em português Jogador contra Jogador JxJ). Vamos construir um game em Python usando o modelo construído no post anterior (http://vemfazermatematicaegames.blogspot.com/2020/05/pygames-construindo-inimigos-com.html) e o tornando um game PVP acrescentando dois elementos: teclas de entrada extras pro segundo jogador e um game over com contador de tempo. O objetivo do game será de que dois jogadores, cada um com seu personagem e por turnos, possam "caçar" o outro. Vence quem ficar mais tempo sem ser caçado (colisão no game).
Vamos ao primeiro elemento, para acrescentar teclas do teclado para um segundo personagem basta replicar os códigos já construídos modificando a entrada final dos comandos, como por exemplo "pygame.K_LEFT para pygame.K_a" (destacado em azul abaixo), onde setamos a tecla a para executar alguma ação. Outro detalhe é acrescentar os pontos X e Y iniciais diferentes do outro personagem (destacado em verde abaixo) pois se eles começarem sobrepostos teremos game over automático (esse valor de coordenada devem ser inserido na definição dos X e Y dos personagens). Além disso, vai ser necessário replicar alguns códigos referentes ao movimento e a colisão, conforme imagem abaixo:


Agora a novidade, vamos implementar um contador de tempo de modo que ele apareça na tela quando houver um Game Over (ele acontece quando um dos personagens colide contra o outro). O código responsável por isso, você confere abaixo:


Como vemos acima, temos uma definição do segundos logo após o "while" que será o contador por meio da fórmula que vai gerando os valores do cronômetro (os valores vão sendo mostrados no shell do Python por meio do comando "print"). Na parte do código responsável pela colisão, existe o código "fonte.render" responsável por tornar esses valores numéricos como texto, para em seguida ser expresso pelo comando "tela.blit". Caso não faça essa renderização, o Python não consegue expressar na tela o valor numérico do contador. 
Com isso finalizamos o post de hoje, no qual você pode encontrar o código-fonte em: https://drive.google.com/drive/folders/1IzRBVFoil3PL1GMbhwj2Yh3L10Cbz48K?usp=sharing. Existe diversas possibilidades de ir melhorando essa versão de um game PVP, a citar exibir em tempo real o cronômetro e inserir a possibilidade dos turnos entre jogadores automaticamente sem que o jogo feche e que ao final mostre automaticamente quem venceu, dentre outras possibilidades. Agora é com você, construa seu game com a modalidade PVP incluída e compartilhe entre seus amigos. Até a próxima!

segunda-feira, 25 de maio de 2020

Pygames: Construindo inimigos com deslocamentos randômicos e com Game Over

Em post anteriores usando a biblioteca Pygames, construímos diversos elementos que devem estar presentes em um game, tais como:
-Criando um cenário e a movimentação de um personagem (https://vemfazermatematicaegames.blogspot.com/2019/04/pygames-criando-um-cenario-e.html).
Agora iremos juntar todos eles com a inserção do último elemento restante: um "inimigo" que se desloca pela tela guiado por uma fórmula matemática:


Para iniciar, é importante importar bibliotecas "math", "random" e "time" que serão necessárias para alguns comandos, além da já usada Pygames (isso é feito no começo da programação com o uso do "import"). O principal incremento é a fórmula de deslocamento do "inimigo" (que no nosso modelo é o cogumelo), que deve ser colocada dentro do loop "while not fgExit" com o uso de uma variável de contagem que definimos como "t=0". Observe abaixo:


Você pode fazer alterações na velocidade aumentando ou diminuindo o incremento (o valor 1.5) e modificar os deslocamentos diretamente na fórmula. Ainda é possível construir uma fórmula totalmente do zero e ir testando seu desempenho. Que tal?
Uma importante alteração feita, foi no comando "tela.blit(personagem2Img, ( xcogumelo -128 , ycogumelo -128 ))", no qual foi inserido o valor -128 para X e Y e isso foi necessário devido ao posicionamento do bitmap que não considerou o centro da imagem, por isso esse deslocamento de -128, se tornou necessário. Caso você troque de imagem, precisa modificar essa valor de raio do círculo da imagem.
Obviamente, agora temos a disposição um game que necessita que você desloque seu personagem pela tela para não colidir com o inimigo. E se colidir, o que acontece? Uma possibilidade é ser o game over do jogo e para isso foi acrescentado os comandos abaixo:



Como você pode ver, quando existe a colisão, a tela é limpa (fill), é escrito na tela o texto do "game over" (blit) e em seguida, temos um pausa de 4 segundos (sleep(4)) e por fim o jogo fecha (pygame.quit ()). Para customizar isso, existe a possibilidade de escrever novos textos, inserir novas telas ou até mesmo modificar o tempo de espera ou reiniciar o game automaticamente.
Você pode encontrar o modelo do game aqui descrito em: https://drive.google.com/drive/folders/1kT6_sVDmej9-zu-q9ERSrN12nnnx0qCS?usp=sharing. Espero que tenha gostado e que isso o incentive a desbravar o mundo dos games em Python. Recomendo o site do Pygames (https://www.pygame.org/tags/all) onde existem diversos exemplos de games já produzidos que você pode baixar, executar e modificar para ter novas ideias. Até a próxima!

quinta-feira, 21 de maio de 2020

Pygames: Usando cliques do mouse para criar diálogos

O post de hoje é uma continuação da série Pygames, e é aconselhável você ver o post anterior (https://vemfazermatematicaegames.blogspot.com/2020/05/pygames-como-inserir-sons-no-seu-game.html) que já possui uma série de opções já construídas para caso você não consiga entender tudo sobre o código aqui apresentado. Iremos hoje usar a função de cliques do mouse para mostrar um enredo que pode estar embutido no seu game. O layout usado está disponível em: https://drive.google.com/drive/folders/1HLSHOZClAs26ATXSQVRTnh3k69SSoYoG?usp=sharing.


Para inserir a opção de cliques dentro do seu game é bem fácil, já que é um comando semelhante aos do teclado usados anteriormente, como você pode ver abaixo:


Como você pode ver acima, foi criado um contador que inicia no zero (parte inicial das definições, veja na programação destacada abaixo) e que adiciona mais um ao contador para cada clique dado com o mouse e em seguida existe um "se" (if) para os valores 1,2,3,4 e 5 com as programações de limpeza da tela (tela.fill) e desenho na tela do texto (tela.blit) que corresponde ao valor numérico. Esses textos estão pré formatados na parte inicial da definição, como pode-se ver abaixo:


Resumindo, a cada clique de mouse aparece uma nova frase que pode contar uma história ou um dialogo do game para o seu usuário. Para aumentar o número de frases, basta ir aumentando as frases na definição e nos "se" (if) seguindo o modelo já mostrado.
O post de hoje abre um desafio muito grande para você. Como criar diálogos ente diferentes personagens ou mesmo contar uma longa história que tenha vários caminhos possíveis (árvore de possibilidades). Você consegue dar conta desse desafio? Se conseguir, poste nos comentários como solucionou isso. Até a próxima!

terça-feira, 19 de maio de 2020

Pygames: Como inserir sons no seu game

Lembra do nosso projeto de criar cenários e fazer  personagem se movimentarem por ele: https://vemfazermatematicaegames.blogspot.com/2019/04/pygames-criando-um-cenario-e.html. Hoje daremos continuidade  a ele, inserindo sons para customizar o nosso game. Uma atenção especial é que nem sempre o Python (com a biblioteca Pygames) faz a leitura do som em formato MP3, por isso tenha em mão um conversor (programa ou online) para outros formatos como o OGG e o WAV.

A primeira opção de som a ser colocado no game é o som ambiente que será tocado durante todo o game. Abaixo temos o código responsável por ficar tocando o som:



Lembre-se de sempre colocar o nome do arquivo e a extensão corretamente para não dar problemas na hora de executar o game. Além disso, quando usamos sons, pode acontecer dele ser extremamente alto ou baixo, de modo a prejudicar a execução do game. Isso pode ser ajustado com o comando "set_volume" que pode assumir valores entre 0 e 1 para ajustar o som sem precisar fazer qualquer modificação no arquivo.
Além do som de fundo, os games possuem sons associados ao personagem e ao ambiente. No exemplo abaixo, temos o código responsável por fazer sons quando o personagem pula e anda para frente e para trás:



Assim como o código do som ambiente, é necessário definir um carregamento do arquivo de som, mas nesse caso, o play deve ocorrer somente na ação estipulada (pular ou andar) e por isso o play do som fica localizado no código referente a tecla de movimento. 
Caso você queira o código-fonte utilizado nesse post, basta acessar o seguinte link: https://drive.google.com/drive/folders/1LYtnlEE7InMgMGlWCgU83FlVpUuKVW22?usp=sharing. Agora é a sua vez. Use os conhecimentos aqui adquiridos para fazer sua versão de um pequeno game que tenha sons de fundo e sons complementares. Até a próxima!

Como não perder nenhum compromisso: Meu App Agenda

No nosso dia a dia a agenda é um instrumento de grande importância que as pessoas utilizam para fazer anotações de compromissos ou informaçõ...