Criação de jogos simples

Introdução

Esta UC introduz a criação de jogos digitais simples numa perspectiva de designer-developer multimédia. O objectivo não é dominar uma engine em 25h, mas perceber as regras fundamentais que fazem um jogo funcionar — para depois saber escolher ferramenta e iterar.

Vamos do conceito (o que é um jogo, géneros, mecânicas) à implementação (loop, sprites, som, colisões) e ao polimento (game feel, playtesting, publicação).

1. O que é um jogo

1.1 Definição prática

Um jogo é um sistema onde o jogador: 1. Toma decisões significativas. 2. Segue regras claras. 3. Persegue um objectivo. 4. Recebe feedback imediato.

Falta um destes → não é jogo: - Sem objectivo → brinquedo (Minecraft Creative é um caso intencional: os jogadores inventam objectivos). - Sem decisões → animação interactiva. - Sem regras → playground caótico. - Sem feedback → folha de Excel.

1.2 MDA (Mechanics, Dynamics, Aesthetics)

Modelo clássico de design (Hunicke et al., 2004):

• Mechanics — regras concretas, ações, sistemas (saltar, atirar, virar carta).
• Dynamics — comportamentos que emergem quando jogadores usam as mecânicas (criar estratégias, padrões).
• Aesthetics — emoções/sensações que o jogador experiencia.

O designer projecta mecânicas; os jogadores vivem aesthetics.

8 aesthetics típicas (LeBlanc): sensation (sentidos), fantasy (imaginar), narrative (história), challenge (desafio), fellowship (social), discovery (explorar), expression (criar), submission (passatempo).

1.3 O verbo do jogador

Cada bom jogo resume-se num verbo principal:

Quando começas, define um verbo e gasta 80% do tempo a fazê-lo divertido. Mecânicas secundárias vêm depois.

2. Géneros e mecânicas

2.1 Géneros para começar

Para projecto da UC: puzzle, plataformas 2D simples, ou clicker com twist.

2.2 Mecânicas vs sistemas

• Mecânica — uma ação atómica (saltar, virar uma carta).
• Sistema — interação entre mecânicas e estado (saltar + plataforma + gravidade + inimigo).

Foco numa mecânica principal + 2-3 sistemas. Mais que isso explode a complexidade.

2.3 Onda de complexidade

Mecânica   →  Sistema     → Jogo
─────────────────────────────────
saltar     +  plataforma  +  recolher moedas
saltar     +  inimigo     +  perder vida
saltar     +  porta+chave +  progredir

Combinando 1 mecânica com 3-5 elementos, tens um jogo simples e coerente.

3. Loop de jogo

3.1 O coração técnico

while (jogo a correr):
    input  = ler_inputs()
    estado = update(estado, input, dt)
    render(estado)
    esperar_proximo_frame()

60 FPS = 16.6 ms por frame. Se demorares mais, o jogo "engasga".

3.2 Delta time

// mau
posicaoX += 5;  // depende do FPS

// bom
posicaoX += velocidade * dt;  // independente

dt = segundos desde o último frame. Multiplica tudo que muda com o tempo (movimento, animação, cooldowns) por dt.

3.3 State machine

Os estados típicos:

[Splash] → [Menu]
            ↓
         [Jogar] ↔ [Pausa]
            ↓
         [Game over] → [Menu]

Cada estado: - Tem inputs próprios que aceita. - Renderiza coisas diferentes. - Transita por evento explícito.

Sem state machine → variáveis booleanas a explodir (isPaused && !isGameOver && isInMenu).

3.4 Fixed update vs variable update

Engines costumam separar: - _process(dt) — chamado a cada frame (render). - _physics_process(dt) — chamado a 60 Hz fixo (física, colisões).

Para movimento físico, usa o fixo. Para animação visual, o variável.

4. Sprites e arte

4.1 Sprite básico

PNG transparente. Conceitos:

• Anchor / pivot — ponto de origem (0,0 do sprite). Define rotação/escala.
• Hitbox — caixa de colisão (≠ sprite visual).
• Layers — fundo, jogador, inimigos, UI desenhados em ordem.

4.2 Sprite sheet

Várias frames numa única imagem:

[walk1][walk2][walk3][walk4]
[jump1][jump2][hurt1][die1 ]

O motor lê coordenadas (x, y, w, h) e mostra a frame certa. Vantagem: 1 ficheiro, draw calls reduzidas.

4.3 Pixel art

• Múltiplos de 8/16/32 px para o sprite.
• Desligar interpolação (filtro nearest neighbour) — sem isto, parece "desfocado".
• Paleta limitada (16-32 cores) dá coerência.
• Ferramentas: Aseprite (referência), LibreSprite (fork grátis), Krita, GIMP.

4.4 Animação por frames

Tens 4 frames de andar → loop:

walk_01 → walk_02 → walk_03 → walk_04 → walk_01...

