Converta jogos flash para HTML5

O flash está sendo abandonado lentamente pela Adobe a favor do HTML5 e JavaScript; Seu final oficial de vida é definido para o ano 2020. E é aí que este artigo será útil.

• Reconstruir um site de 2004 em Flash para 2018

As dicas descritas abaixo visam ajudar os desenvolvedores de jogos HTML5 a evitar erros comuns ao converter jogos flash para JavaScript, além de fazer todo o processo de desenvolvimento ir tão suavemente quanto possível. Tudo o que você precisa é de conhecimento básico de JavaScript, Webgl e da estrutura de phaser.

Mudando seu design de jogo do SWF para JavaScript pode produzir melhor experiência de usuário , que por sua vez lhe dá uma aparência moderna. Mas como fazer isso? Você precisa de um conversor de jogo JavaScript dedicado para se livrar dessa tecnologia desatualizada? Bem, o flash para a conversão HTML5 pode ser um pedaço de bolo - aqui é o que um desenvolvedor experiente de JavaScript Game tem a dizer sobre o assunto.

Gostaria de manter seu processo de design simples? UMA Construtor de sites e a direita hospedagem na web. O provedor pode mantê-lo dessa maneira.

01. Melhore a experiência do jogo HTML5

Converter um jogo para outra plataforma é uma excelente oportunidade para melhorá-lo, consertar seus problemas e aumentar o público. Abaixo estão algumas coisas que podem ser facilmente feitas e valem a pena considerar:

• Suportando dispositivos móveis
  A conversão do flash para o JavaScript permite atingir um público mais amplo - os usuários do suporte a dispositivos móveis para controles de tela sensível ao toque geralmente precisam ser implementados no jogo. Felizmente, ambos os dispositivos Android e iOS agora também suportam Webgl, portanto, a renderização de 30 ou 60 fps geralmente pode ser facilmente alcançada. Em muitos casos, 60 fps não causarão problemas, o que só melhorará com o tempo, pois os dispositivos móveis se tornarão mais e mais desempenho.
• Melhorando a performance
  Quando se trata de comparar o ActionScript e Javascript, este último é mais rápido. Além disso, converter um jogo é uma boa ocasião para revisitar algoritmos usados ​​no código de jogo. Com o desenvolvimento do jogo JavaScript, você pode otimizá-los ou totalmente tira o código não utilizado que seja deixado por desenvolvedores originais.
• Corrigindo bugs e fazendo melhorias na jogabilidade
  Ter novos desenvolvedores que procuram o código-fonte do jogo pode ajudar a consertar bugs conhecidos ou descobrir novos e muito raros. Isso tornaria o jogo menos irritante para os jogadores, o que os faria passar mais tempo em seu site e encorajá-los a experimentar seus outros jogos.
• Adicionando Analytics da Web.
  Além de rastrear o tráfego, a Web Analytics também pode ser usada para reunir conhecimento sobre como os jogadores se comportam em um jogo e onde ficam presos durante a jogabilidade.
• Adicionando localização
  Isso aumentaria o público e é importante para as crianças de outros países jogando seu jogo. Ou talvez o seu jogo não esteja em inglês e você quer apoiar essa linguagem?

02. Atingir 60 fps

Quando se trata de desenvolvimento de jogos Javascript, pode ser tentador aproveitar o HTML e o CSS para botões no jogo, widgets e outros elementos da GUI. Nosso conselho é ter cuidado aqui. É contra-intuitivo, mas na verdade, alavancar os elementos DOM é menos performante em jogos complexos e isso ganha mais significado no celular. Se você quiser obter 60 fps constantes em todas as plataformas, então resignar de HTML e CSS pode ser necessário.

Elementos de GUI não interativos, como barras de saúde, barras de munição ou contadores de pontuação podem ser facilmente implementados em Phaser usando imagens regulares (a classe 'Phaser.Image'), alavancando a propriedade '.crop' para aparar e o 'faser. Classe de texto para etiquetas de texto simples.

Elementos interativos, como botões e caixas de seleção, podem ser implementados usando a classe 'Phaser.Button' embutida. Outros elementos mais complexos podem ser compostos de diferentes tipos simples, como grupos, imagens, botões e etiquetas de texto.

