Primeiros passos para criar seus games com PICO-8

Nos últimos meses tenho feito alguns experimentos com o PICO-8 e notei que apesar de ser uma ótima ferramenta para quem quer começar a aprender a desenvolver jogos, há pouco (ou zero) conteúdo em português sobre o assunto.

Por isso, resolvi fazer este artigo de introdução. Em breve pretendo publicar um tutorial ensinando a fazer um game básico, mas antes vamos entender como funciona o aplicativo.

PIC o quê?

PICO-8 é um Fantasy Console, imagine como se fosse um emulador de um console que nunca existiu.

O legal deste caso é que o próprio console já possui todas as ferramentas que você precisa para fazer seu jogo. Editor gráfico, de código, de áudio…

Recursos do PICO-8 — Demo original do site lexaloffle

Muita gente já possui uma licença do aplicativo e nem sabe. Se você já comprou algum Humble Bundle que tenha o Voxatron, você também tem direito ao PICO-8.

Se não tiver, você pode comprar no próprio site do PICO-8. No momento que estou escrevendo este tutorial, o preço é de 15 dólares.

Por que é tão limitado?

Um erro bem comum de quem está iniciando os estudos em desenvolvimento de games é a megalomania, querer fazer o maior jogo de todos os tempos. Dá para entender a razão que isso acontece. Quando você não conhece todas as etapas necessárias para se fazer um game, acaba imaginado que seja muito mais fácil do que realmente é.

Engines como Unity e Unreal ajudam muitas equipes pequenas a atingir uma qualidade técnica próxima à de grandes estúdios. Mas elas não fazem mágica, você ainda tem muita coisa para fazer.

Se você tiver que produzir um game muito complexo ao mesmo tempo que tem que aprender tudo, é bem provável que você vai acabar se frustrando e talvez abandone o projeto.

Então tente começar pequeno, faça jogos simples e mostre para seus amigos. Assim você vai aprendendo o que funciona, o que é divertido e o que não é. No final, você vai ter um portfolio mais completo e um conhecimento bem maior de game design.

Ok, já baixei a ferramenta. E agora?

Por padrão, quando se inicia o PICO-8 você se depara com o SPLORE, uma lista de demos e games feitos na ferramenta. O mais legal é que você pode entrar nos editores e ver como os jogos foram feitos.

Com algum jogo carregado, volte para o SPLORE e aperte ESC para entrar na tela de linha de comando (mais sobre ela logo abaixo). Aperte ESC novamente para acessar as ferramentas de edição.

Recomendo passar um tempo testando e mexendo nos jogos existentes para ter uma idéia do que o console é capaz.

Linha de comando

Você pode acessar a tela de linha de comando a qualquer momento apertando ESC. Aperte ESC novamente para voltar para as telas de edição.

Se você não é velho como eu e nunca utilizou um computador com DOS, essa é basicamente uma tela onde você digita um comando (algumas vezes com alguns parâmetros extras) e aperta Enter para que o computador execute as tarefas indicadas.

Os comandos mais comuns do PICO-8 são:

• HELP: Exibe uma lista com os comandos possíveis.
• RUN: Executa o jogo. Você também pode usar o atalho Ctrl+R em qualquer tela.
• OPEN MEUJOGO.P8: Carrega o arquivo indicado (substitua "MEUJOGO.P8" pelo nome do arquivo que você deseja)
• SAVE MEUJOGO.P8: Salva o conteúdo feito nos editores para o arquivo indicado (utilize a extensão .PNG para salvar como cartucho compartilhável)
• SPLORE: Abre o SPLORE

Telas de edição

Você pode alternar entre as telas de edição clicando nos ícones no canto superior direito:

Da esquerda para a direita os ícones são:

• Código
• Gráfico
• Mapa
• Áudio
• Música

Você também pode utilizar as teclas alt + ← e alt + → para navegar entre as telas.

Editor de código

Aqui é onde você vai programar seu jogo. É uma interface bem simples, como o bloco de notas.

A programação é feita em Lua, uma linguagem bem fácil de aprender mas ainda assim poderosa o suficiente para fazer muita coisa legal. Mesmo que não seja usada no desenvolvimento das engines por questões de desempenho, muitos jogos AAA utilizam Lua em alguma parte do desenvolvimento.

A estrutura básica de um game em PICO-8 possui as 3 funções abaixo, que são chamadas automaticamente pela engine em momentos diferentes:

