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!

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:

def draw_text(text, font, color, surface, x, y): textobj = font.render(text, 1, color) textrect = textobj.get_rect() textrect.topleft = (x, y) surface.blit(textobj, textrect)

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.

def main_menu(): while True: screen.fill((0,0,0)) draw_text('Menu Principal', font, (255, 255, 255), screen, 330, 40) mx, my = pygame.mouse.get_pos() button_1 = pygame.Rect(300, 200, 200, 50) button_2 = pygame.Rect(300, 300, 200, 50) button_3 = pygame.Rect(300, 400, 200, 50) if button_1.collidepoint((mx, my)): if click: game() if button_2.collidepoint((mx, my)): if click: options() if button_3.collidepoint((mx, my)): if click: exite() pygame.draw.rect(screen, (255, 0, 0), button_1) pygame.draw.rect(screen, (255, 0, 0), button_2) pygame.draw.rect(screen, (255, 0, 0), button_3) draw_text('Jogar', font, (255, 255, 255), screen, 372, 215) draw_text('Opções', font, (255, 255, 255), screen, 363, 315) draw_text('Sair', font, (255, 255, 255), screen, 378, 415) click = False for event in pygame.event.get(): if event.type == QUIT: pygame.quit() sys.exit() if event.type == KEYDOWN: if event.key == K_ESCAPE: pygame.quit() sys.exit() if event.type == MOUSEBUTTONDOWN: if event.button == 1: click = True pygame.display.update() mainClock.tick(60)

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).

def game(): running = True while running: screen.fill((0,0,0)) draw_text('Meu Jogo', font, (255, 255, 255), screen, 20, 20) for event in pygame.event.get(): if event.type == QUIT: pygame.quit() sys.exit() if event.type == KEYDOWN: if event.key == K_ESCAPE: running = False pygame.display.update() mainClock.tick(60) def options(): running = True while running: screen.fill((0,0,0)) draw_text('Opções', font, (255, 255, 255), screen, 20, 20) for event in pygame.event.get(): if event.type == QUIT: pygame.quit() sys.exit() if event.type == KEYDOWN: if event.key == K_ESCAPE: running = False pygame.display.update() mainClock.tick(60) def exite(): pygame.quit() sys.exit()

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!

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):

itera = 0 itera2 = 0 itera3 = 0 falas = ["Olá eu sou o Mário.","Como você está?"] falas2 = ["Olá, eu sou o Luigi.", "Eu estou bem!", "E você?", "O que me contas de interessante?"] falas3 = ["Eu estou muito bem! Só queria falar que","A Matemática está em TUDO!","E em breve em TODOS! Até mais."] if itera<180: tx,ty = x+25,y-2 itera2 = 0 itera3 = 0 balao(game_display,falas[int(itera/90)%len(falas)],tx,ty) if itera2>1 and itera2<360: ta,tb = a+45,b-2 itera3 = 0 balao2(game_display,falas2[int(itera2/90)%len(falas2)],ta,tb) if itera3>1 and itera3<270: tx,ty = x+25,y-2 balao(game_display,falas3[int(itera3/90)%len(falas3)],tx,ty) pygame.display.update() clock.tick(30) itera += 1 itera2 += 1 itera3 += 1

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!