Tutorial - Fontes Estilizadas

Nome: Usando fontes estilizadas
Descrição: Este tuto ensina à você apenas a usar fontes diferentes no seu jogo.
Nível de dificuldade: iniciante
Requerimentos: GM8 Pro
Desenvolvimento: Completo

Olá Amigos, vou ensinar a vocês como criar uma fonte personalizada no seu jogo através de sprites.

Vamos primeiro precisar entrar neste site: http://www.fonts2u.com
Ele é um ótimo site por causa das suas imagens de demonstração da fonte, cuja as quais são todas já tabeladas no padrão ASCII. Vejam a imagem abaixo:

Spoiler:

Então vamos fazer o seguinte, após entrar no site, escolha a fonte de sua preferência. Clique nela para abrir a página de Dowload. Mas vocês não iram baixa-la (a não ser que vocês queiram). Nesta página na parte de baixo, há uma imagem como na imagem acima. Salve esta imagem. A fonte que escolhi foi esta: http://www.fonts2u.com/pf-tempesta-seven-condensed-bold.fonte
Agora para nosso jogo ter letras com acentos temos que clicar neste lugar:

Spoiler:

E logo após selecionem Latim suplementar-1, a imagem a baixo vai mudar neste caso irá aparecer os seguintes caracteres:

Spoiler:

Salve também esta imagem.
Agora irei utilizar o programa Fireworks para editar a imagem. Abrirei as 2 imagens em janelas diferentes. (caso o programa de sua escolha não faça isso, pode abrir uma por uma mesmo). Logo depois é bom vocês retirarem as linhas cinza que ficam na imagem para poder editar melhor. Desta forma:

Spoiler:

Mas não tire por enquanto as letras cinza e nem o fundo branco se não mais tarde vai dar errado OK?
Seguindo, nós vamos analisar a altura das imagens e marca-las em algum lugar:

Spoiler:

No meu caso, a minha imagem tem 860x1400. E a outra também o mesmo valor!
O que vamos fazer agora é criar um novo documento de 860x2800 para colocar uma imagem em baixo da outra. Então criado o documento coloquem uma imagem em baixo da outra! Tem que ser exatamente em baixo se não pode dar erro no GM e suas letras ficarem tortas. Aí sim vocês podem tirar as letras cinza e o fundo branco ficará algo mais ou menos parecido com essa imagem:

Spoiler:

Depois de ter feito isso, estilize a sua fonte ao seu gosto! Eu fiz essa:

Spoiler:

Após ter estilizado ela ao seu gosto, abra o GM. Após aberto Adicione uma nova Sprite, clique em edit Sprite, depois em file e depois create from strip, procure a imagem que você estilizou e de carregue ela. Logo após abrirá uma janela assim:

Spoiler:

Nessa janela são todas as opções que você deve conhecer para um bom trabalho. Vamos a elas:
Number of images= O número de imagens que você quer que tenha a sua Sprite, ou seja, no nosso caso o número de letras.
Images per row= Imagens por linha. Quantas imagens você tem em cada linha dessa imagem ao lado. No nosso caso são 10.
Image width= Largura de cada sub-image. No nosso caso, a largura de cada letra.
Image height= Altura de cada sub-image. //Letra
Horizontal cell offset= “Cell” quer dizer célula, neste caso é o tamanho da célula na horizontal, que tem como padão a “Image Widht”. Esta opção é para o deslocamento da célula na horizontal. Teste as numerações e veja o que acontece.
Vertical cell offset= o tamanho da célula na vertical, que tem como padrão a “Image Height”. Esta opção é para o deslocamento da célula na vertical. Teste as numerações e veja o que acontece.
Horizontal pixel offset= Esta opção é para o deslocamento na horizontal em pixel’s. Teste as numerações e veja o que acontece.
Vertical pixel offset= Esta opção é para o deslocamento na vertical em pixel’s. Teste as numerações e veja o que acontece.
Horizontal separation= separação horizontal em pixels. Teste as numerações e veja o que acontece.
Vertical separation= separação vertical em pixels. Teste as numerações e veja o que acontece.
Fim, terminamos de aprender para que serve cada opção. Agora está na hora de configurar. Dependendo da sua imagem você deve testar os valores para que saiam corretos. Essa foi a parte mais tensa para mim! =/ Mas agora se sua imagem tem o mesmo tamanho da minha 860x2800 é uma boa pois eu já configurei conforme a imagem abaixo:

Spoiler:

Só corrigindo o Nuber of images é de 194 Ok?

Após feita a separação cliquem em OK. Veja que ele vai criar todas as letras separadas. Mas elas parecem estar muito grandes não? Vamos diminui-las um pouco. Clique em Transform>Stretch> Excelent> mude os valores ao seu gosto eu vou mudar para 50% e clicar em OK! Vou agora estilizar um pouco mais vou clicar em Image>Outline>cor preta>thickness 1 e marcar a opção Smooth! Pronto agora ele está com uma linha preta em volta (ou branca) e ficou mais bonito ao meu ver! =D Depois clique em transform e crop deixe 0(zero) e clique em ok, ele vai dar uma arrumada no tamanho exagerado da Sprite. Agora tirem a primeira Sprite que está em branco. Vejam que na sub-image 94 não existe nada assim como nas seguintes. Deletem todas essas vazias. Abram as imagens das fontes separadamente de novo! Vejam que a primeira imagem onde contem as letras e os números termina no número 126 com o “~”, agora analisem a outra imagem. Veja que ela começa no número 161. Agora temos que voltar ao GM e na sub-image 94 clicar no botão ao lado direito do botão salvar.

Spoiler:

Clique 35 vezes nesse botão. Para confirmar é melhor você contar do 126 ao 161 clicando para ser mais exato. Mas por que isso? Por que senão suas letras estaram fora do padrão ASCII. Então aquelas sub-images que inserimos não vão aparecer, mas servem para o GM reconhecer a tabela e digitar o que você precisa.
Depois de feito isso, adicione um novo objeto. Adicione um evento Draw e arraste o execute code na aba Control para o quadro branco direito. Dentro escreva o seguinte código:

Código:

font0=font_add_sprite(sprite0,ord("!"),1,2) //ord("!") é em qual letra começa sua fonte
draw_set_font(font0)
draw_set_color(c_white)
draw_text(x,y,"Teste com fontes aleatórias # estilizadas por Soul Limaloko")

Crie uma room e coloque este objeto lá! E de play! Pronto, agora você tem sua fonte estilizada.

Por Soul Limaloko

Muito bom o tutorial, vou ver se eu uso uma fonte assim no meu próximo jogo que talveis seja um de SKI.