• 8-12 fps para personagens humanas (não 60).
• Animações curtas para começar: idle, walk, jump, hurt, die.
• 1-2 frames para idle chega; movimento subtil (respiração).

4.5 Onde arranjar arte

• Kenney.nl — packs gratuitos enormes, CC0.
• OpenGameArt.org — comunidade.
• itch.io — bundles baratos.
• Crocotile, Tiled — tilemaps.
• Mixamo — animação 3D (se evoluíres).

Para 1ª iteração: assets prontos. Faz a tua arte depois de o jogo já funcionar.

5. Som

5.1 Música e SFX

• Música — loop 30-90s, MP3 128 kbps ou OGG. Baixo volume (não tapar SFX).
• SFX — eventos discretos (saltar, moeda, dano, vitória). WAV ou OGG curtos (< 2s).
• Variantes — 3 versões ligeiramente diferentes do som de salto evitam fadiga auditiva.

5.2 Gerar SFX

Sem ter de gravar: - bfxr.net — gerador clássico estilo NES (saltos, lasers, moedas). - sfxr.me — versão simples. - Chiptone — controlos modernos.

Para projecto inicial, bfxr chega.

5.3 Onde arranjar música

• freesound.org — biblioteca enorme (verifica licença CC).
• Incompetech.com — Kevin MacLeod, royalty free com atribuição.
• YouTube Audio Library — grátis.
• OpenGameArt.org — música + SFX.

5.4 Acessibilidade auditiva

• Sons importantes têm sempre uma pista visual alternativa (não só "ouviste o inimigo").
• Volume separado (música/SFX/UI) configurável.
• Sem autoplay alto no início.

6. Física e colisões

6.1 Movimento básico

velocidadeX = direcao * VELOCIDADE
velocidadeY += GRAVIDADE * dt
posicao += velocidade * dt

6.2 Saltar

se on_floor() and tecla_saltar:
    velocidadeY = -400   // negativo porque Y aponta para baixo no ecrã

Truques para "salto bom": - Coyote time — permite saltar até 0.1s depois de sair da plataforma. - Jump buffer — se carregaste no botão até 0.1s antes de aterrar, salta no momento certo. - Salto variável — soltar o botão a meio = salto curto; manter = alto.

Estes 3 truques fazem o platformer parecer profissional.

6.3 Colisões

AABB (Axis-Aligned Bounding Box) — caixas alinhadas:

function colide(a, b) {
  return a.x < b.x + b.w &&
         a.x + a.w > b.x &&
         a.y < b.y + b.h &&
         a.y + a.h > b.y;
}

Resposta: quando colide, separar (mover o personagem para fora da parede) e reagir (perder vida, abrir porta).

6.4 Layers / collision masks

Em Godot/Unity defines bits: - Layer 1 = jogador - Layer 2 = inimigos - Layer 3 = balas - Layer 4 = chão

Bala (3) colide com inimigo (2) mas não com bala (3). Configurar a matriz de colisões evita bugs.

7. Ferramentas

7.1 Construct 3 — sem código

Visual blocks no browser. Bom para: - Quem não programa. - Prototipagem muito rápida. - Exportar HTML5 / mobile.

Limite: aprender as boas práticas de eventos para não fazer "esparguete visual".

7.2 Godot 4 — recomendado

Open source, gratuito, leve, comunidade grande. GDScript é parecido com Python.

Esqueleto de movimento de plataforma:

extends CharacterBody2D

const SPEED = 200.0
const JUMP_VELOCITY = -400.0

func _physics_process(delta):
    if not is_on_floor():
        velocity.y += 980 * delta  # gravidade

    var direction = Input.get_axis("ui_left", "ui_right")
    velocity.x = direction * SPEED

    if Input.is_action_just_pressed("ui_accept") and is_on_floor():
        velocity.y = JUMP_VELOCITY

    move_and_slide()

7.3 p5.js — web rápido

Bom para esboços e jogos web simples.

let player = { x: 200, y: 300, vy: 0 };
const GRAV = 0.5, JUMP = -12, FLOOR = 350;

function setup() { createCanvas(400, 400); }

function draw() {
  background(50);
  // física
  player.vy += GRAV;
  player.y += player.vy;
  if (player.y > FLOOR) { player.y = FLOOR; player.vy = 0; }
  // controlos
  if (keyIsDown(LEFT_ARROW))  player.x -= 4;
  if (keyIsDown(RIGHT_ARROW)) player.x += 4;
  // desenho
  fill(200, 60, 80);
  rect(player.x, player.y, 30, 40);
}

function keyPressed() {
  if (key === ' ' && player.y >= FLOOR) player.vy = JUMP;
}

7.4 Phaser, GameMaker, Unity

• Phaser — JS, HTML5, bom para mobile/web; mais código que p5.
• GameMaker — comercial, 2D excelente; usado em Hotline Miami, Undertale.
• Unity — gigante; overkill para começar; C#.

8. Game feel — o invisível

Pequenas decisões que fazem grande diferença:

