(Obrigado a Wilk Maia por traduzir este post!)
(Tempo de atividade: aproximadamente 60 minutos)
(Baixe os arquivos do Dia 1 aqui)
Introdução
Olá e seja bem vindo ao tutorial Game Jam da Quarentena de Pai e Filha!
Este tutorial de aproximadamente sete dias vai levá-lo, o pai em quarentena que sabe apenas um pouco de programação e a filha em quarentena que quer fazer jogos, do zero a um joguinho fofinho.
Obviamente mães e filhos, bem como outras combinações de pessoas, podem fazer parte deste Jam. Você provavelmente nem mesmo precisa estar confinado em casa. Mas eu escrevo sobre minha realidade.
Nós vamos fazer um jogo chamado Fuga Ousada da Mia. Ele parece mais ou menos com isso:
A Mia é uma astronauta explorando um estranho planeta, quando é pega numa tempestade de tijolos de plástico. Ajude-a a correr de volta para seu foguete antes que ela seja atingida na cabeça.
Este tutorial terá seções para o pai e seções para a filha.
Você terá acesso a um framework desenvolvido especificamente para este propósito, a fim de facilitar as coisas. Mas você vai aprender um pouco de JavaScript de verdade.
Se você e sua filha fizerem mais jogos e você tiver um espacinho online você pode hospedar seus jogos e quase qualquer pessoa poderá jogá-lo em um navegador.
Você pode ensinar o quanto achar apropriado deste quadro amarelo à sua filha.
Você aprenderá como computadores transformam números em jogos. Você aprenderá como pessoas como você (sim, você!) usam frases cuidadosamente escritas e vários números para dizer aos computadores como executar jogos. Isso envolve muita mágica e muita tentativa e erro.
Lembre-se também, criança, seu pai está aprendendo. Portanto, seja gentil.
Hoje, o pai vai preparar o jogo e, então, pai e filha vão inserir Mia e alguns tijolos na tela juntos. Nessa jornada, ambos aprenderão um pouco sobre o sistema de coordenadas. Finalmente, o pai vai adicionar controles de teclado ao jogo e pai e filha poderão experimentar alterar a posição de Mia e dos tijolos.
Vamos começar!
Configurando o jogo
O que nós vamos fazer é um jogo de navegador usando a linguagem de programação JavaScript. A ideia é que ele seja executado em um navegador.
Mas, por questão de segurança, você não pode simplesmente executar o jogo diretamente no seu computador abrindo o arquivo principal no seu navegador. O navegador espera acessar um site, não um arquivo local.
Então, para facilitar as coisas, eu preparei um programa auxiliar que vai executar seu jogo. Você pode abrir o programa auxiliar, arrastar o arquivo principal, index.html, para ele e o jogo vai começar a executar.
Aqui está o Programa para Mac e aqui está o Programa para Windows.
Você também precisará de um editor de texto. O Bloco de Notas funciona bem. Muitos programadores gostam do Sublime Text, que é bom e também gratuito. Não use o Microsoft Word porque a formatação especial quebra o código. Se você quiser usar o Editor de Texto do Mac, salve tudo como texto comum porque, novamente, em caso contrário a formatação especial vai quebrar o código.
Aqui estão os arquivos do Dia 1. Há arquivos de arte para Mia e os tijolos, o código-fonte para vocês completarem, o código-fonte completo para referência e muito código de suporte que você pode simplesmente ignorar.
Baixe os arquivos e ponha-os onde você quiser. Execute o programa auxiliar (você pode precisar dar permissões a ele). Arraste o arquivo index.html no programa auxiliar e você verá… um céu azul.
Primeira Tarefa: Adicionar Mia!
Abra o arquivo chamado game.js. É nele que vocês vão trabalhar.
Você deverá ver algo assim:
// Bem-vindos! É aqui que vocês escreverão seu jogo.
// Qualquer coisa iniciando com duas // barras na frente é um comentário.
// O computador ignora comentários. Eles servem para humanos
// explicarem coisas a outros humanos.
function initializeGame() {
let blue_sky = makeSprite("Art/blue_sky.png");
blue_sky.position.set(0, 0);
stage.addChild(blue_sky);
}
function updateGame(diff) {
}Detalhe: Eu escondi todo o código que cria o jogo. Se vocês estiverem curiosos, nosso jogo utiliza um framekwork chamado PixiJS e todo o meu código extra está encapsulado no arquivo plumbing.js. Vamos ignorá-lo por agora.
Há duas funções com as quais vamos trabalhar.
Uma função é basicamente um comando que você pode dar ao computador. Você pode por o quanto quiser dentro de uma função, muito ou pouco, e pode nomeá-la como preferir. É como uma forma de agrupar pensamentos. “Tudo isso aqui, vamos chamar de MinhaRotinaDeCaféDaManhã ou OrganizarQuarto.”
Para fazer uma função você deve escrever a palavra “function”, seguida de um nome, seguida de alguns ( ) parênteses, onde você pode por alguma informação extra que desejar passar com o seu comando. Então, tudo entre os { } colchetes é o que a função realmente faz.
initializeGame é executada uma vez, assim que o jogo inicia.
Não há nada entre os ( ) parênteses porque ela não precisa de nenhuma informação extra.
Entre os colchetes há três comandos. Primeiramente, criamos um novo sprite utilizando makeSprite (outra função que está escondida no arquivo plumbing.js). Damos a ela um nome de arquivo, “Art/blue_sky.png”, que é a imagem para o céu azul, e ela cria um sprite.
Nós, então, definimos a posição do céu azul para (0, 0). Explicarei isso em um minuto.
Então, adicionamos o céu azul ao stage. O stage é onde você põe coisas na tela. Se você disser ao computador para por algo no stage, ele vai aparecer na tela. (A palavra stage vem de stage – palco, em inglês – de teatro)
Um sprite é uma imagem que você pode movimentar. Por hora há apenas uma imagem do céu azul, mas nós vamos adicionar o sprite para Mia em seguida.
Você pode movimentar sprites usando números. Por exemplo, você pode MOVER O CÉU.
Encontre a linha que contém “blue_sky.position.set(0, 0);” e mude os números. Tente (50, 50). Então, reinicie o jogo ou peça para seu pai reinicá-lo pressionando Command-R em um Mac ou Control-R no Windows. O céu deve ter se movido e você verá escuridão no canto superior esquerdo da janela.
Experimente mudar os números e veja o para onde o céu se move.
Agora, vamos adicionar Mia ao jogo.
Adicione as segunites linhas ao código do seu jogo:
// Bem-vindos! É aqui que vocês escreverão seu jogo.
// Qualquer coisa iniciando com duas // barras na frente é um comentário.
// O computador ignora comentários. Eles servem para humanos
// explicarem coisas a outros humanos.
let mia = null;
function initializeGame() {
let blue_sky = makeSprite("Art/blue_sky.png");
blue_sky.position.set(0, 0);
stage.addChild(blue_sky);
mia = makeAnimatedSprite("Art/mia_animations.json", "run");
mia.position.set(200, 200);
stage.addChild(mia);
}
function updateGame(diff) {
}
Parece o mesmo, exceto que estamos usando uma função diferente para fazer um sprite animado. Ela também precisa que nós escolhamos uma animação específica. Mia tem animações para correr (“run”), subir (“rise”), cair (“fall”) e ficar parada (“idle”). Nós escolhmos correr. Você pode mudar isso e ver como as partes de subida e descida de um pulo são.
Também, próximo ao início do arquivo, escrevemos “let mia = null”.
A palavra mia é uma variável. Variáveis armazenam informação, sejam números, texto ou sprites. Elas são chamadas variáveis porque você pode modificá-las. Por exemplo, você pode dizer “cat_weight = 10;” e em algum momento posterior no programa, “cat_weight = 15;” e mudar a variável; agora é 15 ao invés de 10.
Depois vamos aprender sobre “let” e “null” e por que pusemos essa linha fora da função.
E lá está! Mia está na tela! Mas ela está parada, não se movendo.
Vamos adicionar mais duas linhas.
// Bem-vindos! É aqui que vocês escreverão seu jogo.
// Qualquer coisa iniciando com duas // barras na frente é um comentário.
// O computador ignora comentários. Eles servem para humanos
// explicarem coisas a outros humanos.
let mia = null;
function initializeGame() {
let blue_sky = makeSprite("Art/blue_sky.png");
blue_sky.position.set(0, 0);
stage.addChild(blue_sky);
mia = makeAnimatedSprite("Art/mia_animations.json", "run");
mia.position.set(200, 200);
stage.addChild(mia);
mia.animationSpeed = 0.3;
mia.play();
}
function updateGame(diff) {
}
Muito melhor. Agora Mia corre sem se mover.
Movimente a Mia um pouco usando diferente valores para a posição na linha mia.position.set(200, 200).
Tente mudar a velocidade da animação (mia.animationSpeed). Qual seria um número bem rápido? Qual seria um número lento? 0.1 é muito lento?
Os números que mudam a posição de Mia são parte de um sistema de coordenadas. Você pode pensar em pixels numa tela como um pedaço de papel quadriculado:
Para controlar a posição de um sprite, usamos coordenadas. A primeira, x, controla esquerda e direita. A segunda, y, controla cima e baixo.
Em Fuga Ousada de Mia, a tela tem 1024 pixels de largura e 576 pixels de altura.
Neste sistema de coordenadas, começamos no canto superior esquerdo da tela. Isso significa 0 no eixo esquerda-direita e 0 no eixo cima-baixo.
Se você mover para a direita, o primeiro número aumenta. Então, se você mudar Mia de 200, 200 para 500, 200, ela se moverá para a direita.
Se você mover para baixo, o segundo número aumenta. Então, se você mover Mia de 200, 200 para 200, 400, ela se moverá para baixo na tela.
Segunda Tarefa: Adicionar um tijolo ou dois!
Que tal alguns tijolos? Adicione o seguinte código ao jogo.
// Bem-vindos! É aqui que vocês escreverão seu jogo.
// Qualquer coisa iniciando com duas // barras na frente é um comentário.
// O computador ignora comentários. Eles servem para humanos
// explicarem coisas a outros humanos.
let mia = null;
let brick_1 = null;
let brick_2 = null;
function initializeGame() {
let blue_sky = makeSprite("Art/blue_sky.png");
blue_sky.position.set(0, 0);
stage.addChild(blue_sky);
mia = makeAnimatedSprite("Art/mia_animations.json", "run");
mia.position.set(200, 200);
stage.addChild(mia);
mia.animationSpeed = 0.3;
mia.play();
brick_1 = makeSprite("Art/brick.png");
brick_1.position.set(500, 200);
brick_1.tint = color(1,0,0);
stage.addChild(brick_1);
brick_2 = makeSprite("Art/brick.png");
brick_2.position.set(200, 400);
brick_2.tint = color(0,0,1);
stage.addChild(brick_2);
}
function updateGame(diff) {
}
Basicamente a mesma coisa de antes. Nós criamos dois novos sprites e os pusemos na tela. Nós os nomeamos brick_1 e brick_2 (brick significa tijolo em inglês) para que nós (e o computador) possamos distingui-los.
Se você olhar para a figura que estamos usando, o tijolo é branco.
No código, nós tingimos (tint) os tijolos usando uma cor.
brick_1.tint = color(1,0,0);
color (cor, em inglês) é outra função. Ela espera três valores (vermelho, verde e azul) e retorna um número de cor que o computador consegue entender.
Os valores variam de 0 a 1. Então, para o primeiro valor, 0 é nada de vermelho, 1 é tudo de vermelho e assim sucessivamente.
Experimente um pouco mudar os valores da função color. Você consegue criar um tijolo verde?
E se nós tingirmos Mia? Tente escrever
mia.tint = color(0,1,0);
Mia alienígena!
Última Tarefa: Faça Mia se mover!
A última coisa que vamos fazer hoje é usar o teclado para mover Mia por aí.
Você provavelmente está cansado, então eu não vou explicar a próxima parte em muito detalhe.
<— vê? Você está cansado. Eu sei disso.
Adiciona o segunite à função updateGame (atualizar código, em inglês):
function updateGame(diff) {
// Se a seta direita do teclado for pressionada, mova Mia para a direita
if (key_down["ArrowRight"]) {
mia.x = mia.x + 5;
}
// Se a seta esquerda do teclado for pressionada, mova Mia para a esquerda
if (key_down["ArrowLeft"]) {
mia.x = mia.x - 5;
}
// Se a seta para baixo for pressionada, mova Mia para baixo
if (key_down["ArrowDown"]) {
mia.y = mia.y + 5;
}
// Se a seta para cima for pressionada, mova Mia para cima
if (key_down["ArrowUp"]) {
mia.y = mia.y - 5;
}
}Se jogo está desenhando e atualizando aproximadamente 60 vezes por segundo. Toda vez que ele desenha e atualiza, ele chama a função updateGame. Tudo o que você puser aqui vai acontecer aproximadamente 60 vezes por segundo.
Então estamos colocando teclas de ação no teclado nesse carinha. Há código no plumbing.js que escreve toda a informação de teclado em um dicionário chamado key_down. Basicamente, key_down é algo que consegue dizer se várias teclas foram pressionadas.
Não se preocupe muito sobre a estrutura desse código. O que ele faz é “se a seta direita do teclado tiver sido pressionada, mova a Mia no eito x em 5 pixels” etc
A propósito, a razão de pormos “let mia = null” fora da função initializeGame é para que nós possamos usar a variável “mia” em updateGame também. “blue_sky” só existe dentro da função updateGame. Mas “mia” está disponível para nós em todo lugar.
E lá está! Mia está se movendo.
O programa “monitora” seu teclado para ver se alguma tecla foi pressionada. O código que acabamos de escrever diz ao computador o que fazer se essas teclas forem pressionadas.
Usamos o sistema de coordenadas para mover Mia. x é esquerad e direita e y é cima e baixo.
Quando o jogador pressiona a seta direita do teclado, adicionamos 5 para x e então Mia se move 5 pixels para a direita.
Tente mudar o número de pixels! Se você mover Mia em 10 pixels, como vai ficar?
E se você usar números diferentes para cada tecla?
Você pode desligar o movimento cima/baixo deletando alguma parte do código?
Grande desafio: você consegue mudar o código para mover um dos tijolos ao invés de Mia?
Ufa. É muita coisa para o primeiro dia. Nós nos vemos novamente amanhã, quando vamos dar a Mia um chão de tijolos onde ela poderá correr e pular!
Detalhe: O sprite de Mia é um layout que fiz a partir deste Cavaleiro de Fantasia de itch.io. Veja lá!