Um sistema de textos diferente

Há no Game Maker um sistema de textos bem interessante que é o texto de sprites. Esse sistema nos possibilita criar a nossa própria fonte através de um desenho (pode ser até no paint mesmo!), e se você reparar bem, vai notá-lo em quase todos os jogos que conhece.




Vamos ver alguns exemplos desses textos? Olha só:


Os textos ficam muito mais legais que fontes tradicionais, sem falar que é possível "estilizar" a fonte com a quantidade de efeitos e cores que quiser.

Criando fontes a partir de desenhos

Um pouquinho do sistema ASCII:

Quando pressionamos uma tecla qualquer, estamos enviando ao sistema operacional um código correspondente à tecla pressionada. Esse código vai apontar para uma tabela onde se encontram todos os caracteres de um determinado idioma ou de uma determinada região.

Graças à esse sistema é possível alterar as configurações do teclado baseando-se na região, sem ter que alterar os caracteres de uma fonte, ou reproduzir fontes diferentes para cada idioma. Entre esses caracteres, temos os tipos: comum, especial, particular e operadores. Mas isso é um pouco mais chato, e vamos deixar isso de lado por enquanto...

O importante por hora, é que a gente conheça e entenda essa "tabela", que respeita uma ordem sequencial de caracteres chamada "American Standard Code for Information Interchange" ou "ASCII" (pronuncia-se "éski").

A sequência de caracteres ASCII usa 7 ou 8 bits para representar 128 ou 256 caracteres. O ASCII padrão utiliza 7 bits para representar todas as letras maiúsculas, minúsculas, números de 0 a 9 e alguns caracteres especiais (¢ = centavo de dólar, £ = libra, ¥ = Iene, $ = Cifrão, etc.).

A grande maioria dos processadores atuais também reconhecem o padrão "ASCII Alto", que é composto pelo oitavo bit da sequência, criado especialmente para caracteres orientais e muito doidos (esqueci qual era a palavra para "não-latinos"). Esse sistema também é conhecido por Unicode e abrange todos os idiomas do mundo!!!


Definindo quais caracteres vamos usar:

Abra o "Mapa de Caracteres": ele está no menu "Iniciar -> Programas -> Acessórios -> Ferramentas do Sistema". Você também pode abrir a caixa de executar pelo atalho "Winkey R" (Winkey é o boicote da Microsoft no teclado, ele fica no meio das teclas Ctrl e Alt, do lado esquerdo) e digitar "charmap" (sem aspas).


Selecione a caixa "Modo de exibição avançado" e na lista de Conjunto de Caracteres selecione a opção "Unicode". A tabela começa com o caractere "!" (exclamação). O limite da tabela é o que vamos decidir agora, pois não haveria necessidade de desenhar todas as letras minúsculas se usásse-mos somente maiúsculas no nosso game.

Da mesma forma, não haveria necessidade de desenhar letras se usásse-mos só os números. Mas é importante consolidar em nossas mentes como funciona essa tabela, porque infelismente não é possível "saltar" caracteres a menos que o fizésse-mos por substituição (o que tornaria digitar um texto uma tarefa complicada).

Aqui eu fiz só uns exemplos de fontes seguindo a ordem da tabela:













Criando a fonte:

O próximo passo depois de definir quais caracteres vamos usar é definir o tamanho da nossa fonte. Nos exemplos eu defini as dimensões: 20 pixels de largura por 30 pixels de altura. É claro que isso vai depender muito do
que será escrito com ela e do estilo do jogo, então cabe à você definir o tamanho ideal.




Agora nós vamos desenhar cada caractere (ou apenas modificar alguma fonte) respeitando o tamanho escolhido. Se cada caractere tem 20x30 pixels, a cada 20 pixels à direita (largura) deve haver um caractere correspondente à ordem da tabela ASCII, e a cada 30 pixels abaixo (altura) pode ou não haver uma nova sequência que complementa a de cima:


No Photoshop há um recurso bem útil e vai auxiliar bastante no trabalho: as guias. Elas são demarcadores de posição e vão nos orientar pela tela de pintura, então o que vamos fazer é posicioná-las a cada 20 pixels na altura (é o contrário, porque elas são transversais à seleção) e a cada 30 pixels na largura. Para usá-las, basta ativar a régua (o atalho é "Ctrl R", em qualquer versão), clicar na mesma e arrastar para a tela de pintura. Automaticamente a guia virá para a posição que você definir.


Mas se você acha isso complicado, "clique aqui" para baixar as actions do Photoshop que fazem as demarcações automaticamente. Essas actions criam gabaritos para fontes com caracteres "10x15", "20x30" e "30x50" pixels com apenas um clique e funcionam em qualquer versão do Photoshop a partir da 7. As guias já vão está lá prontinhas, é só se orientar por elas.

O tutorial de actions pode ser lido "clicando aqui"



Carregando e usando as fontes no Game Maker

O Game Maker vai reconhecer cada caractere da nova fonte como uma subimagem de uma sprite. Portanto o nosso próximo passo será transformar esses "strips" (conjunto de várias imagens organizadas em uma única imagem) em sprites animadas.

1 - Crie uma nova sprite no Game Maker e logo em seguida abra o Sprite Editor (clique no botão "Edit Sprite").

2 - No Sprite Editor, vá até o menu "File -> Create from strip" e abra o strip da fonte previamente salva.