• _INIT(): É executada assim que o jogo começa. É útil para definir o estado inicial do game.
• _UPDATE(): Executada a cada frame. Aqui vai a maior parte da lógica do jogo.
• _DRAW(): Normalmente também é executada a cada frame. Mas tem menos prioridade se o console não estiver dando conta de processar tudo em tempo real.

Talvez você tenha ficado em dúvida sobre o que deve ir para a função _UPDATE e o que vai para a _DRAW, mas é bem simples quando você entende como elas funcionam.

De forma resumida, a _UPDATE é garantida de rodar 30 vezes por segundo. Então é aqui, por exemplo, que você faria os cálculos da posição do personagem durante a ação de pulo. Afinal, você não quer que o salto do personagem fique diferente dependendo da velocidade do processador.

Na função _DRAW, seguindo o exemplo acima, você faria o comando para exibir a sprite do personagem na posição calculada no update. Assim, mesmo que o computador dê uma enroscada e a sprite não atualize, no próximo frame ela aparecerá na posição correta pois o cálculo do update na velocidade correta.

Editor Gráfico

É aqui que você irá desenhar seus personagens e elementos do jogo. Temos vários componentes na tela, então aqui vai uma lista rápida do que cada coisa faz:

Quadro de edição: É este quadrado maior na esquerda, onde você utilizará as ferramentas para modificar a sprite selecionada. No canto superior esquerdo, você pode maximizar esta área.

Paleta: Localizada à direita, temos as 16 cores que você pode utilizar no game.
Note que por padrão a primeira cor é transparente. Isso pode ser modificado via programação, chamando a seguinte função PALT(COL, T), onde COL é o número da cor e T é um valor booleano (TRUE ou FALSE) que define se a cor é transparente ou não.
Você pode mudar a transparência a qualquer momento da execução do game, mas eu recomento que escolha uma cor que nunca utilizará no game e deixe ela sempre transparente. Isto facilitará muito a organização do seu código, pois só precisará chamar o PALT uma vez, no _INIT.

Abaixo da paleta você vê 2 sliders, o primeiro é para o tamanho do pincel e o segundo é o tamanho da sprite ajustada. Arraste-os para mudar os valores.

As 8 bolinhas são flags. Não possuem nenhuma funcionalidade padrão, você pode utilizá-las como quiser. Clique para ativar/desativar cada uma.
Um uso comum é para marcar propriedades da sprite no mapa. Por exemplo, decidimos que toda tag que tiver a flag 3 ativada é obstáculo e então na programação utilizamos o comando FGET() para verificar as flags do objeto que estiver à frente do personagem para saber se podemos movimentá-lo ou não.

Em seguida temos as ferramentas de desenho:

• Lápis: Clique e arraste para adicionar pixels.
• Carimbo: Serve para colar o conteúdo que você tenha copiado (ctrl+c).
• Seleção: Se você quiser copiar uma área específica, utilize esta ferramenta para marcar a área desejada. Caso não haja nenhuma área selecionada, a sprite inteira será copiada.
• Mão: Clique e arraste para mover a área de pintura.
• Galão de tinta: Preenche toda a área com a mesma cor.

Ao lado das ferramentas você pode ver a sprite em tamanho real e seu número (que você utilizará no comando SPR() para exibí-la no jogo)

Finalmente, temos a cartela de sprites dividida em 4 abas. Clique para selecionar a sprite.
Lembre-se que a primeira sprite (número 0) é sempre considerada vazia no mapa, por isso nós normalmente a deixamos em branco.

Editor de Mapa

As ferramentas do editor de mapa são praticamente as mesmas do editor gráfico. A única diferença é que estamos adicionando sprites em vez de pixels.

Importante: Note que a memória das duas abas de sprite são compartilhadas com o mapa. Isso significa que se você desenhar uma sprite nestas abas, não poderá utilizar a área inferior do mapa e vice-versa.

Editor de Áudio

Existem dois modos para a edição de áudio: tom e sequenciador. Você pode alternar entre eles utilizando os ícones no canto superior esquerdo.

Você não precisa ficar apenas em um modo. É possível mudar de modo a qualquer momento sem perder suas alterações. Eu normalmente começo no modo de tom e depois passo para o sequenciador para fazer os ajustes finos.

Talvez seja um pouco difícil de entender as funcionalidades da ferramenta de som apenas lendo um artigo em texto. Então, recomendo que dê uma olhada nessa playlist de tutoriais sobre o editor de áudio. É em inglês, mas acredito que em conjunto com as informações que passo aqui, você conseguirá ter uma boa idéia de como o editor funciona.

Modo de tom

