Construindo o jogo de dinossauros Chrome no Pygame (Parte 2: Infinite Horizons)

Na última postagem, demos uma olhada em um caldeira básico para o Pygame e depois aprendemos a mudar o pano de fundo da tela do nosso jogo. Neste post, começaremos a codificar os elementos do nosso jogo. Especificamente, estaremos trabalhando para codificar a infinita superfície plana ou horizonte em que nosso dino parece estar funcionando: mas antes de irmos mais longe, preciso deixar claro que estou assumindo o seguinte sobre você: você entende o inglês básico. Confie em mim, isso não é um dado. Você possui conhecimento básico da linguagem de programação Python. Caso contrário, consulte este recurso de codificação para aprender. Você está acompanhando um laptop ou desktop Mac, Linux ou Windows. Você não pode usar seu smartphone para isso, receio. Você pode alterar a cor de fundo da tela para rosa, se solicitado. Se não puder, consulte rapidamente a postagem anterior antes de prosseguir com este. Tudo bem, vamos mergulhar! Etapa 1: exiba o horizonte, então vamos pegar de onde paramos. Atualmente, temos uma tela branca em branco olhando para nós sempre que executamos nosso programa. Mas gostaríamos de ver um horizonte infinito exibido naquela tela branca. Afinal, nosso dino precisa correr em alguma coisa. Então, a pergunta é: como fazemos isso? Sua mente provavelmente está revisitando o trabalho que fizemos no último post, onde usou uma nova superfície para introduzir uma nova cor de fundo na tela. Se sim, parabéns! Você está começando a conseguir a loucura. Ainda não ? Não seja muito duro consigo mesmo, leva algum tempo para se acostumar com essas idéias. SIM. De fato, estaremos usando superfícies. Mas não estamos colocando uma nova cor desta vez. Pensando segundo, de onde conseguimos um horizonte infinito? Estamos usando imagens? Se é isso que você está pensando, sim, usaremos uma imagem. E, com sorte, a imagem que você precisa é exatamente onde precisa estar: no diretório do seu projeto. Especificamente, está no ativo/ diretório que está no mesmo nível que o main.py, onde estamos escrevendo todo o código até agora. Se você procurar nesse diretório, encontrará uma imagem horizonte.Png localizada em ativos/ sprites/ subdiretório, como demonstrado abaixo: ├── main.py └── ativos ├── sprites │ └── Horizon. Bem, assim como a janela de tela veio com um método de preenchimento () para camadas de cores, ele também vem com um método blit () para exibir imagens. Não me pergunte por que eles escolheram chamá -lo assim (não tenho idéia). Portanto, a partir do post anterior, nosso código deve se parecer com o seguinte: pygame.init () screen_width, screen_height = 720, 400 branco = (255, 255, 255) window = pygame.display.set_mode ((screen_width, screen_height)) pygame.display.set_mode ((screen_width, screen_height)) “” “game_running = true while game_running: # enquete para eventos para eventos em pygame.event.get (): if event.type == pygame.quit: game_running = false window.fill (branco) # white pygame.display.update () pygame.__it () se Modo de tela cheia para que estamos prontos para adicionar um horizonte. Certo ? Bem, não tão rápido. Ao contrário de quando adicionamos uma cor de fundo destinada a cobrir toda a tela, uma imagem precisará ser colocada em um ponto específico na referida tela. Para fazer isso, precisamos entender o conceito de coordenadas no Pygame. Em geral, a coordenada de uma coisa é simplesmente uma maneira de descrever a localização daquela coisa em uma superfície, por exemplo, a superfície da Terra, a superfície do seu livro de gráficos na aula de matemática etc. para a maioria dos propósitos, a coordenada geralmente é descrita em termos de duas direções na direção horizontal ou da esquerda para a direita. Conhecido como o eixo X na direção vertical ou de cima para baixo. Conhecido como o eixo y, essa mesma idéia é usada no pygame para posicionar elementos na tela. No entanto, há uma pequena reviravolta na maneira como o Pygame representa as coordenadas: enquanto o ponto de partida (0, 0) da coordenada geralmente está localizado no centro: no pygame, essa mesma coordenada estaria localizada no canto superior esquerdo: em essência, o pygame está posicionado em relação à esquerda e na parte superior da lata de lata, respectivamente. Agora que cobrimos toda a teoria, vamos começar a construir. A primeira etapa é carregar a imagem em nosso programa: importar os … pygame.init () … # Carregar o horizonte da imagem Horizon = pygame.image.load (os.path.join (‘Assets’, ‘sprites’ Modo de tela completa, ‘Horizon. Eu uso o método os.path.join () porque quero que o arquivo Horizon.png do caminho esteja correto, independentemente do sistema operacional usado para executar o código a qualquer momento. No entanto, eu vi algumas pessoas usando cordas cruas aqui. Embora eu não aconselho isso. Agora que temos a imagem do horizonte, precisamos exibi -la na tela. The WINDOW.blit() method takes the image to be displayed (HORIZON in our case) and then it’s coordinates are passed in as a tuple: … def main(): “””main code for the game. “”” game_running = True while game_running: … WINDOW.fill(WHITE) # White WINDOW.blit(HORIZON, (0, SCREEN_HEIGHT//2)) pygame.display.update () pygame.quit () se __name__ == ‘__main__’: main () insira o modo de tela cheia de tela cheia quando você executa o código, você obtém algo assim: o screen/screen/screen/screen/screen/screen/screen/screen/screen/screen/screen/screen/screen/screen/screen/screen/screen/screen/screen/ Para o nosso jogo, queremos o horizonte mais próximo do fundo da tela. Então, vamos fazer algumas alterações: … Horizon_Y_POS = screen_height // 2 + screen_height // 6 def main (): “” “” Código principal para o jogo. “” pygame.Quit () se __name__ == ‘__Main__’: main () Digite o modo de saída de tela cheia de tela cheia agora quando você executa o código, você deve ver algo assim: então, a missão cumprida? Quase, ainda temos que fazer o Horizon Scroll. Nota: Em todos os trechos acima, a janela da linha.Fill (…) é sempre escrita antes da janela da linha.Blit (…). Fazer o contrário, faria com que o fundo branco fosse exibido na parte superior da camada com o horizonte, apagando o horizonte e exibindo uma tela branca. ou seja, a ordem do código importa a etapa 2: Fazendo o Horizon Scroll ao dar uma olhada no jogo final novamente: percebemos que o dino não se move. Na verdade, seu ambiente se move para a esquerda, enquanto ele salta regularmente para evitar ser atingido pelo cacto que se aproximava. Faz parte do ambiente em movimento. Para fazer o Horizon Scroll para a esquerda, aproveitaremos o fato de que o loop do jogo se repete para sempre e tentaremos mover a imagem do horizonte um pouco para a esquerda toda vez que o loop do jogo se repete. Uma boa maneira que encontrei para realizar isso foi introduzir um deslocamento ao longo do eixo x que aumentaria com cada representante: … # Global Variables offset_x = 0 def main (): “” “” “” para o jogo. “” “Global offset_x game_running = truen while game_running: … Window.fill (White) # White.blit (Horizon Whilenning, … Window.fill (White) # White.blit (Horizon, HORIZEN, HONFORTON (WHELD.FILL) -= 1 pygame.display.update () pygame.quit () se __name__ == ‘__Main__’: main () Digite o modo de tela cheia de tela cheia OFFSET_X Offset_x é declarado como uma variável global e a linha global é colocada na parte superior da função principal, para que a variável Global, em vez de uma variável global. O uso de variáveis ​​globais nunca é uma boa ideia, mas abordaremos essa preocupação em um post futuro. No momento, vamos continuar tentando hackear uma solução que funcione. Essencialmente, a linha offset_x -= 1 faz com que o eixo X da imagem do horizonte mude levemente para a esquerda com cada iteração do loop de jogo. Quando executamos o programa agora, devemos ver algo assim: uau, ele rolou !!! Mas está indo muito rápido. Por que está se comportando assim? Bem, acontece que a razão pela qual ele se move tão rápido na tela é resultado da rapidez com que a superfície atual da tela está sendo substituída por uma superfície mais recente. Essa taxa de mudança nas superfícies é o que é conhecido como a taxa de atualização do jogo e é um acessório comum de todos os videogames. É medido em termos de quadros por segundo ou FPS para abreviar. A maioria dos jogos é executada na taxa padrão do setor de 60 qps. Portanto, é uma boa ideia calibrar nosso jogo para usar essa taxa também. Mas como? A maneira como a documentação do Pygame recomenda é através do uso da classe pygame.time.clock, que vem com um método tick () que assume o valor do FPS que queremos como um número inteiro e diminui o loop de jogo para que ele repete vezes tempo para satisfazer nossa taxa de atualização especificada. Aqui está o nosso código com essas alterações incluídas: … fps = 60 relógio = pygame.time.clock () # variáveis ​​globais Offset_x = 0 def main (): “” “Código principal para o jogo.” “” … While Game_running: relógio. Clock.Tick (…) deve estar sempre localizado dentro do corpo do loop principal do jogo. Caso contrário, isso não teria efeito na taxa de atualização do jogo. Agora, quando você executa o jogo, você tem um rolo muito mais lento: parabéns, o horizonte agora está rolando para a esquerda em um ritmo mais acessível. Mas, não queremos que ele saia da tela. Em vez disso, queremos que ele role infinitamente para a esquerda. Como conseguimos isso? Bem, tenho uma idéia: em primeiro lugar, precisamos ter mais de uma imagem do Horizon exibida na tela em sequência. Considerando o fato de que a imagem do horizonte já abrange toda a largura da tela, decidi caminhar duas imagens de horizonte na sequência: … def main (): “” “” Código principal para o jogo. “” “… Horizon_width = Horizon.get_width () Horizon_tiles = 2 while_rnning = Running: … Whindon. … para i em range (Horizon_tiles): window.blit (Horizon, (Horizon_width * i + offset_x, horizon_y_pos)) offset_x -= 1 pygame.display.Update () Pygame.Quit () se __name__ = “ “ `Display.Update () Pygame.Quit () se __name__ = ”d’ ” ”` “ “ “ ” Redefina as imagens do horizonte para suas posições originais quando a primeira sair da tela por uma margem considerável. Aqui está como eu conseguiria isso: … def main (): “” “Código principal do jogo.” “” … enquanto game_running: … se abs (offset_x)> screen_width + 100: offset_x = 0 pygame. Você deve ter um horizonte infinito em sua tela: parabéns !!!, você adicionou com sucesso o primeiro elemento de jogo. Veja o código completo no GitHub. Mas não se limite ao meu código e idéias. Vá em frente. Ajuste o código. Quebrar as coisas. É assim que você aprende melhor. Então, no post de hoje, aprendemos a: exibir imagens na tela. Trabalhe com o sistema de coordenadas no pygame e use -o para posicionar efetivamente os elementos do jogo na tela. Controle a taxa de atualização do jogo usando a classe Pygame Pygame.time.clock e por que é importante fazê -lo. E alcançamos nosso objetivo de criar um horizonte infinito para o nosso dino funcionar em postagens futuras. Ficará muito feliz em ver todo o bom trabalho que fizemos. Falando no Dino, no próximo post, focaremos em adicioná -lo à tela e fazê -lo mover aquelas pequenas pernas adoráveis. Mas por enquanto: obrigado pela leitura.

Fonte