• Resposta imediata ao input (sem delay perceptível).
• Squash & stretch no salto/aterragem.
• Screen shake ao receber dano ou explosão (curto, ~0.1s).
• Hitstop / freeze frame — congelar 1-2 frames ao atingir inimigo.
• Partículas ao saltar, aterrar, atirar.
• Sons sincronizados com eventos.
• Cores piscam quando ferido.

Vê o vídeo "Juice it or lose it" (Martin Jonasson & Petri Purho) — o mesmo jogo com e sem polimento.

9. Onboarding e dificuldade

9.1 Primeiros 30 segundos

• Mostra a mecânica principal logo no primeiro ecrã.
• Ensina pela ação, não por texto.
• 1 conceito de cada vez.
• Recompensa cedo (1ª moeda em 10 segundos).

Mario 1-1 ainda hoje é estudado: ensina sem 1 linha de texto.

9.2 Curva de dificuldade

dificuldade
    │       ╱╲         ╱╲
    │    ╱╲╱  ╲     ╱╲╱  ╲
    │ ╱╲╱      ╲ ╱╲╱      ╲
    │╱          v          ╲
    └──────────────────────────
                              tempo

Subir gradualmente, com picos (bosses) e vales (recuperação). Sem variação = aborrecimento ou frustração.

9.3 Flow

Flow (Csíkszentmihályi) = zona entre demasiado fácil e demasiado difícil, em que se perde a noção do tempo. Caçar o flow é o trabalho do level design.

10. Playtesting

10.1 Como

• 1-2 sessões por semana, mesmo em alfa.
• Não explicar antes — vê se o jogo se ensina sozinho.
• Observar mãos e cara, não só o ecrã.
• Gravar (com autorização).
• Não-leading question: "O que querias fazer agora?" / "Achavas que ia acontecer o quê?".

10.2 O que medir

• Tempo até morrer pela primeira vez.
• Tempo até passar o tutorial.
• Pontos de frustração — onde repete sem progredir.
• Pontos de aborrecimento — onde acelera/salta.
• Comentários espontâneos — "fixe!" / "que chatice!".

10.3 Iterar

Após cada sessão: 3 problemas, 1 solução por cada. Não tentar mudar tudo. Voltar a testar.

11. Acessibilidade em jogos

Inspiração: Celeste, The Last of Us Part II.

• Remapeamento de controlos (botão direito ≠ "jogo todo").
• Modo daltonismo (cores configuráveis).
• Legendas com nome do orador, sons importantes ("explosão"), tamanho ajustável.
• Modos de assistência — invencibilidade, velocidade reduzida, skip de secções difíceis.
• Sem flashes ofensivos; aviso de epilepsia.
• Pausa em qualquer momento.
• Sons importantes têm indicação visual alternativa.

12. Publicação

12.1 itch.io

A plataforma indie por excelência: - Grátis ou pay-what-you-want. - Suporta HTML5 (web direto). - Comunidade enorme, game jams semanais. - Página personalizável.

12.2 Outras

• Newgrounds — clássica para Flash; hoje HTML5.
• Site próprio — embedar Godot/Phaser/p5 build.
• App Store / Google Play — taxa anual + 30% revenue share; mais barreira.
• Steam — 100 USD por jogo; mercado PC, exigente.

Para escolas e projetos pessoais: itch.io + site próprio chega para começar.

12.3 Game jams

Eventos de 48h-72h para criar um jogo a partir de um tema: - Global Game Jam (Janeiro, presencial mundial). - Ludum Dare (3× ao ano, online). - GMTK Jam (anual).

Excelente forma de aprender sob pressão e fazer portfolio.

13. Conclusão

Fazer um jogo pequeno e completo ensina mais do que começar um RPG épico nunca acabado. Scope baixo, polimento alto é a fórmula.

Esta UC liga-se às outras: arte (UC02236, UC02631), som (vai aparecer em vídeo), animação (UC02631), acessibilidade (UC02636), publicação web (UC02242, UC02634).

Apêndice A · Checklist de jogo "completo"

• [ ] Menu inicial com Jogar e Sair.
• [ ] Estado de pausa (Esc pausa).
• [ ] Game over com opção de reiniciar.
• [ ] Pontuação ou objectivo claro.
• [ ] Pelo menos 3 níveis ou variação de inimigos.
• [ ] Som ligado/desligado.
• [ ] Música + SFX principais.
• [ ] Animações idle + walk + jump + hurt.
• [ ] Onboarding pelos primeiros 30 s.
• [ ] Testado com 3+ pessoas.

Apêndice B · Recursos

• GDQuest — tutoriais Godot (YouTube + site).
• Game Maker's Toolkit (GMTK) — análise de design de jogos.
• Brackeys (arquivo) — tutoriais Unity.
• Daniel Shiffman — p5.js (Coding Train).
• Theory of Fun (Raph Koster).
• The Art of Game Design (Jesse Schell).
• Kenney.nl — assets CC0.
• itch.io/jams — game jams ativas.