Pular para o conteúdo
Jogos Digitais
Nesta página
  1. Objetivos de aprendizagem
  2. Pré-requisitos
  3. Materiais
  4. Conceitos
  5. Exemplos
  6. Tutorial passo a passo
  7. Imagens
  8. Indicação da interface
  9. O código completo
  10. Explicação do código
  11. Resultado esperado
  12. Problemas comuns
  13. Exercício guiado
  14. Desafio individual
  15. Desafio avançado (opcional)
  16. Critérios de avaliação
  17. Checklist de conclusão
  18. Extensão

Módulo 5 · Aula 5.5 · Blocos de cenário (tilesets)

Carga horáriaDificuldadeFerramentaCompetências
8 h/a⭐⭐Piskel (piskelapp.com) e GDevelop 5C3, C4

Objetivos de aprendizagem

  1. Explicar o que é um tileset e por que ele economiza trabalho.
  2. Desenhar um bloco que se repete sem emenda aparente.
  3. Fazer as peças de borda (esquerda, meio, direita) de um chão e de uma plataforma.
  4. Montar um trecho de fase só com blocos.

Pré-requisitos

Aulas 5.1 e 5.2. Aula 4.1 (Sprite em Grade).

Materiais

Computador com navegador e GDevelop; exemplos/tileset-serra.png e exemplos/tileset-montado.png; papel quadriculado.

Conceitos

Bloco (tile). Um quadradinho de cenário, como um azulejo. Com poucos blocos se monta uma fase inteira, do mesmo jeito que poucos tipos de azulejo cobrem uma parede.

Tileset. O conjunto de blocos de um cenário, geralmente numa imagem só. O tileset-serra.png tem 8 blocos de 32 × 32 (desenhados em 16 × 16): capim esquerda, capim meio, capim direita, terra, tábua esquerda, tábua meio, tábua direita, pedra.

Sem emenda. Para o bloco do meio se repetir sem aparecer "costura", a coluna da esquerda dele precisa combinar com a coluna da direita. Teste: coloque três cópias lado a lado e procure a linha onde uma termina.

Bordas. O meio se repete; as pontas fecham. Por isso há esquerda, meio e direita. A ponta tem um contorno do lado de fora e o canto de cima "comido" por 1 pixel transparente, para não ficar quadradão.

Evitar repetição chata. Pontinhos espalhados de forma irregular (não em fileira) escondem a repetição. Um segundo bloco de meio, um pouco diferente, ajuda mais ainda.

No GDevelop. A Trilha usa Sprite em Grade com chao.png (32 × 64): ele repete o bloco do meio. Pontas viram objetos Sprite separados, colocados no começo e no fim de cada trecho.

Exemplos

  • exemplos/tileset-serra.png: os 8 blocos.
  • exemplos/tileset-montado.png: um pedaço de fase com dois trechos de chão, duas plataformas de tábua e pedras, montado só com esses blocos.

Tutorial passo a passo

Parte A. Planejar (40 min)

  1. Olhe o tileset montado e conte quantas vezes cada bloco aparece.
  2. No papel, faça a lista de blocos do seu cenário (mínimo: chão meio, chão esquerda, chão direita, plataforma meio).

Parte B. O bloco do meio (90 min)

  1. No Piskel, RESIZE 16 × 16. Desenhe a terra com pontinhos irregulares e a faixa de capim em cima.
  2. Teste a emenda: EXPORT → PNG com escala 2, coloque num Sprite em Grade do GDevelop e estique para 320 × 32. Procure a costura.
  3. Corrija as colunas das bordas até sumir a costura.

Parte C. As pontas (90 min)

  1. Duplique o quadro do meio (cada bloco pode ser um quadro do mesmo .piskel).
  2. No quadro novo, desenhe a borda esquerda: contorno na coluna da esquerda, canto de cima transparente.
  3. Repita para a direita (dica: Flip horizontally na cópia da esquerda e depois ajuste a luz, que continua vindo da esquerda).
  4. Faça a plataforma (meio e pontas) em outros quadros.

Parte D. Montar (60 min)

  1. EXPORT → Zip → escala 2: um PNG por bloco.
  2. No GDevelop, numa cena de teste: meio como Sprite em Grade com Plataforma; pontas como Sprite com Plataforma. Monte um trecho igual ao tileset-montado.png.

Imagens

  • exemplos/tileset-serra.png.
  • exemplos/tileset-montado.png.

Indicação da interface

ItemOnde fica
Vários blocos num .piskelum quadro para cada bloco, na coluna de quadros
Exportar um PNG por blocoEXPORT → Zip
Sprite em GradeGDevelop, Novo objeto, logo abaixo de Sprite

O código completo

Nenhum evento novo; só objetos e comportamento Plataforma.

Explicação do código

Um bloco que se repete é como um laço: o Sprite em Grade "repete" a imagem quantas vezes couber na largura. As pontas são o "antes" e o "depois" do laço.

Resultado esperado

Chão e plataforma com pontas fechadas, sem costura visível quando o meio é esticado, colocados numa cena do GDevelop.

Problemas comuns

SintomaCausaSolução
Linha vertical a cada blococolunas das bordas não combinamredesenhar a primeira e a última coluna
Padrão repetido "grita"pontinhos em fileiraespalhar de forma irregular
Faixas de capim repetidas no chãoSprite em Grade mais alto que a imagemaltura igual à imagem (Aula 4.1)
Ponta flutuandoponta sem Plataforma ou fora da gradeencaixar a posição em múltiplos de 32

Exercício guiado

Um trecho de chão de 640 px com blocos de 32 px usa quantos blocos de meio, se as duas pontas também têm 32? (Resposta: 640 ÷ 32 = 20 blocos ao todo; 18 de meio e 2 pontas.)

Desafio individual

Crie um segundo bloco de meio (com uma flor de mandacaru ou uma pedrinha) e alterne os dois numa fase.

Desafio avançado (opcional)

O GDevelop tem objetos próprios para mapas de blocos (pesquise "tilemap" na janela Novo objeto). Investigue se dá para usar o seu tileset com um deles e registre o que descobriu. Este caminho não foi testado no curso.

Critérios de avaliação

  • Bloco de meio sem costura.
  • Pontas e plataforma no mesmo estilo.
  • Trecho montado no GDevelop.

Checklist de conclusão

Extensão

Matemática: azulejos e mosaicos (pavimentações do plano). Que formas cobrem uma parede sem deixar buraco? Por que quadrados são a escolha mais simples para jogos?