Carregamento progressivo de assets para jogos web

Os jogadores não vão esperar por um download de 100 MB. Carregue os assets progressivamente para que possam jogar enquanto o restante é carregado em segundo plano.

1) A estratégia de carregamento

Divida os assets em categorias:

1. Críticos — Necessários para exibir a primeira tela (< 1 MB)
2. Jogabilidade — Necessários para jogar (< 10 MB)
3. Aprimoramentos — Opcionais (carregados em segundo plano)

2) Carregador básico de assets

class AssetLoader {
  constructor() {
    this.cache = new Map()
    this.loading = new Map()
  }
  
  async loadImage(url) {
    if (this.cache.has(url)) return this.cache.get(url)
    if (this.loading.has(url)) return this.loading.get(url)
    
    const promise = new Promise((resolve, reject) => {
      const img = new Image()
      img.onload = () => {
        this.cache.set(url, img)
        this.loading.delete(url)
        resolve(img)
      }
      img.onerror = reject
      img.src = url
    })
    
    this.loading.set(url, promise)
    return promise
  }
  
  async loadJSON(url) {
    if (this.cache.has(url)) return this.cache.get(url)
    
    const response = await fetch(url)
    const data = await response.json()
    this.cache.set(url, data)
    return data
  }
  
  async loadAudio(url, audioCtx) {
    if (this.cache.has(url)) return this.cache.get(url)
    
    const response = await fetch(url)
    const buffer = await response.arrayBuffer()
    const audioBuffer = await audioCtx.decodeAudioData(buffer)
    this.cache.set(url, audioBuffer)
    return audioBuffer
  }
}

3) Carregamento com progresso

async function loadWithProgress(url, onProgress) {
  const response = await fetch(url)
  const contentLength = response.headers.get('Content-Length')
  const total = parseInt(contentLength, 10)
  
  const reader = response.body.getReader()
  const chunks = []
  let received = 0
  
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    
    chunks.push(value)
    received += value.length
    onProgress(received / total)
  }
  
  const blob = new Blob(chunks)
  return blob
}

Atenção: quando o servidor comprime a resposta (com gzip ou brotli, como a maioria das CDNs faz por padrão), Content-Length representa o tamanho compactado, enquanto os blocos que você lê já estão descompactados. Isso faz com que received / total ultrapasse 100%. Para obter uma barra de progresso precisa em nível de bytes para respostas compactadas, sirva o asset sem compactação, envie um cabeçalho próprio com o tamanho descompactado ou use como alternativa o evento onprogress do XMLHttpRequest, que informa o progresso real da transferência.

4) Carregamento em lote com progresso geral

async function loadAssets(manifest, onProgress) {
  const total = manifest.length
  let completed = 0
  const results = {}
  
  const promises = manifest.map(async (item) => {
    const asset = await loadAsset(item.url, item.type)
    results[item.name] = asset
    completed++
    onProgress(completed / total, item.name)
  })
  
  await Promise.all(promises)
  return results
}

// Uso
const manifest = [
  { name: 'player', url: 'player.png', type: 'image' },
  { name: 'level1', url: 'level1.json', type: 'json' },
  { name: 'music', url: 'music.mp3', type: 'audio' },
]

const assets = await loadAssets(manifest, (progress, name) => {
  console.log(`Carregando: ${Math.round(progress * 100)}% (${name})`)
})

5) Carregador com fila de prioridade

class PriorityLoader {
  constructor(concurrency = 4) {
    this.queue = []
    this.active = 0
    this.concurrency = concurrency
  }
  
  add(url, priority = 0) {
    return new Promise((resolve, reject) => {
      this.queue.push({ url, priority, resolve, reject })
      this.queue.sort((a, b) => b.priority - a.priority)
      this.process()
    })
  }
  
  async process() {
    if (this.active >= this.concurrency || this.queue.length === 0) return
    
    this.active++
    const { url, resolve, reject } = this.queue.shift()
    
    try {
      const response = await fetch(url)
      const blob = await response.blob()
      resolve(blob)
    } catch (err) {
      reject(err)
    }
    
    this.active--
    this.process()
  }
}

// Uso
const loader = new PriorityLoader()
loader.add('critical.png', 10)  // Carregar primeiro
loader.add('optional.png', 1)   // Carregar depois

6) Carregamento sob demanda para fases

class LevelManager {
  constructor(loader) {
    this.loader = loader
    this.levels = new Map()
  }
  