03. Carregando fontes personalizadas

Se você quiser renderizar texto com uma fonte de vetor personalizada (por exemplo, TTF ou OTF), você precisa garantir que a fonte já tenha sido carregada pelo navegador antes de renderizar qualquer texto. Phaser v2.6 não fornece uma solução para essa finalidade, mas outra biblioteca pode ser usada - Web Font Loader. .

Supondo que você tenha um arquivo de fonte e inclua o Web Font Loader na sua página, abaixo é um exemplo simples de como carregar uma fonte. Faça um arquivo CSS simples que será carregado pelo Web Font Loader (você não precisa incluí-lo em seu HTML):

 @ font-face {
  // este nome você usará em js
  Fonte-Família: 'Gunplay';
  // URL para o arquivo de fonte, pode ser relativo ou absoluto
  SRC: URL ('../ fonts / gunplay.ttf') formato ('TrueType');
  Peso da fonte: 400;
} 

Agora defina uma variável global chamada WebFontConfig. Algo tão simples quanto isso geralmente será suficiente:

 var webfontconfig = {
  'Classes': Falso,
  'Tempo limite': 0,
  'ativo': função () {
  // A fonte carregou com sucesso ...
  },
  'personalizadas': {
  'Famílias': ['Gunplay'],
  // URL para o css mencionado anteriormente
  'URLs': ['estilos / fonts.css']
  }
}; 

Lembre-se de colocar seu código no retorno de chamada 'ativo' mostrado acima. E é isso!

04. Salve o jogo

Agora estamos no ponto do meio do nosso flash para conversão de JavaScript - é hora de cuidar dos shaders. Para armazenar persistentemente os dados locais no ActionScript, você usaria a classe "ShareDoPject". Em JavaScript, a substituição simples é a API LocalStorage. , que permite armazenar strings para recuperação posterior, sobrevivendo a recarga de páginas.

Salvar dados é muito simples:

 Var o progresso = 15;
localstorage.setiTem ('myGame.Progress', progresso); 

Observe que no exemplo acima, a variável 'progresso', que é um número, será convertida em uma string.

O carregamento também é simples, mas lembre-se que os valores recuperados serão cordas ou nulos se não existirem.

 var progresso = parseint (localstorage.getitem ('myGame.Progress')) || 0; 

Aqui estamos garantindo que o valor de retorno é um número. Se não existir, então 0 será atribuído à variável 'progresso'.

Você também pode armazenar e recuperar estruturas mais complexas, por exemplo, JSON:

 Var estatísticas = {'gols': 13, 'vence': 7, 'perdas': 3, 'Draws': 1
};
localStoreage.setiTem ('myGame.stats', json.stringify (stats));
...
var estats = json.parse (localstorage.getitem ('mygame.stats')) || {}; 

Existem alguns casos em que o objeto 'localstorage' não estará disponível. Por exemplo, ao usar o arquivo: // protocolo ou quando uma página é carregada em uma janela privada. Você pode usar a instrução 'Tentar e pegar' para garantir que seu código continue trabalhando e use valores padrão, que é mostrado no exemplo abaixo:

 tente {
    var de progresso = localstorage.getitem ('myGame.Progress');
} catch (exceção) {
  // LocalStoreage não disponível, use valores padrão
} 

Outra coisa a lembrar é que os dados armazenados são salvos por domínio, não por URL. Portanto, se houver um risco de que muitos jogos estejam hospedados em um único domínio, é melhor usar um prefixo (namespace) ao salvar. No exemplo acima, 'MyGame'. é um prefixo e você geralmente quer substituí-lo pelo nome do jogo.

Se o seu jogo estiver incorporado em um iframe, então a localização local não persistirá no iOS. Nesse caso, você precisaria armazenar dados no pai iframe.

05. Shader de fragmento padrão