Este modo é bem fácil de usar, pois você consegue fazer tudo com o mouse. Vamos ver o que cada elemento da tela faz.

Logo abaixo dos ícones de seleção de modo, está o seletor de som. Utilize as setas para mudar o número do som que você quer editar. É esse número que você utilizará para iniciar o som via programação (SFX(3) tocará o som número 3)
Você pode criar até 64 sons por cartucho.

À direita do seletor de som, temos o campo SPD onde você define a velocidade do som. Clique no número para aumentar o valor ou com o botão direito para diminuir. Você também pode clicar e arrastar o número para mudar o valor.

O nome SPD (speed = velocidade) confunde um pouco pois o que ele indica na verdade é a duração de cada nota, então quanto maior o número, mais lento é o som.

O campo LOOP é bem óbvio. Os números indicam o início e o fim do loop. Isto é mais útil para sons que serão utilizados nas músicas.
Caso você utilize um som com loop no game, ele continuará tocando até que você mande parar com SFX(-1)

Logo abaixo você vê vários botões com linhas brancas, é com eles que você escolhe o formato de onda do sintetizador.
A melhor forma de entender a diferença entre eles é experimentando cada um. Uma forma fácil de testar os formatos é clicar nos botões segurando a tecla Shift para alterar todas as notas do som.

A área que ocupa a maior parte da tela é o :PITCH, onde você utiliza o mouse para criar uma espécie de gráfico de barras.
As barras indicam cada nota do som e são tocadas em sequencia da esquerda para a direita. Quanto mais alta a barra, mais aguda é a nota.

Por fim, a área :VOLUME é onde você muda o volume de cada nota. Cada barra de volume é referente a uma barra do pitch horizontalmente.

Para testar o som criado, aperte a barra de espaço.

Modo sequenciador

O sequenciador é um pouco mais complexo de ser utilizado pois necessita também o uso do teclado (o de computador mesmo, não o musical), mas ele te dá mais controle sobre a produção do som.

Na área superior, temos alguns elementos em comum com o modo de tom. Além deles, temos:

• OCT: Seletor para a oitava da nota.
• VOL: Volume da nota.
• Botões roxos: Neles você muda o efeito da nota.

Agora vamos à parte principal deste modo, o sequenciador. É esta área grande formada por quatro colunas.
Dentro das colunas, cada linha representa uma nota. A reprodução das notas segue a leitura ocidental, ou seja:

• Inicia pelo canto superior esquerdo
• Lê cada linha de cima para baixo dentro da coluna
• Após a última linha da coluna, passa-se para a próxima coluna da esquerda para a direita

Cada nota é representada por uma letra e quatro números, podendo haver um # se a nota for sustenida (meio tom acima). Vamos entender melhor o que cada valor significa utilizando a primeira nota vista na imagem acima (C 3045). Repare que cada parte possui uma cor diferente:

• Branco: tom — Vai de A (Lá) a F (Sol). Neste exemplo, a nota é Dó ©.
• Cinza: oitava — Neste exemplo estamos na oitava 3. O valor está destacado em amarelo porque é onde está o cursor de edição, mas isto não afeta o som da nota.
• Rosa: formato da onda — Seguindo a mesma ordem dos botões, iniciando por 0. Neste exemplo, 0, estamos utilizando a onda triangular.
• Azul: volume — É o volume da nota, não tem muito o que explicar.
• Roxo: efeito — Como acontece com o formato de onda, o número segue a ordem dos botões. No exemplo estamos utilizando o efeito Fade Out (5).

Quando quiser adicionar ou modificar uma nota, mova o cursor amarelo até a posição desejada utilizando as setas do teclado ou clicando com o mouse.
Para alterar o tom, utilize as teclas q2w3er5t6y7ui zsxdcvgbhnjm seguindo o layout de um teclado musical.
Já para os valores numéricos é mais simples, apenas aperte o número que deseja no teclado.

Editor Musical

À primeira vista, esta tela é muito semelhante ao modo sequenciador do editor de áudio, mas a funcionalidade é bem mais simples.

As músicas são compostas basicamente por sequências de blocos, ou patterns (a tradução seria padrões, mas acho que faz mais sentido chamar de bloco). Cada bloco pode ter até 4 canais, onde cada canal reproduz um som que foi criado no editor de áudio.

Vamos tirar um obstáculo da frente, a maior parte da tela, as quatro colunas de notas são apenas visualizadores, você utiliza apenas os elementos da parte superior. Eu demorei um bom tempo para entender que a maior parte da criação de músicas é feita no editor de áudio.

