ソースを参照

criei README para raiz e para o pacote que carrega midia

laira 3 年 前
コミット
9c9bde8aa6

+ 83 - 0
Carregando midia para cache/README.md

@@ -0,0 +1,83 @@
+# 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.

+ 6 - 6
Carregando midia para cache/carregandoAudio.js

@@ -1,10 +1,5 @@
 // Carregando audios - fetch api e HTMLAudioElement
 
-let audios = []
-let audiosUrl = [
-  "audio/beep.mp3"
-];
-
 function loadAudios() {
   var init = {
     mode: "same-origin", // por padrão é "cors"
@@ -20,4 +15,9 @@ function loadAudios() {
 
 function playAudio() {
   audios[0].play();
-}
+}
+
+let audios = []
+let audiosUrl = [
+  "audio/beep.mp3"
+];

+ 5 - 6
Carregando midia para cache/carregandoImagem.js

@@ -1,11 +1,5 @@
 // carregando imagens - HTMLImageElement
 
-let images = [];
-let imagesUrl = [
-  "img/garage.png",
-  "img/house.png",
-];
-
 function loadImages() {
   imagesUrl.forEach((url) => {
     let img = new Image(); //HTMLImageElement
@@ -25,4 +19,9 @@ function drawImages() {
   });
 }
 
+let images = [];
+let imagesUrl = [
+  "img/garage.png",
+  "img/house.png",
+];
 

+ 13 - 16
Carregando midia para cache/carregandoLinguagem.js

@@ -1,17 +1,5 @@
 // Carregando idiomas - fetch API
 
-let idiomaEscolhido = 1;
-let idiomas = {};
-let idiomasURL = [
-  "lang/en_US",
-  "lang/pt_BR"
-];
-
-function escolherIdioma(idioma) {
-  if (idioma == "en_US") idiomaEscolhido = 0;
-  else if (idioma == "pt_BR") idiomaEscolhido = 1;
-}
-
 function loadLangs() {
   var init = {
     mode: "same-origin"
@@ -22,7 +10,7 @@ function loadLangs() {
     let msg = text.split("\n"); // quebra mensagem por linha
     msg.forEach((key) => {
       try {
-        let line = key.split("="); // divide antes e depois do =
+        let line = key.split("="); // divide em antes e depois do =
         let a = line[0], b = line[1];
         a = a.trim();
         b = b.trim();
@@ -35,9 +23,18 @@ function loadLangs() {
 }
 
 function printLangs() {
-  
   document.getElementById("texto").value = idiomas.loading + '\n' + idiomas["menu_back"];
-  
   console.log(idiomas);
+}
+
+function escolherIdioma(idioma) {
+  if (idioma == "en_US") idiomaEscolhido = 0;
+  else if (idioma == "pt_BR") idiomaEscolhido = 1;
+}
 
-}
+let idiomaEscolhido = 1;
+let idiomas = {};
+let idiomasURL = [
+  "lang/en_US",
+  "lang/pt_BR"
+];

+ 7 - 7
Carregando midia para cache/index.html

@@ -21,7 +21,7 @@
   <span>Por: Laira Almas [2020]</span>
   
   <p>
-    Arquivos de linguagem e audio usam Fetch API (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">documentação oficial</a>)<br>
+    Arquivos de linguagem e audio usam Fetch API (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">documentação oficial</a>)<br>
     Arquivos de imagem usam Image() (<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement">documentação oficial</a>)
   </p>
 
@@ -32,19 +32,19 @@
   <span>* Toda mídia precisa ser carregada antes de ser usada</span><br><br>
 
   Imagem:
-  <button onclick="loadImages()">Carregar</button>
+  <button onclick="loadImages()">Carregar no cache</button>
   <button onclick="drawImages()">Desenhar </button><br><br>
 
   Audio:
-  <button onclick="loadAudios()">Carregar</button>
+  <button onclick="loadAudios()">Carregar no cache</button>
   <button onclick="playAudio()">Tocar</button><br><br>
 
   Idioma:
-  <button onclick="loadLangs()">Carregar</button>
-  <button onclick="printLangs()">imprimir</button>
-  <span> * mensagens de idioma no console </span><br><br>
+  <button onclick="loadLangs()">Carregar no cache</button>
+  <button onclick="printLangs()">imprimir</button><br><br>
 
-  <textarea id="texto" rows="4" cols="20" readonly=true placeholder="algumas palavras do idioma selecionado sairão aqui"></textarea><br><br>
+  <textarea id="texto" rows="4" cols="20" readonly=true placeholder="algumas palavras do idioma selecionado sairão aqui"></textarea>
+  <span> *dicionario completo no console </span><br><br>
 
   Alterar idioma:
   <button onclick="escolherIdioma('pt_BR')">Pt_BR</button>

+ 1 - 3
Gerenciando arquivos de idioma - file to csv to file/README.md

@@ -3,9 +3,7 @@ por Bernardo Martins, Laira Almas
 
 ## Descricao
 
-Esse pacote tem o intuito de facilitar a visualizacao e modificacao dos arquivos de internalizacao e traducao usados nos projetos. 
-
-Ele prove dois arquivos em python:
+Esse pacote contem scripts em python que facilitam a visualizacao dos arquivos de internalizacao e traducao usados no iFractions. Permitem criar um csv a partir dos arquivos, criando um ponto centralizado de visualizacao e edicao e, depois, converter de volta para o formato inicial. São eles:
 
 * **file_to_csv.py**: transfere o conteudo dos arquivos de linguagem para um csv de tal forma que a primeira coluna contem as chaves, e cada linha eh composta da chave, seguida de todas traducoes.
 

+ 7 - 0
README.md

@@ -0,0 +1,7 @@
+# Sobre este pacote
+
+Aqui voce vai encontrar os utilitarios do iFractions que podem ser usados/adaptados em outros projetos que sigam uma estrutura semelhante.
+
+* **/'Carregando midia para cache'** - contem uma pequena demonstracao do carregamento de arquivos de midia para aplicacao de uma pagina como o ifractions.
+
+* **/'Gerenciando arquivos de idioma - file to csv to file'** - contem scripts em python que facilitam a visualizacao dos arquivos de idioma usados no iFractions. Permitem criar um csv a partir dos arquivos, criando um ponto centralizado de visualizacao e edicao e, depois, converter de volta para o formato inicial.