Quando Phaser e Pixijs tornam seus sprites, eles usam um simples sombreador de fragmento interno. Não tem muitos recursos porque é adaptado por velocidade. No entanto, você pode substituir esse shader para seus fins. Por exemplo, você pode alavancá-lo para inspecionar overdraw ou suportar mais recursos para renderização. Abaixo está um exemplo de como fornecer seu próprio fragmento padrão para o faser v2.

 Preload da função () {
  this.Load.Shader ('filename.frag', 'shaders / filename.frag');
}
função criar () {
  var renderer = este.Renderer;
  var batch = renderer.spritebatch;
  batch.defaultshader =.
  novo pixi.abstractfilter (este.cache.getshader ('filename.frag'));
  Batch.setContext (renderer.gl);
} 

06. Alterar o método de tingimento

Um shader padrão personalizado pode ser usado para substituir os métodos de tingimento padrão em Phaser e Pixijs. Tingimento em Faser e Pixijs funciona multiplicando pixels de textura por uma determinada cor. A multiplicação sempre escurece as cores, o que obviamente não é um problema; É simplesmente diferente da tingimento flash. Para um dos nossos jogos, precisávamos implementar a tingimento semelhante ao Flash e decidiu que um shader padrão personalizado poderia ser usado. Abaixo está um exemplo de tal sombreador de fragmento:

// variante de tonalidade específica, semelhante à tons de flash que adiciona
// para a cor e não multiplica. Um negativo de uma cor
// deve ser fornecido para este shader funcionar corretamente, i.E. SET
// sprite.tint para 0 para transformar o sprite inteiro para branco.
Lowp de precisão flutuador;
variando VEC2 VTEXTURECOORD;
variando vec4 vcolor;
Sampler2D usampler uniforme;
vazio principal (vazio) {
  vec4 f = texture2d (usampler, vtexturecoord);
  flutuar A = braçadeira (vcolor.a, 0,00001, 1.0);
  gl_fragcolor.rgb = f.rgb * vcolor.a + braçadeira (1.0 - vcolor.rgb / a, 0,0, 1,0) * vcolor.a * f.a;
  gl_fragcolor.a = f.a * vcolor.a;
} 

Este shader ilumina pixels adicionando uma cor base à tonalidade. Para isso funcionar, você precisa fornecer negativos da cor que você deseja. Portanto, para obter branco, você precisa definir:

 sprite.tint = 0x000000; // esta cores o sprite para branco
Sprite.tint = 0x00FFF; // isso dá vermelho 

07. Inspecione overdraw

Substituir um shader padrão também pode ser alavancado para ajudar na depuração. Abaixo estamos explicamos como o canow pode ser detectado com tal sombreamento.

Overdrawing acontece quando muitos ou todos os pixels na tela são renderizados várias vezes. Por exemplo, muitos objetos tomando o mesmo lugar e sendo renderizados um sobre o outro. Quantos pixels uma GPU pode render por segundo é descrito como taxa de preenchimento. GPUs de desktop modernas têm taxa excessiva de preenchimento para fins 2D habituais, mas os móveis são muito mais lentos.

Há um método simples de descobrir quantas vezes cada pixel na tela é escrito substituindo o shader de fragmento global padrão em Pixijs e Phaser com este:

 vazio principal (void) {
  gl_fragcolor.rgb + = 1,0 / 7,0;
} 

Este shader ilumina pixels que estão sendo processados. O número 7.0 indica quantas gravações são necessárias para ligar os pixels brancos; Você pode ajustar esse número para o seu gosto. Em outras palavras, os pixels mais leves na tela foram escritos várias vezes, e os pixels brancos foram escritos pelo menos sete vezes.

Este shader também ajuda a encontrar os dois objetos 'invisíveis' que, por algum motivo, ainda são renderizados e os sprites que têm áreas transparentes excessivas que precisam ser despojadas (GPU ainda precisa processar pixels transparentes em suas texturas).

08. Por que os motores de física são seus amigos

Um motor físico é um middleware que é responsável por simular corpos de física (geralmente rígidos dinâmicas corporais) e suas colisões. Os motores de física simulam espaços 2D ou 3D, mas não ambos. Um motor físico típico fornecerá:

• Movimento de objetos, definindo velocidades, acelerações, articulações e motores;
• Detectar colisões entre vários tipos de forma;
• Calculando respostas de colisão, ou seja, dois objetos devem reagir quando colidirem.

Há um plugin phaser que funciona bem para este propósito. O Box2D também é usado no mecanismo de jogo de união e no Gamemaker Studio 2.

Enquanto um motor de física acelerará seu desenvolvimento, há um preço que você terá que pagar: redução do desempenho do tempo de execução. Detectar colisões e calcular respostas é uma tarefa intensa da CPU. Você pode estar limitado a várias dúzias de objetos dinâmicos em uma cena em telefones celulares ou enfrentamento de desempenho degradado, bem como a taxa de quadros reduzida com menos de 60 fps.

09. Sons de exportação

Se você tem um jogo de som de jogo flash dentro de um arquivo .fla, exportando-os da GUI não é possível (pelo menos não no Adobe Animate CC 2017) devido à falta de opções de menu que atendem a essa finalidade. Mas há outra solução - um script dedicado que faz exatamente isso:

 Função NormalizEfileName (nome) {
  // converte um nome de camelcase no nome de Snake_Case
  Devolver Name.Replace (/ ([A-Z]) / g, '_ $ 1'). Substitua (/ ^ _ /, '' ') .tolowercase ();
}
Função DisplayPath (caminho) {
  // torna o caminho do arquivo mais legível
  Devolva Unescape (caminho) .replace ('arquivo: ///', '') .replace ('|': ':');
}
fl.outputpanel.clear ();
if (fl.getdocumentdom (). Library.GetSelectedItems (). Comprimento e GT; 0)
  // obter apenas itens selecionados
  var biblioteca = fl.getDocumentdom (). biblioteca.getselectedItems ();
outro
  // recebe todos os itens
  var biblioteca = fl.getDocumentdom (). biblioteca.Items;
// Peça ao usuário para o diretório de destino de exportação
var root = fl.browseforfolderurl ('selecione uma pasta');
varr erros = 0;
para (var i = 0; i & lt; biblioteca.Length; i ++) {
  var item = biblioteca [i];
  if (item.itemtype! == 'Som')
  Prosseguir;
  var caminho = raiz + '/';
  if (item.OriginalCompressionType === 'RAW')
  Path + = NormalizEfileFilename (item.name.split (''. ') 
) +' .wav ';
  outro
  PATH + = NORMALLIZEFILENAME (item.name);
  varcess = item.Exporttofile (caminho);
  Se (! sucesso)
  Erros + = 1;
  FL.TRACE (Relatograma (caminho) + ':' + (sucesso? 'OK': 'erro'));
}
fl.trace (erros + erro (s) '); 

Como usar o script para exportar arquivos de som:

1. Salve o código acima como um arquivo .jsfl no seu computador.
2. Abra um arquivo .fla com o Adobe Animate.
3. Selecione Comandos & GT; Executar comando no menu superior e selecione o script no diálogo que se abre.
4. Agora, outro arquivo de diálogo aparece para selecionar o diretório de destino de exportação.

Está feito! Agora você deve ter arquivos WAV no diretório especificado. O que resta para fazer é convertê-los, por exemplo, MP3, OGG ou AAC. (Se você tiver arquivos de jogo para manter seguro, atualize para decente armazenamento na núvem .)

10. Como usar MP3s

O bom formato MP3 antigo está de volta, pois algumas patentes expiraram e agora cada navegador pode decodificar e jogar MP3s. Isso torna o desenvolvimento um pouco mais fácil, já que finalmente não há necessidade de preparar dois formatos de áudio separados. Anteriormente, você precisava, por exemplo, OGG e arquivos AAC, enquanto agora o MP3 será suficiente.

No entanto, há duas coisas importantes que você precisa lembrar sobre mp3:

• Mp3s precisam decodificar após o carregamento, o que pode ser demorado, especialmente em dispositivos móveis. Se você vir uma pausa depois de todos os seus ativos terem carregado, provavelmente significa que os MP3s estão sendo decodificados
• Garravelmente jogando mp3s loop é um pouco problemático. A solução é usar o MP3Loop, Leia mais neste artigo Postado pela fase da Compu.

Este artigo foi originalmente publicado em questão 277 da revista Creative Web Design Web Designer. Comprar edição 277 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

• 5 jogos casuais para designers
• Construir seu próprio jogo de física webgl
• Entenda o pipeline de importação de ativos da unidade