Sim, é confuso, mas vamos lá. Utilizando o modo sequenciador com um SPD mais alto, você consegue criar uma trilha musical. Juntando até quatro trilhas, você monta os blocos que compõem a música.
Reparou que em um som você pode ter 32 notas? Então, nele cabe perfeitamente um compasso 4/4 onde cada nota seria uma fusa ou algo parecido (não entendo muito de teoria musical). Mas o que precisamos entender é que cada som criado é robusto o suficiente para caber uma trilha inteira.

Vamos para a descrição dos elementos da interface. Na primeira linha, ao centro, temos o seletor de bloco (pattern). Cada número representa um bloco e as setas rosas são para rolar a lista.

Logo à direita temos 3 ícones. Eles são utilizados para controlar o loop da música. Por padrão, ao final de cada bloco o próximo é tocado automaticamente. Clique em cada um dos ícones para ativar ou desativá-lo. Suas funcionalidades são, respectivamente:

• Início de loop
• Fim de loop
• Parar

Vamos considerar como exemplo uma música composta por 4 blocos, 00, 01, 02 e 03.
No bloco 02 vamos ativar o início de loop.
No bloco 03 vamos ativar o fim de loop.

Se iniciarmos a música pelo bloco 00 (utilizando o comando MUSIC(0) na programação), a sequência tocada será:
00, 01, 02, 03, 02, 03, 02, 03, ... infinitamente, até que o jogo acabe, outra música seja tocada ou o comando MUSIC(-1) (que pára qualquer música) seja executado.

O último ícone indica o fim da música. Para quando você quiser fazer uma sequência sem loop.

Logo abaixo temos 4 quadradinhos, eles são para você ativar/desativar cada um dos canais. Quando ativado, você pode escolher qual som irá tocar naquele canal. E é assim que você monta a música, juntando até 4 sons em blocos e definindo os pontos de loop. Simples, né?

Eu sei que não 😓.

Essa é a parte que considero mais difícil do PICO-8, e exige um bom conhecimento técnico para conseguir fazer algo com qualidade aceitável. Por sorte, alguns compositores disponibilizam suas criações para que outros desenvolvedores possam utilizá-las em seus jogos (lembre-se de dar os créditos).

A playlist que eu linkei no tópico acima, também possui um vídeo sobre o editor musical. Recomendo assistir.

Publicando seu game

Utilize o comando SAVE MEUJOGO.PNG para exportar o cartucho. Para quem não possui o PICO-8 o cartucho é uma imagem png comum, mas se o arquivo for aberto no aplicativo todo o game está lá!

Para disponibilizar seu game para que o público possa jogar sem ter que comprar o PICO-8, jeito mais fácil é postando no fórum da lexaloffle.
Lá você só precisa incluir o png do cartucho ao criar um tópico que o player HTML será incluído no post e o game poderá ser jogado no navegador.

Você também pode gerar a versão HTML do jogo e subir para seu próprio servidor.
Utilize o comando EXPORT MEUJOGO.HTML para gerar os arquivos html e js. Você precisa hospedar os dois arquivos para que o jogo funcione.

Para onde seguir agora

Como eu disse no começo do artigo, infelizmente não há muito conteúdo sobre PICO-8 em português.
Se inglês não é problema para você, segue abaixo alguns links úteis para ampliar seu conhecimento na ferramenta:

Fórum — Um ótimo lugar para tirar dúvidas e conhecer o trabalho de outros desenvolvedores.

PicoZine — Uma revistinha com artigos, tutoriais e dicas. Disponível para download no modelo “Quer pagar quanto?”. Pode ser grátis, mas dê uma forcinha aos criadores se puder 😉.

Twitter — alguns usuários que postam sobre PICO-8:

Cheat Sheet — Uma lista de consulta rápida para as principais funcionalidades do PICO-8

Conclusão

Agora que você conhece um pouco melhor as ferramentas de edição do PICO-8, está pronto para se aventurar na criação dos seus próprios joguinhos.

Eu mencionei que pretendo criar um tutorial passo-a-passo para fazer um game básico, mas não fique parado esperando. Comece a fuçar nas demos, tente dar vida a suas próprias criações, erre e aprenda com os erros. É assim que você vai evoluir como desenvolvedor.

Espero que o tutorial tenha sido útil. Fique à vontade para mandar dúvidas para @vNaka. Eu não sou um grande especialista, mas tentarei ajudar como puder. Estamos aprendendo juntos 😁.

Originally published at vnakamura.com on April 12, 2017.