  async preload(levelId) {
    if (this.levels.has(levelId)) return
    
    const manifest = await this.loader.loadJSON(`levels/${levelId}/manifest.json`)
    const assets = await this.loadLevelAssets(manifest)
    this.levels.set(levelId, { manifest, assets })
  }
  
  async loadLevelAssets(manifest) {
    // Carregar somente o necessário para esta fase
    const assets = {}
    
    for (const texture of manifest.textures) {
      assets[texture.name] = await this.loader.loadImage(texture.url)
    }
    
    return assets
  }
  
  unload(levelId) {
    this.levels.delete(levelId)
    // Os assets podem ser coletados pelo garbage collector
  }
}

7) Streaming de arquivos grandes

Para arquivos grandes (modelos 3D, áudio), faça o streaming e processe-os de forma incremental:

async function streamLargeFile(url, onChunk) {
  const response = await fetch(url)
  const reader = response.body.getReader()
  
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    onChunk(value)
  }
}

// Para áudio: use Media Source Extensions
// Para 3D: processe os dados da malha conforme chegam

8) Cache dos assets carregados

Combine com o IndexedDB para ter um cache persistente:

class CachedLoader {
  constructor() {
    this.memCache = new Map()
    this.dbName = 'AssetCache'
  }
  
  async loadImage(url) {
    // Verificar a memória
    if (this.memCache.has(url)) return this.memCache.get(url)
    
    // Verificar o IndexedDB
    const cached = await this.getFromDB(url)
    if (cached) {
      const img = await this.blobToImage(cached)
      this.memCache.set(url, img)
      return img
    }
    
    // Buscar e armazenar em cache
    const response = await fetch(url)
    const blob = await response.blob()
    await this.saveToDB(url, blob)
    
    const img = await this.blobToImage(blob)
    this.memCache.set(url, img)
    return img
  }
  
  blobToImage(blob) {
    return new Promise((resolve) => {
      const img = new Image()
      img.onload = () => {
        URL.revokeObjectURL(img.src)
        resolve(img)
      }
      img.src = URL.createObjectURL(blob)
    })
  }
  
  // Métodos do IndexedDB...
}

9) Padrão de tela de carregamento

class LoadingScreen {
  constructor(canvas) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.progress = 0
    this.message = 'Carregando...'
  }
  
  update(progress, message) {
    this.progress = progress
    this.message = message || this.message
    this.render()
  }
  
  render() {
    const { ctx, canvas } = this
    ctx.fillStyle = '#1a1a2e'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    // Barra de progresso
    const barWidth = canvas.width * 0.6
    const barHeight = 20
    const x = (canvas.width - barWidth) / 2
    const y = canvas.height / 2
    
    ctx.fillStyle = '#333'
    ctx.fillRect(x, y, barWidth, barHeight)
    
    ctx.fillStyle = '#4ade80'
    ctx.fillRect(x, y, barWidth * this.progress, barHeight)
    
    // Texto
    ctx.fillStyle = '#fff'
    ctx.font = '16px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText(this.message, canvas.width / 2, y - 20)
    ctx.fillText(`${Math.round(this.progress * 100)}%`, canvas.width / 2, y + 50)
  }
}

10) Boas práticas

• Mostre algo imediatamente — até mesmo uma imagem estática
• Carregue primeiro o que está visível — texturas da visualização atual
• Use placeholders — imagens de baixa resolução que são substituídas por versões melhores
• Pré-carregue a próxima fase — enquanto o jogador ainda está jogando
• Trate as falhas de forma adequada — lógica de novas tentativas e alternativas

async function loadWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fetch(url)
    } catch (err) {
      if (i === maxRetries - 1) throw err
      await new Promise(r => setTimeout(r, 1000 * (i + 1)))
    }
  }
}

Conteúdo relacionado

• Publique um jogo web que carregue rapidamente
• Service workers para cache de jogos
• Saves de jogos com IndexedDB
• Web Workers para a lógica do jogo — decodifique e processe assets fora da thread principal
• Onde encontrar assets gratuitos para jogos — fontes de modelos 3D, texturas e áudio para streaming

Recursos externos

• MDN: API Fetch — respostas por streaming e ReadableStream
• MDN: ReadableStream — processamento de blocos de dados transmitidos por streaming
• Especificação glTF 2.0 — o formato padrão para streaming de assets 3D