segunda-feira, 1 de março de 2021

Pygames: Criando um game de tiro (FPS)

No post de hoje iremos desenvolver um layout para um jogo de tiro (que também é conhecido como FPS - First-Person Shooters, em inglês - não confundor com FPS de um jogo que é Frames Per Second), onde o objetivo é acertar dez vezes o cogumelo (alvo) que se move aleatoriamente na tela.  Você pode encontrar o código aqui desenvolvido no seguinte link: Clique Aqui.


Em primeiro lugar é necessário entender o funcionamento geral desse game de tiro: iremos desenvolver uma área delimitada (que no caso é o alvo) em função de valores cartesianos x,y e valores da altura e largura, onde os cliques do mouse fora dessa área não contam e os cliques dentro dessa área contam na pontuação. Esse é o princípio básico desse layout, no qual depois acrescentamos alguns movimentos ao alvo para gerar um contexto aleatório e dificultar os acertos.

Para construir essa área de acerto usamos duas definições, a primeira do "cogumeloalvo" para inserir a figura e a segunda do "click" para as definições de delimitação de area do alvo (x, y, largura e altura) que estão vinculadas aos status "FORA" e "DENTRO" que são os indicadores dos cliques que são realizados fora e dentro da área construída do "cogumeloalvo":


Na sequência temos o loop de repetição (while True) que é responsável pelos cliques do mouse delimitados pelo contador maior que zero (exatamente para não contar mais cliques e parar o alvo) e do status "DENTRO" dentro dessa repetição, de tal modo que só retire valores do contador quando o clique do mouse estiver dentro da área delimitada do "cogumeloalvo" (status == DENTRO).
Também temos o uso da tecla "r" para reinicar o game que pega os valores de contador e status e os retorna para os valores definidos inicalmente. E por fim, tem-se as regras de movimentação do alvo, que usam o "sentido" para modificar o deslocamento do alvo no eixo x (esquerda e direita). Para o alvo não sair da tela, foi construída uma inequação com valores limitantes da tela com valores randomicos (randit) para alteranar entre direita e esquerda. O valor em y é definido também por um número randômico no intervalo 50 e 500 (random.randint(50, 500)).


Algo que é muito importante em jogos de tiro é a mira e é possível no pygames desabilitar o cursor do mouse com o comando "pygame.mouse.set_visible(False))" e no lugar dele colocar um figura em png de uma mira, que siga os movimentos do cursor usando nas posições x e y, o comando "pygame.mouse.get_pos()". O restante dos códigos que você encontra abaixo são definições de exibição na tela do cenário, personagem alvo, mira, barra de contador de mortes e uma exibição de texto para quando o game é vencido (contador igual a zero):


Com isso temos os elementos básicos para construir um game de tiro e é possível implementar diversos melhoramentos como: construir novos níveis de dificuldade, novos movimentos para o personagem que irá ser acertado, um possível modo de jogatina PVP (o cogumelo ser controlado por outra pessoa e não pela maquina), dentre outros.  Então agora é com você, desenvolva seu próprio game de tiro e deixe nos comentários as inovações que você implementou. Até a próxima!

terça-feira, 9 de fevereiro de 2021

Pygames: Sistema de batalhas de um game. (Parte: 02)

Continuando o desenvolvimento de um sistema de batalhas no Pygames (continuação direta do post: Sistema de Batalhas Parte 01), hoje iremos exibir na tela todos os valores desenvolvidos anteriormente sob duas formas: textual e barra de animação. Na imagem do game abaixo podemos conferir essas duas exibições, a textual com os pontos de vida (e também o turno do jogador) e a barra de animação correspondendo a quantidade de pontos para o ataque especial. Ambas irão mudar conforme os jogadores batalharem em tempo real:


Para haver a exibição dos valores textuais na tela é necessário uma definição de como será apresentado o texto, que aparece na parte inicial dos códigos e ele possui cinco entradas: mensagem (texto escrito), cor da mensagem, tamanho da fonte, coordenada X, coordenada Y. Ainda dentro da definição "texto", existe ainda algumas outras configurações como você pode ver abaixo:


Com uma série de "if" é feita uma verificação para as três situações dos pontos de vida dos jogadores (ambos maior que zero, um menor que zero e outro menor que zero) para em seguida, termos as codificações referentes ao desenho da área da escrita (pygame.draw.rect), exibição do texto (texto()) e a atualização da tela (pygame.display.update). A mesma coisa irá acontecer na exibição de vez do jogador, única diferença é que leva-se em consideração a variável "turno" e só apresenta o texto na tela nas duas situações (turno jogador 01 e jogador 02):