3 - Defina a quantidade de subimagens de acordo com a quantidade de caracteres de sua fonte. Informe ao Game Maker também as dimensões dos caracteres e em quantas colunas horizontais e verticais estão organisados:


Quando confirmar, sua sprite será criada e terá o número de sub-imagens equivalente à quantidade de caracteres da fonte.

4 - Agora, devemos informar ao Game Maker que a sprite será usada como uma fonte pela função:

font_add_sprite(sprite,inicio,proporcional,espaçamento)

Essa função adiciona uma nova fonte através de uma sprite, para ser usada pelos eventos draw. Agora é só usar a fonte a vontade!!!

O primeiro argumento da função informa qual será a sprite usada para a nova fonte.

O segundo arqumento (início) informa qual é o primeiro caractere que usamos da tabela ASCII. Esse arqumento é um número (keymap do teclado) mas você pode usar a função ord() que retorna esse keymap pra gente! Ex: ord('!')

O argumento "proporcional" indica se o tamanho da fonte é relativo à cada caractere (cada caractere tem seu tamanho próprio) com true ou se a boundig box deve ser utilizada para definí-los (false).

O espaçamento não tem segredo. É a distância entre um caractere e outro.

Exemplo usando um dos strips nos exemplos:

Código:

draw_set_font(spr_fonte_01,ord('!'),true,8);

Espero que tenham gostado. É bem fácil não é mesmo?! Até mais!!!

Muito bom (está tudo bem explicado), tenho certeza que será muito útil. Valeu mesmo, por mais um excelente tutorial brendan^^

Flws

brendan é o melhor pra fazer tutoriais!

Putz! Valeu mesmo galera! Espero que os tutoriais ajudem a todos!!!

ótimo tuto cara, mas pra que colocar o banner do site três vezes no mesmo tópico? oO

:oops: Eu acabei me acostumando!!

Eu já uso isso a algum tempo.
Eu fiz todos os 256 caracteres do nada.
Foi um trabalho cansativo, mas o jogo fica muito mais estiloso.

Ótimo turorial, você explica todo mesmo.

não conseguir faze as letra ficam todas pretas e não com a cores,
eu coloquei no evento draw

draw_set_font(font_add_sprite(sprite0,ord('!'),1,10))
draw_text(x,y,'abcdefg')

Tutorial muito legal kra! Parabéns!
Eu uso isso no Keyboad Destroyer 2, foi o sistema mais rápido e leve q achei!!

Att,
Evandro Gomes

Muito bom e util o tuto!

Valew!!

ptz mto legal!

so presisa ter paciencia para fazer todas essas letras!!!
xDD

gambit escreveu:não conseguir faze as letra ficam todas pretas e não com a cores,
eu coloquei no evento draw

draw_set_font(font_add_sprite(sprite0,ord('!'),1,10))
draw_text(x,y,'abcdefg')

tente colocar antes

draw_set_color(c_white)

tente colocar antes

draw_set_color(c_white)

funcionou

Pode ficar bastante legal uma fonte caracteristica do jogo!Vlw brendan!

tem como eu fazer fontes para usar no windowns?

Sim existe programas pra fazer fontes não lembro o nome.
mas achei isso

http://ryan.com.br/mtk_fontes.htm <-- um minu tuto sobre como criar

http://baixaki.ig.com.br/busca/TrueType.htm <-- para mais coisas aqui

http://www.inexistentman.net/2008/04/15/crie-suas-proprias-fontes-online/ <-- criador online (comentarios) la tem o link pro site

Helloading - gostaria de saber de vc se voçê já passou por isso:

criei as fontes no ano passado com seu tutorial mas não tinha prestado atenção no uso da RAM que vai incrementando de 1 a 1 na memoria, ate estourar minha carga de ram e travar.
quando tirei as fontes que fiz a partir de seu tutorial simplesmente parou de carregar a ram!

porque isso esta acontecendo meu amigo desenvolvedor?
voçê já passou por isso?

Eu não gostaria de retirar a fonte pois me deu um trabalhão pra faze-las e meu jogo ficou muito bonito com elas ....até hit combo esta sendo gerado com efeito de luz para embeleza-lo ao extremo.

OBS: caso pergunte....tirei TUDO das rom e desativei tudo e só deixei as fontes ...e mesmo assim continua.....que lama!!

se alguem tiver conhecimento poderia me dar um help,

ficaria muito agradecido.

no DRAW do meu personagem esta assim:


//meu sprite
draw_sprite_ext(sprite_index,image_index,x,y-z,fac,image_yscale,image_angle,image_blend,image_alpha)

//barra de life
draw_healthbar(x,y,x+100,y+10,hp,c_red,c_yellow,c_yellow,0,1,1);

//fonte de texto criada
font_add_sprite(FONTE,ord('!'),1,10)
draw_set_color(c_white)
draw_set_font(FONTE)
draw_text(view_xview[0]+15,view_yview[0]+20,' SCORE ' + string(score));

draw_text(view_xview[0]+15,view_yview[0]+60,' VIDAS : ' + string(lives));

existe algum erro aqui??

kyubi,
tente nao fazer posts duplos.

acredito q o erro seja:

font_add_sprite(FONTE,ord('!'),1,10)

pois esta sempre adicionando o sprite.
ja q é um evento q acontece muitas veses.

Tente por no create.


FLW!