iFractions-utilitarios/Carregando midia para cache

Por que carregar arquivos de midia para o cache

O iFractions utiliza imagens, audios e arquivos de idioma durante a execucao. Assim, e necessario que antes que qualquer um desses elementos sejam chamados no codigo exista uma garantia de que estes estejam carregados no cache.

Levando em consideracao que o iFractions eh um aplicativo de pagina unica (single page application), uma "mudanca de tela" dentro do jogo na verdade corresponde a desenhar novos elementos graficos no Canvas (HTML), sobrescrevendo a tela anterior.

Dessa forma, diferente de uma aplicacao de varias paginas, onde a cada carregamento os elementos de midia ficam prontos antes do codigo executar, ele utiliza chamadas assincronas tanto para carregar os arquivos base necessarios no inicio do programa, como para carregar novos elementos durante a execucao.

Para isso, arquivos de idioma e audio sao carregados usando Fetch API e imagens usando HTMLImageElement, ambos nativos do Javascript.

O que voce vai encontrar nesse pacote

(Este pacote deve ser descarregado no servidor local)

Ele contem um arquivo index.html que apresenta uma aplicacao de pagina unica onde voce pode carregar dinamicamente e utilizar os seguintes tipos de midia:

• imagem
• audio
• arquivos de idioma

Obs.: um elemento so pode ser usado se tiver sido anteriormente carregado no cache.

Carregando e usando imagens

Em: carregandoImagem.js

funcao	nome
carregamento	loadImages()
uso	drawImages()

usa HTMLImageElement

Carregando e usando audio

Em: carregandoAudio.js

funcao	nome
carregamento	loadAudios()
uso	playAudio()

usa Fetch API

Carregando arquivos de idioma

Em: carregandoLinguagem.js

funcao	nome
carregamento	loadLangs()
uso	printLangs()

usa Fetch API

Sobre o formato dos arquivos de linguagem usados no ifractions

Os formato dos arquivos de idioma usados pelo iFractions (como pode ser visto aqui em /lang) seguem a seguinte estrutura:

• os arquivos nao possuem extensao
• seguem o padrao chave=traducao
• a quebra de linha indica fim da traducao

Assim, a funcao de tratamento de linguagem trata os arquivos que seguem essa formatacao.

Uso no iFractions

No iFractions, as funcoes de carregamento e uso estao definidas em /js/gameMechanics.js:

Carregamento:

• game.load.<tipo de midia>(<urls>)
  • Carrega arquivos no cache

Uso:

• game.add.image(<args>) e game.add.sprite(<args>)
  • adiciona imagem na tela
• game.audio.<nome>.play()
  • toca audio
• game.lang.<chave>
  • retorna frase associada a aquela chave na linguagem selecionada

Para cada estado, se for necessario, arquivos de midia sao carregados dentro da funcao preload(), para serem usados no resto do codigo. Essa funcao aguarda que tudo seja carregado antes de continuar o codigo.