Observe acima que usamos o comando "str()" que serve justamente para transformar os valores de batalha que são calculados numericamente em texto a ser exibido na tela.
Agora vamos falar sobre a barra de animação do especial dos personagens. Ela foi desenvolvida tendo como base o "pygame.draw.rect" (já usado acima) que possui as entradas de: tela (tela do game definida no começo), cor, posição X, posição Y, largura (em X), altura (em Y) e nos entrega retângulos que podem usar tamanhos numéricos ou valores proporcionais da tela, como por exemplo o "largura_janela" e "altura_janela" (ambos definidos na parte inicial). Sequencialmente é feito o desenho de cada retângulo branco (que são a base das barras de especial), para em seguida ser desenhado por cima a barra de progresso do especial em cores vermelho e verde com o texto por cima (note que é muito importante essa ordem, pois se fizermos o contrário, não obteremos o resultado desejado):


Perceba que precisamos vincular o valor de largura (em X) da barra ao valor numérico da variável do especial (especialpikachu e especialcharmander), pois só assim teremos o efeito dela variável conforme a batalha se prossegue. Usando a fórmula "(largura_janela/2)/10)*especialpikachu" (no caso do jogador 02 vai ser "especialcharmander") temos o cálculo de que metade do valor total da largura de tela (que é o tamanho da barra do especial) vai ser dividido em dez partes (para ativar o especial precisa do valor 10) vezes o valor do quantitativo de especial acumulado do jogador em questão. Com isso, teremos uma barra de progresso na tela do game vinculada ao valor do especial e que permite ao jogador saber quando ele pode usar essa habilidade especial.
Com isso finalizamos o post, é possível fazer inúmeras adaptações, trocar pontos de vida pela barra de progresso do especial, colocar animações dos personagens batalhando, trazer novos conceitos de batalha para dentro do game, desenhar novos estilos de exibição de valores na tela, dentro muitos outros. Agora a bola da vez passa para você e deixe nos comentários que inovações você conseguiu trazer para esse layout de game de batalha. Até a próxima!         

segunda-feira, 8 de fevereiro de 2021

Pygames: Sistema de batalhas de um game. (Parte: 01)

No post de hoje iremos desenvolver um layout para um sistema de batalhas entre dois jogadores e que pode servir de modelo para outros tipos de batalhas PVP (player versus player). Você pode obter o arquivo fonte em: CLIQUE AQUI.

O primeiro passo é pensar na estrutura de batalha e quais tipos de poder os personagens devem ter. No exemplo que estamos trabalhando, temos poderes iguais para os dois personagens de modo a balancear a partida, mas vamos usar uma opção de números randômicos para uma das habilidades de modo a dar um diferencial. Tendo em mente isso, organizamos 3 tipos de ataques para cada personagem:

  • Ataque Básico: é um ataque padrão que tem baixo valor de ataque (retira apenas 1 ponto de vida do adversário), mas que gera mais pontos para o ataque Especial (gera 3 pontos);
  • Ataque Carregado: é um ataque mais forte (retira 2 pontos de vida do adversário), porém gera menos pontos para o ataque Especial (apenas 1 ponto);
  • Especial (Ult): é um ataque que só funciona quando o personagem tem um contador (barra) com valor maior ou igual a 10 pontos, ou seja, ele não funciona a qualquer momento e exige estratégia, ainda mais que o valor do ataque dado pode variar de 0 a 5 pontos de uma única vez (sim, você vai depender de sorte nisso, por isso o risco).
Tendo isso em mente, é hora de começaramos a programar. O primeiro passo é pensar em quais variáveis serão necessárias para que esse sistema possa funcionar. A resposta são cinco:
  • vidapikachu: é o total de vida do jogador 01 (no caso representado pelo Pikachu);
  • vidacharmander: é o total de vida do jogador 02 (no caso representado pelo Charmander);
  • especialpikachu: contador do especial do jogador 01;
  • especialcharmander: contador do especial do jogador 02;
  • turno: é a variável responsável por fazer a contagem 0 e 1 para indicar a vez de cada jogador. Na primeira vez sempre é sorteado a vez dos jogadores aleatoriamente usando o "randint (0, 1)"
Feito isso, agora é a hora de pensar na estrutura de programação. Usaremos o "pygame.KEYDOWN" com uma sequencia de "if" (se) acoplados com "and" (e) que irão listar as situações para o bom funcionamento do game, como podemos ver abaixo:


Explicando rapidamente o que ocorre no código acima. Para as teclas de batalha ativar (são elas 1, 2, e 3 para jogador 01 e 8, 9 e 0 para jogador 02), a vida dos jogadores deve estar acima de zero. Em seguida, temos mais um verificador para cada tecla listada acima e apenas acionadas se o valor do turno é o correpondente (fica alternando entre 0 e 1), caso contrário não acontece nada (é para que cada jogador tenha a oportunidade de usar seu turno com calma e estratégia). O próximo passo é fazer as operações com as variáveis de modo a retirar o valor de vida correspondente a habilidade ativada, a geração de pontos para o especial e a mudança de turno. A única diferença é na habilidade referente a ativação do especial (teclas 3 e 0), que seguem uma lógica diferente, já que para ativar a tecla é necessário além do já mencionado, o poder do especial ser maior ou igual a dez e ao aplicar o dano, ele é aleatório (usa a função randint) e em seguida retira dez pontos do contador do especial. Cada um dos "if" tem um comando "print" que mostra o valor resultante das batalhas no shell do Python, vale a pena fazer testes para entender o funcionamento.
Para finalizar, é hora de criar uma opção para reiniciar o game (reset), ao qual foi atribuido a tecla "r" e basicamente ela copia os valores iniciais das variáveis que criamos e joga de volta na execução do game. Note que no código abaixo temos referência a criação de desenhos e textos, mas que serão melhor explicados em um próximo post:


Com isso encerramos a criação do sistema de cálculos de batalha, que inclusive pode ser modificado (pode ser criadas novas habilidades, valores diferenciados, dentro outros), mas ainda precisamos exibir tudo isso na tela. No próximo post iremos mostrar como fazer isso. Até a próxima!

quinta-feira, 20 de agosto de 2020

App Design: Utilizando o Design Thinking para desenvolver o seu aplicativo.

