Voltar para: Games com Phaser + Reactjs

(Loader, Preload, Cache, Organização de Assets)

Todo jogo é formado por recursos visuais e sonoros.
Imagens, personagens, músicas, efeitos sonoros, mapas e fontes são exemplos desses recursos.

Esses elementos são chamados de assets.

Para que um jogo funcione corretamente, todos os assets precisam ser carregados, organizados e armazenados de forma eficiente.

O Phaser possui um sistema completo para gerenciar isso através do Loader e do Cache.

Entender como esses sistemas funcionam é essencial para evitar:

erros de carregamento
arquivos duplicados
perda de desempenho
desorganização do projeto

🎯 Objetivos da Lição

Ao final desta aula o aluno será capaz de:

Entender o que são assets
Compreender como funciona o Loader
Entender o papel do Preload
Compreender o sistema de Cache
Aprender como organizar assets em projetos reais
Conhecer boas práticas de gerenciamento de recursos

🧠 O que são Assets

Assets são todos os arquivos externos utilizados pelo jogo.

Eles podem incluir:

imagens
sprites
spritesheets
sons
músicas
vídeos
fontes
mapas de fase

Esses arquivos não fazem parte do código em si, mas são carregados e utilizados pelo jogo durante a execução.

🎮 Exemplos de Assets em jogos

Um jogo simples pode ter:

Tipo	Exemplo
Imagem	personagem
Spritesheet	animação de corrida
Áudio	música de fundo
Efeito sonoro	pulo
Mapa	layout da fase

Esses elementos compõem a experiência visual e sonora do jogo.

⚙️ O sistema Loader

O Loader é o sistema responsável por carregar assets para dentro do jogo.

Antes que uma imagem ou som possa ser usado, ele precisa ser carregado pelo Loader.

Esse processo garante que:

o arquivo esteja disponível na memória
o jogo saiba onde encontrá-lo
o recurso possa ser reutilizado

🧭 O papel do método Preload

No ciclo de vida das Scenes do Phaser, existe um método específico para carregar assets:

preload()

Esse método é executado antes da criação dos objetos da cena.

Fluxo simplificado:

init()
 ↓
preload()  ← carregamento de assets
 ↓
create()
 ↓
update()

Isso garante que todos os recursos estejam disponíveis quando o jogo começar.

📦 Tipos de assets que podem ser carregados

O Phaser suporta muitos tipos de arquivos.

Imagens

Imagens simples usadas para personagens ou objetos.

Exemplo conceitual:

player.png
enemy.png
background.png

Spritesheets

Spritesheets são imagens que contêm vários frames de animação.

Exemplo:

player-run.png

Esse tipo de asset permite criar animações suaves.

Áudio

Arquivos de som podem incluir:

música de fundo
efeitos sonoros
vozes

Exemplo:

jump.wav
explosion.mp3
theme.mp3

Atlas de textura

Um Texture Atlas agrupa várias imagens em um único arquivo.

Isso reduz chamadas de renderização e melhora a performance.

Esse método é muito usado em jogos profissionais.

🧠 O que é Cache

Depois que um asset é carregado, ele não precisa ser carregado novamente.

O Phaser armazena esses arquivos em um sistema chamado Cache.

O cache funciona como uma biblioteca interna do jogo.

📚 Como o Cache funciona

Fluxo simplificado:

arquivo carregado
       ↓
armazenado no cache
       ↓
acessado pelo jogo

Isso significa que:

a imagem é carregada apenas uma vez
pode ser reutilizada várias vezes

🎮 Exemplo conceitual

Imagine que o jogo possui um personagem.

Esse personagem pode aparecer:

no menu
no gameplay
na tela de vitória

Sem cache, a imagem teria que ser carregada várias vezes.

Com cache, ela é carregada uma única vez.

⚡ Benefícios do Cache

O uso de cache traz várias vantagens:

✔ melhora performance
✔ reduz uso de rede
✔ evita duplicação de recursos
✔ acelera carregamento de cenas

🧩 Organização de Assets no Projeto

Em projetos pequenos, assets podem ser poucos.

Mas jogos maiores podem ter centenas ou milhares de arquivos.

Por isso, organização é essencial.

📂 Estrutura comum de assets

Projetos Phaser geralmente utilizam uma pasta dedicada.

Exemplo:

assets
 ├── images
 │   ├── player.png
 │   ├── enemy.png
 │   └── background.png
 │
 ├── spritesheets
 │   └── player-run.png
 │
 ├── audio
 │   ├── jump.wav
 │   └── music.mp3
 │
 └── fonts

Essa estrutura ajuda a manter o projeto organizado.

🧠 Nomeação de Assets

Uma boa convenção de nomes ajuda muito no desenvolvimento.

Exemplo de padrão:

player_idle.png
player_run.png
enemy_slime.png
enemy_boss.png

Evite nomes genéricos como:

image1.png
sprite.png
file.png

Esses nomes tornam o projeto confuso.

🎮 Assets e desempenho

Carregar muitos assets ao mesmo tempo pode causar:

telas de carregamento longas
travamentos iniciais

Por isso jogos geralmente utilizam:

telas de loading
carregamento progressivo
divisão de assets por fase

📊 Estratégia comum de carregamento

Uma estratégia comum é dividir assets em etapas.

Boot Scene

Carrega apenas recursos essenciais.

Exemplo:

logo do jogo
barra de loading

Loading Scene

Carrega todos os assets principais.

Exemplo:

sprites
sons
mapas

Gameplay Scene

Utiliza os assets que já estão carregados.

🎮 Exemplo real de uso de muitos assets

Jogos grandes possuem milhares de recursos.

Um exemplo famoso é:

Terraria

Esse jogo possui:

centenas de inimigos
milhares de itens
muitos sprites

Sem um bom sistema de gerenciamento de assets, seria impossível manter o projeto organizado.

⚠️ Erros comuns ao gerenciar assets

Alguns problemas aparecem frequentemente em projetos iniciantes.

Carregar assets em várias cenas

Isso causa:

duplicação
aumento do tempo de carregamento

Não organizar pastas

Arquivos acabam espalhados pelo projeto.

Usar nomes confusos

Dificulta manutenção do código.

🧠 Boas práticas

✔ carregar assets em uma cena específica
✔ usar nomes claros e consistentes
✔ separar assets por tipo
✔ reutilizar assets via cache
✔ evitar duplicação de arquivos

🎮 Fluxo completo de gerenciamento de assets

Um fluxo típico em jogos Phaser funciona assim:

Boot Scene
 ↓
Loading Scene
 ↓
Assets carregados
 ↓
Armazenados no Cache
 ↓
Scenes utilizam os assets

🧠 Conceitos fixados

Após esta aula o aluno compreende:

o que são assets
como funciona o Loader
o papel do preload
como o cache armazena recursos
como organizar assets em projetos reais

Esses conhecimentos são essenciais para qualquer jogo.

🎓 Conclusão

Assets são os elementos que dão vida ao jogo.

Imagens, animações, sons e mapas compõem a experiência do jogador.

O Phaser fornece ferramentas poderosas para gerenciar esses recursos através do:

Loader
Preload
Cache

Quando bem organizados, os assets permitem que o jogo seja mais rápido, mais estável e mais fácil de manter.