Vamos aprender a criar e utilizar sprite font no construct 2. Apresento abaixo vídeo aulas utilizando um gerador de sprite font, criando sprite font no fireworks, e a utilização dos plugins de sprite font dentro do construct.
O que é uma sprite font?
É uma imagem semelhante a um tilemap, contendo caracteres no lugar de frames, mas com a mesma lógica de ter conteúdo reutilizável em quadros para criação de jogos.
Por que utilizar sprite font?
Dentre os motivos temos:
– Garantia de que as fontes utilizadas no jogo não serão alteradas, independente da plataforma que o mesmo será publicado e utilizado.
– Possibilidade de ter fontes diferenciadas, onde você poderá trabalhar na construção da mesma, fazendo assim uma fonte que combine exatamente com seu jogo, ou que seja exclusividade sua. Podendo trabalhar na seleção da fonte, cores, contornos, sombras, etc. Talvez este seja a principal razão de se utilizar as sprite fonts.
Sprite Font Generator e plugin SpriteFont+
Nesta primeira vemos a utilização de um utilitário para criação (Sprite Font Generator), e a utilização do plugin SpriteFont+ do construct 2.
Criar sprite font para idiomas Português e Espanhol
Os plugins de sprite font são preparados para o idioma Inglês, e se precisamos outro idioma precisamos acrescentar os caracteres faltantes. Porém na seleção da font também deve ser analisado se ela possui tais caracteres especiais.
Roteiro
(utilizaremos o programa Sprite Font Generator)
– Montagem da sprite font, acrescentar na configuração de letras, as letras abaixo:
ÁáÂâÀàÅåÃãÄäÆæÉéÊêÈèËëÍíÎîÌìÏïÓóÔôÒòÕõÖöÚúÛûùÙÜüÇçÑñÝý¿
– Selecionar uma fonte que tenha os caracteres correspondentes (existem letras que estão preparadas apenas para o idioma Inglês)
Exemplo:
Fonte Arial possui os caracteres dos idiomas Português e Espanhol
Fonte Kenney NÃO possui os caracteres destes idiomas.
– Na utilização da sprite font dentro do construct, acrescentar os caracteres especiais (com acentos e Ç)
Importante: Isto deve ser feito para cada instancia do objeto spritefont.
Mapa de caracteres original do plugin spritefont:
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,;:?!-_~#”‘&()[]|`\/@°+=*$£€<>
Mapa de caracteres para os idiomas inglês, português e espanhol.
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,;:?!-_~#”‘&()[]|`\/@°+=*$£€<>ÁáÂâÀàÅåÃãÄäÆæÉéÊêÈèËëÍíÎîÌìÏïÓóÔôÒòÕõÖöÚúÛûùÙÜüÇçÑñÝý¿
Veja com detalhes no vídeo abaixo:
Onde localizar boa Fonts para seu game
Apresento no vídeo abaixo uma lista de boas referências de links, para você localizar fontes para seu jogo.
Criar um display de texto estilo RPG
Nesta vídeo aula apresento a criação de um display com estilo de digitação (as letras vão aparecendo aos poucos na caixa de texto).
Criação e utilização de sprite font no construct 2
Abaixo temos um conjunto de 3 vídeo aulas mostrando a criação de sprite font em uma ferramenta de design gráfico (neste caso utilizamos o Adobe Fireworks).
Deixo aqui um link para downloads, com o mini roteiro e alguns exemplos de sprite fonts.
Os arquivos de imagens estão em png, foram criados em fireworks e vc poderá alterá-los a vontade. Não esqueça de eliminar os marcadores temporários e deixar a imagem com fundo transparente.
Download template
Roteiro:
– Identificar/selecionar que caracteres serão colocados na sprite
– Contar os caracteres para criar a imagem do tamanho correto
– Definir o tamanho em pixel de cada quadro (16, 24, 32, 48, …)
– Criar a imagem do tamanho necessário
– Criar marcadores temporários com o tamanho de cada quadro
– Colocar em cada quadro os caracteres
– Configurar a fonte, tamanho e cor desejado
– Remover os marcadores temporários
– Salvar com fundo transparente
Acompanhe mais pelos vídeos:
Abraços
Maciel
Download do software Sprite Font Generator V2, para fazer sprite font de forma profissional.
Download Sprite Font Generator
Para receber atualizações assine nossa newsletter, e o canal no youtube: Canal Youtube
Siga nossas postagens nas redes sociais:
– Curta a Fanpage: Facebook
– Acompanhe nossas postagens no G+: Google Plus
– Receba atualizações pelo Twitter: Twitter