Já vimos anteriormente um post (http://vemfazermatematicaegames.blogspot.com/2020/06/games-design-utilizando-o-design.html) falando especificamente do design de games e hoje vamos trabalhar com o App Design Canvas que tem a proposta de resolver problemas construído um aplicativo como produto final (solução). Você pode encontrar o template do App Design Canvas em: https://drive.google.com/drive/folders/1pb4t6kbBY6x8OKBX5M6gS7y0NQeVOXd7?usp=sharing .

Como podemos ver acima, em cada um desses campos são explicitados pontos chaves que você deve responder e que posteriormente irão nortear o desenvolvimento do seu aplicativo. Esses pontos vão desde responder para o que e para quem o seu aplicativo é desenvolvido, como ele será confeccionado e como será o processo de compartilhamento do mesmo. Veja abaixo a explicação de cada um dos campos:

  • Nome do App: esse é o campo para colocar o nome do aplicativo que está sendo desenhado. Esse nome pode mudar por diversas vezes.
  • Equipe: aqui são inseridos os integrantes da equipe que está desenvolvendo o projeto.
  • Icone do App: todo aplicativo tem um ícone característico que é desenvolvido em uma ferramenta de desenho, sendo esse o espaço para o seu.
  • Data: data de realização do preenchimento do Canvas.
  • Versão: qual a atual versão em que se encontra o seu aplicativo? Ou atual versão do planejamento?
  • Problema: qual a problemática que a equipe está tentando resolver?
  • Descrição do App: campo destinado ao resumo do que o aplicativo faz (resumo geralmente destinado a Playstore/App Store).
  • MVP: como vai funcionar a versão mínima (versão beta) do seu aplicativo? O que é essencial estar presente nessa primeira versão? 
  • Plataforma: em qual plataforma o aplicativo roda? Android? IOS? Outras?
  • Linguagem: qual a linguagem de programação utilizada para a construção do aplicativo?
  • Preço: quanto custará o seu aplicativo para o público?
  • Orçamento: quanto a equipe irá gastar para produzir o aplicativo? Considere horas utilizadas pela equipe como despesas também.
  • Apps Existentes: quais outros aplicativos já existentes fazem o que está sendo proposto ou algo parecido? Existe alguma inovação presente no aplicativo da equipe?
  • Como encontra o App: onde o aplicativo estará disponível para o público (Playstore/App Store/redes sociais)? 
  • Público Alvo: quem são os usuários que o seu aplicativo se destina?
  • Características do App: quais as características principais do seu aplicativo?
  • Funcionalidades do App: quais funcionalidades estão embutidas no aplicativo? Procure ser mais técnico e exprimir os códigos necessários para que essas funcionalidades ganhem vida.
  • Fatores de Sucesso: liste quais fatores podem influenciar no sucesso do seu aplicativo.
  • Ideias Descartadas: nesse campo devem ser inseridas todas as ideias que não serão utilizadas e irá funcionar como um legado. Nada impede de alguma dessas ideias descartadas voltar a ser utilizada novamente.
  • Visão: como o seu aplicativo será visto no futuro por seus usuários? Ele terá updates? Quais novidades podem ser agregadas?

Se o seu grupo de trabalho conseguir responder a esses questionamentos do Canvas de Design de Apps, irá notar que os direcionamentos do seu aplicativo ficarão mais claros e que ajustes no decorrer na construção dele serão menores do que se fizesse sem qualquer planejamento. Deixe nos comentários um pouco do que sentiu ao desenvolver esse planejamento e até a próxima!

quarta-feira, 12 de agosto de 2020

Pygames: Construindo a tela de entrada do seu game.

O post de hoje aborda o que é necessário para construir uma tela de entrada para seu game em Python e caso você queira usar o template que será abordado aqui, acesse: https://drive.google.com/drive/folders/1W-X02WU8iPB3URivEH1NHgTV45qKIioQ?usp=sharing.

Um layout de tela inicial padrão em jogo possui pelo menos 3 botões (Jogar, Opções e Sair) e uma interface inicial em que eles estão contidos. Na programação abaixo você confere a definição usada para a escrita do texto (draw_text) na tela inicial e nos submenus:

O próximo passo é definir a construção dos botões e as opções de quando forem clicados, qual ação deve ser executada (nesse caso usamos o comando "if click:" para redirecionar para as definições que tem os comandos de cada uma das subtelas ou subprocessos). Caso seja necessário implementar mais botões, esse é um dos campos que deve ser modificado, com a definição de um novo botão (button_x=), de um "if" a mais com a definição que será executada e de um "pygame.draw.rect" para desenhar o botão. Por fim, os "draw_text" são usados para as escritas na tela e em cima dos botões (eles são colocados por último, pois precisam estar sobrepostos ao desenho do botão, caso contrário a escrita não aparece). É necessário usar valor cartesianos para posicionar as escritas na tela, o que é um bom exercício de abstração matemática.

Tendo as ações da tela inicial construída, agora é preciso definir o que acontece quando cada botão é executado. Para os botões "Jogar" e "Opções" criamos duas definições ("game" e "options") que redirecionam para uma nova tela. No caso do definição "game" (botão "Jogar") você deve inserir o código do seu game (não faremos aqui, pois iria aumentar muito os códigos e deixaria de ser um modelo didático mas, você pode encontrar aqui no blog inúmeros post sobre produção de games e acrescentar nessa definição). A definição "options" (botão "Opções") é uma tela nova onde deve ser inseridas as opções de customização do seu game (também a ser melhorada por você). E por fim a definição "exite" (botão "Sair") apresenta apenas os códigos para fechar a janela do game, que também pode ser fechado usando a tecla "ESC" (ela é usada também para voltar).

Termina-se o post com a proposição de um desafio: melhore esse template e insira o seu game desenvolvido em Python nele! Muitas melhorias como adição de plano de fundo e música, inserção de botões para tutoriais, dentre outros são possíveis. O desafio está lançado e nos vemos em breve. Até a próxima!

domingo, 2 de agosto de 2020

Pygames: Programando falas entre personagens

O post de hoje é uma continuação direta do post: https://vemfazermatematicaegames.blogspot.com/2020/07/pygames-baloes-de-fala-de-um-personagem.html que trabalhou sobre a construção de falas em um balão para um personagem. Tendo isso como base, iremos avançar para como estabelecer um diálogo entre dois (ou mais personagens), generalizando assim a possibilidade de iterações via diálogos. O arquivo .py e seus complementos aqui utilizados podem ser encontrados no  GDrive: https://drive.google.com/drive/folders/1g20jvMDz-S5ieAMFnG5HDSa1NA_bcp7i?usp=sharing.


Para iniciar, estamos trabalhando com um exemplo com dois personagens diferentes, logo vamos precisar construir duas definições de balões, que irão se diferenciar justamente pelas coordenadas cartesianas de cada personagem (Mário com x e y, Luigi com a e b):


Assim, para cada personagem que for criado, necessita-se de uma definição nova de balão, com coordenadas referentes a ele. Agora, para a construção de falas, temos uma mudança na estrutura, na qual temos listas de falas dos personagens separadas em sequências e atreladas a contadores de iteração (itera, itera2, itera3), que estão em função do "clock.tick(30)" do jogo, que nada mais é do que a taxa de atualização de frames por segundo (FPS):


Como podemos ver acima, temos um conjunto de três "if" (se) que testam os valores do "itera", "itera2" e "itera3", com um somatório de valor 1 para cada um deles após o "clock.tick(30)". Esse valores testados nos "if" são todos múltiplos de 90, pois como o FPS está fixo em 30 frames por segundo e, como queremos que as falas do exemplo durem 3 segundos, temos 30 vezes 3 que dá os valores de 90, do qual serão utilizados os seus múltiplos em cada um dos "if" (uma fala dá o valor 90, duas falas dá o valor 180, três falas dá valor 270, e assim por diante). Caso queira mudar a duração da fala, será necessário reconfigurar esses valores, exemplificando, se for para durar 5 segundos, temos 30 vezes 5, que dá 150 e os múltiplos usados serão com base nesse valor (150, 300, 450, ...).


Agora vamos entender o funcionamento dos "if" em relação aos "itera" com a ajuda da imagem acima. Na primeira vez que entra-se na sequência de "if" (1º loop), o valor do itera é igual a zero e portanto ele executa a primeira frase da "fala1" e deixa zerado os demais "itera2" e "itera3", portanto os próximos "if" não se ativam. Ele fica nesse ciclo até atingir o valor 180, que é responsável por ter realizado 3 frases da "fala1" (são as falas do Mário). Em seguida, como ele não fica mais preso no loop do "itera", passa-se para o "itera2" (2º loop) graça ao contador +1 (valor mínimo de entrada "itera2>1") e inicia as frases da "fala2" (frases do Luigi), que sempre ao final, mantem o "itera3" zerado (até o valor máximo de 360, que corresponde a 4 frases da "fala2"). O próximo passo é o "itera3" (3º loop) e caso queira-se mais frases é necessário aumentar a quantidade de "if" e de "iteraN (N sendo valores numéricos para diferenciar os itera)". Note, que esse é um método que pode ser complicado de seguir caso exista muitas frases a serem faladas pelos personagens, por isso caso queira algo mais sofisticado, precisará trabalhar com arquivos separados para falas, afim de organizar melhor seus códigos.
Com isso finaliza-se a proposta do post e agora é a sua vez de colocar a mão na massa e dar um novo upgrade no seu game. Deixe nos comentários suas impressões e descobertas e até a próxima!

quinta-feira, 16 de julho de 2020

Pygames: Balões de fala de um personagem.

No post de hoje iremos construir uma definição para a exibição de diálogos do seu personagem em forma de balões, que é um recurso muito usado em games para contar histórias. Você pode acessar o layout que será desenvolvido nesse post no GDrive: https://drive.google.com/drive/folders/1QUgJUVskPBowRY244pmsmWMfSt3xRilY?usp=sharing.


Se você observar o código, temos uma definição para o desenho da função balão (def balao(screen,text, x0,y0)) com entradas de desenho de tela, texto a ser inserido e coordenadas X e Y. Dentro da definição temos uma série de parâmetros para configuração de fonte, coloração formato e tamanho do balão de fala, dentre outros. A ideia é que você altere esses parâmetros e vá testando novas possibilidades:
   

Para que as falas aconteçam e sejam exibidas na tela, os parâmetros da definição balão devem ser satisfeitos. O primeiro é a "screen" que é exibida com o uso do "game_display" que é basicamente é o desenho do balão na tela. O segundo parâmetro são as falas, que são acionadas via clique do mouse. Para isso acontecer, temos uma listagem de falas já construídas (definição falas = ['texto']) e que por meio do contador "itera = itera + 1" na função clique, temos essa sequência de frases sendo mostradas na tela (dentro do balão). E por fim o posicionamento do balão em relação ao personagem realizado por meio das variáveis "tx" e "ty" que são atreladas ao x e y do plano cartesiano. Inclusive, nessa opção das variáveis "tx" e "ty" você pode fazer o melhor ajuste do balão em relação ao seu personagem.


Com esse post abre-se uma nova gama de possibilidades com relação a enredos e diálogos dentro do seu game. É possível ainda implementar vozes gravadas, mudar o estilo de balões, fazer o balão desaparecer depois de alguns segundos da fala, usar diferentes inputs para acionar as falas (como se fosse um filme), dentre outras possibilidades. Então mãos na massa e hora de aprimorar o seu game!

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çõ...