Comece sua jornada de desenvolvimento de jogos com a simplicidade do 24a2

Comece sua jornada de desenvolvimento de jogos com a simplicidade do 24a2

24a2 é um mecanismo de jogo muito básico, mas totalmente operacional, para programadores de JavaScript. Ele tem uma aparência incomum, mas você pode usá-lo para aprender os fundamentos da programação de jogos.

Com suporte para um loop de jogo, gráficos coloridos e entrada simples, o 24a2 tem tudo o que você precisa para criar pequenos jogos com o mínimo de esforço.

Confira 24a2 e comece hoje mesmo sua jornada rumo ao desenvolvimento completo de jogos.

O que é 24a2?

24a2 é um pequeno mecanismo de código aberto que ajuda você a criar jogos básicos. É muito fácil de aprender e tudo o que você precisa para começar a criar seus jogos é um navegador da Web e um editor de texto.

O 24a2 leva o nome de sua resolução: 24 x 24. Mesmo comparado a outros motores minimalistas como o PICO-8, com sua resolução de 128 x 128, ele é minúsculo! 24a2 usa ‘pixels’ circulares, com grandes lacunas entre eles, por isso tem uma aparência bastante distinta.

Um jogo básico de esqui com o jogador mostrado em um caminho no meio de duas áreas verdes.

Você provavelmente não usará 24a2 para criar o próximo videogame de grande sucesso, mas esse não é realmente o ponto. 24a2 é perfeito para iniciantes e você pode usá-lo para aprender alguns dos conceitos fundamentais por trás do desenvolvimento de jogos.

Também é ótimo para prototipar um conceito central. Se você se distrair com a física complexa do jogo ou animações de sprites, eliminar tudo isso deve ajudá-lo a se concentrar.

Além disso, o código-fonte 24a2 é um único arquivo TypeScript. Você pode usá-lo como inspiração ou até modificá-lo para criar seu próprio mecanismo de jogo mais avançado.

Como você usa 24a2?

Comece com um modelo básico para o seu jogo:

<html>
  <head>
    <script
      src="https://cdn.jsdelivr.net/gh/jamesroutley/24a2/build/engine.js">
    </script>
    <script src="game.js"></script>
  </head>
  <body></body>
</html>

Observe como isso usa uma rede de entrega de conteúdo (cdn.jsdelivr.net) para obter o arquivo engine.js , então você nem precisa baixar ou instalar nada.

O segundo script, game.js , é para seu próprio código de jogo. Comece com o código de trabalho mínimo absoluto, para verificar se tudo funciona corretamente:

new Game({}).run();

Este pequeno programa exibirá a grade 24a2 padrão em seu navegador da web:

A grade 24x24 padrão de círculos cinza claro que compõem o campo de jogo do 24a2.

Em seguida, você vai querer se familiarizar com as funções de retorno de chamada do 24a2 que formam o núcleo do mecanismo. Esses conceitos são transferíveis entre os mecanismos de jogo, portanto, aprender como eles funcionam o beneficiará além do uso do 24a2.

Há um punhado de funções essenciais que você pode definir e passar para o construtor Game() por meio de um objeto de configuração .

let config = {
  create: create,
  update: update,
  onKeyPress: onKeyPress,
  onDotClicked: onDotClicked
};

let game = new Game(config);
game.run();

24a2 chama a função que você especifica em config.create ao inicializar. Você pode usar isso para inicializar a própria configuração do seu jogo, configurar estruturas de dados, etc.

function create(game) {}

A função de atualização é executada periodicamente durante o jogo. Este é o loop principal do jogo que, em outros mecanismos, geralmente consiste em etapas separadas para atualizar o estado do jogo e redesenhar a tela. Com 24a2, você lidará com ambas as operações nesta função.

function update(game) {}

Por fim, para capturar a entrada, você desejará lidar com pressionamentos de teclas de seta, cliques do mouse ou ambos. 24a2 passa uma direção para sua função onKeyPress quando o jogador pressiona uma tecla de seta. Ele passa as coordenadas x e y para onDotClicked se eles clicarem em um ponto usando o mouse.

function onKeyPress(direction) {}
function onDotClicked(x, y) {}

Que tipos de jogo você pode criar com 24a2?

O site 24a2 contém três exemplos de jogos, incluindo um tutorial. Os outros que apresenta são um jogo simples de cobra e um desafio de esqui.

O repositório GitHub inclui links para alguns outros jogos, incluindo Space invaders, Tic-Tac-Toe e um programa Paint mínimo. You Killed a Bear é mais avançado e Maze Craze é uma boa demonstração de como colocar gráficos adicionais em cima da grade padrão.

24MadRush é um ‘clone’ do Tetris que faz um ótimo uso da paleta de cores. Ele também começa com um tutorial jogável inovador que demonstra seus recursos.

24MadRush, um jogo de blocos em queda com uma mancha de pontos de cores misturadas nas 4 linhas inferiores.

As especificações técnicas dos jogos 24a2

24a2 é muito limitado, por design. Mas isso oferece uma excelente oportunidade para a criatividade. Uma das principais dicas para ser mais criativo é abraçar as restrições.

Além de sua resolução limitada, 24a2 restringe você a:

  • Uma paleta de cores de apenas nove cores: as do arco-íris mais preto e cinza.
  • Entrada muito básica: teclas de seta pressionadas e cliques do mouse na grade de pontos.
  • Silêncio: não há suporte para música ou efeitos sonoros.

No entanto, você sempre pode escrever código JavaScript complementar para estender seu jogo além dessas limitações. E, como o mecanismo é de código aberto, você é livre para desenvolvê-lo da maneira que achar melhor.

Estimule-se para coisas maiores com 24a2

Tente se testar com 24a2. Recrie um jogo clássico ou invente o seu. Jogos baseados em turnos, como jogos de tabuleiro, funcionarão muito bem com o mecanismo.

Se o 24a2 despertar sua paixão pelo desenvolvimento de jogos, há muitas oportunidades para continuar a jornada. PICO-8, Godot, Unity e GameMaker são escolhas populares.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *