Gerador de Imagens do Ace AttorneyPrograma desenvolvido para agilizar na edição de imagens do jogo "Ace Attorney Trilogy", para Nintendo 3DS, em conjunto com as tools desenvolvidas pelo romhacker gringo onepiecefreak (https://gbatemp.net/threads/translation-ace-attorney-trilogy.444652/).
"Ace Attorney Trilogy" é um jogo bastante extenso, com centenas de imagens com textos a ser editadas:
- Botões brancos com textos em vermelho cor-de-vinho;
(https://raw.githubusercontent.com/leomontenegro6/aaig/master/img/background_botoes_preenchido.png)
- Nomes de provas / perfis, com fundo cinza escuro e textos em cor laranja;
(https://raw.githubusercontent.com/leomontenegro6/aaig/master/img/background_nomes_preenchido.png)
- Subtítulos de provas / perfis, com fundo verde claro e textos em cor cinza escuro;
(https://raw.githubusercontent.com/leomontenegro6/aaig/master/img/background_subtitulos_preenchido.png)
- Descrições de provas / perfis, com fundo cinza escuro e textos em cor branca (imagem abaixo com fundo transparente;
(https://raw.githubusercontent.com/leomontenegro6/aaig/master/img/background_descricao_fundo_cinza.png)
A maneira tradicional de editar esses gráficos é através de arquivos .PSD via Adobe Photoshop, o que acaba sendo um trabalho extremamente repetitivo e cansativo para os romhackers. Foi justamente pensando em otimizar estes processos que eu criei este software.
O "Gerador de Imagens do Ace Attorney" é um programa que consegue gerar as imagens acima, nos mesmos padrões previstos pelas tools de extração de gráficos do onepiecefreak. Para isso, são utilizadas as seguintes tecnologias:
- HTML5, para a montagem das páginas;
- CSS3, para a estilização dos textos nas imagens;
- JavaScript e jQuery (https://jquery.com/), para a programação de campos e botões;
- Html2canvas (http://html2canvas.hertzen.com/), para conversão de elementos HTML para imagens em PNG;
- Bootstrap (http://getbootstrap.com/), para tornar esta página responsiva;
- Bootstrap Slider (https://github.com/seiyria/bootstrap-slider), para os campos de escala e margens;
—————————————————–
Pré-Requisitos—————————————————–
- Um navegador moderno atualizado. De preferência o Google Chrome, visto que em outros navegadores, como Mozilla Firefox, Safari ou Internet Explorer, poderão surgir algumas diferenças de comportamento de estilizações CSS;
- A fonte "Arial" instalada no seu computador. Necessária para a geração correta das imagens de botões por exemplo (Caso use Windows, desconsidere);
- A fonte "Vaud Book" instalada no seu computador. Necessária para a geração correta das imagens das descrições de provas por exemplo;
- Um servidor web. O programa não funcionará se executado localmente pelo navegador do usuário¹.
1. Mesmo este programa sendo totalmente local, a forma como as imagens são geradas (conversão de elementos <canvas> para imagem PNG) viola certas diretrizes de segurança de navegadores web (http://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported). Por isso, recomenda-se executar este programa a partir de um servidor web (Apache2 por exemplo), nem que seja apenas para servir os arquivos para os clientes.
—————————————————–
Como usar?—————————————————–
- Selecione o tipo de imagem a ser gerada, clicando em uma das abas "Botões", "Nome da Prova / Perfil", etc;
- No campo de texto, digite o texto a ser inserido na imagem;
- Opcional: Altere a escala, fonte e margens de acordo com o texto digitado, se for o caso;
- Opcional: Em caso de uso de fontes externas, siga os passos:
- No campo "Fonte", escolha a opção "Outra";
- Digite o nome da fonte no campo de texto que surgiu ao lado;
- Uma vez que o nome tenha sido digitado corretamente, o navegador imediatamente deve fazer uso da mesma e replicar o resultado;
- Ao realizar qualquer operação nos itens anteriores a este, a imagem é automaticamente atualizada na seção "Prévia". Verifique se a prévia está de acordo com o seu contexto, e altere os campos anteriores da maneira que lhe for conveniente;
- Recomendado: Desfaça qualquer alteração de zoom do seu navegador, pois isto pode prejudicar a geração das imagens. Mantenha os níveis de zoom do seu browser sempre nos valores padrões (100%);
- Clique no botão "Gerar", e a imagem será automaticamente gerada e salva em formato PNG, com o arquivo sendo nomeado de acordo com o texto digitado no campo de texto;
- Opcional: Se você tiver bagunçado os valores e não souber dos padrões, clique no botão "Resetar", e todos os campos serão redefinidos para seus valores padrões.
—————————————————–
Considerações—————————————————–
Até o momento, a tool só gerará imagens para o jogo "Ace Attorney Trilogy" de Nintendo 3DS. Futuramente, pretendo adicionar suporte às imagens dos "Ace Attorney" de Nintendo DS, e possivelmente de GBA.
No entanto, os gráficos das versões de DS possuem resolução menor, transparência sem ser via RGBA e uma paleta de cores mais limitada. Além disso, mesmo existindo programas para extrair e reinserir esses gráficos, estes nem sempre extraem os gráficos para PNG em sua paleta exata.
Para facilitar a adição desse suporte, seria interessante um dumper / inserter de gráficos para os Ace Attorney de NDS que consiga exportar diretamente para formato PNG, tal como ocorre com as tools gráficas do onepiecefreak.
—————————————————–
Imagens geradas pela tool—————————————————–
(https://raw.githubusercontent.com/leomontenegro6/aaig/master/img/amostra_1.png) (https://raw.githubusercontent.com/leomontenegro6/aaig/master/img/amostra_2.png) (https://raw.githubusercontent.com/leomontenegro6/aaig/master/img/amostra_3.png)
—————————————————–
Download / Demonstração—————————————————–
Prévia ao vivo (http://www.romhacking.net.br/tools/aaig/)
Código-fonte no github (https://github.com/leomontenegro6/aaig)
Tool atualizada. Segue as novidades:
- Adicionado suporte às versões de Nintendo DS;
- Adicionadas fontes novas: Ace Attorney (US), Ace Attorney (EU), Nintendo DS Bios;
- Adicionados campos de personalização do tamanho da fonte;
- Adicionados campo de personalização da altura da linha (para campos com duas ou mais linhas de texto);
- Corrigidos bugs diversos.
Para mais informações, vá à página do Github (https://github.com/leomontenegro6/aaig).