[Tutorial] HUD com Corações de Health/Vida/Sangue

Objetivo: Fazer com que Sprites de Corações aumentem ou diminuam conforme a Vida do Heroi aumenta ou diminui.
Dificuldade: Médio (Para mim foi, pq usa a função for que é meio chatinha de mexer)
Ferramenta: GM7

Agradecimentos:
SIGILOSO (por sua tuto "Que venham as HUDs")
Alex FC (por sua "Aula 6 - Introdução a GML - For")


MATERIAL:
Qualquer coisa, pode ser um sprite de coração, ou até bolinhas ou quadradinhos. Crie algum vc mesmo no GM ;)
Se possivel mantenha o tamanho do seu sprite em 16x16, senão terá que modificar os valores respectivos ao tamanho do sprite depois.

Eu fiz um Coração no Editor do GM, com 16x16 de tamanho, centralizado em 8x8.


MODO DE PREPARO:

Primeiramente sigamos a dica do SIGILOSO do tutorial "Que venham as HUDs":
Crie um Obj, aqui nós o chamaremos de "obj_declarador", nele coloque um Evento Create com o seguinte conteúdo:

Código:

global.life = 30 //Eu usei 30 porque usei apenas 3 Corações, coloque 100 depois para experimentar
room_goto(room1) //Coloque o nome da próxima room que criaremos, se vc começo um 'jogo' do zero pra fazer o tudo, será a room1

Isso vai tornar nossa variavel global.life 'fixa', de modo que não importa quantas vezes vc mude de room futuramente, ela vai conservar o valor que tinha anteriormente. (por exemplo, se vc começa o jogo com 3 corações, mas passou a 1ª fase apenas com 1, na 2ª fase você vai continuar com 1)
Obs: é importante que essa room seja a primeira da lista.

Agora crie um novo Obj, chamado obj_hud, adicione um Evento Draw nele e coloque o seguinte Piece of Code:

Código:

{
HUDdraw(); //isso simplesmente vai fazer uma chamada ao Script HUDdraw (que faremos a seguir), com todo seu conteudo.
}

Crie uma nova room (que será a room1), o coloque o obj_hud nela.

E para finalizar, Crie um Script e chame-o de HUDdraw. Coloque isso nele:

Código:

{
global.hearts = global.life*100/1000
    if global.hearts >= 1
    {
        for (xx=view_xview+16; xx<global.hearts*16+4; xx+=16)
        {   
        draw_sprite(s_hearth,0,xx,view_yview+30)
        }
    }
}

Rode o Jogo e veja o que acontece


"Tá.. apareceu os corações, idai? '-' "
Calma '^_^
Antes de continuar vamos entender o código:

Código:

global.hearts = global.life*100/1000

Aqui definimos uma nova variavel global, chamada Global.Hearts, que é igual a 1 Décimo de Global.Life (se Life = 100, Hearts = 10). Nós multiplicamos Global.Life por 100, e depois dividimos por 1000. "Pra que?" Boa pergunta... O GM não aceitou uma divisão por 10, então fiz isso e deu certo. E creio que assim mesmo que sejam usados numéros decimais futuramente (por exemplo, inimigo tira 0,5 de Life do Heroi), não vai bugar.

Código:

if global.hearts >= 1

SE global.hearts for Igual ou Maior que 1.

Código:

for (xx=view_xview+16; xx<global.hearts*16+4; xx+=16)

Isso que deu trabalho. Vamos distrinchar o código pra entender:

Primeira Declaração:

Código:

xx=view_xview+16;

Aqui dizemos que XX vai significar view_xview+16 (ou seja, o Eixo X da View, mais 16)


Segunda Declaração:

Código:

xx<global.hearts*16+4;

Na segunda declaração de For, temos que dizer o que queremos, como se fosse a função If. Nesse caso "traduzindo para IF" seria:

Código:

If xx <= global.hearts*16+4;

traduzindo para o portugues: "Se xx for menor que global.hearts*16+4".
"Porque 16?" -- Porque é o mesmo numero que usamos na view_xview (eu acho).
"Porque +4?" -- Porque dá um total de 20, que divindindo 100 gera o produto 5. (Nesse caso, se você colocou global.life = 100 no começo do tuto, apareceram 5 corações; se colocou 30 igual eu, apareceram 3)
"Porque num colocou 20 intao seu burro?!" -- Sei lá!, GM num aceitou... ele tá neurótico hj comigo.


Terceira Declaração:

Código:

xx+=16;

Na Terceira Declaração nós dizemos o que deve acontecer até que a Segunda Declaração possa ser completa. Nesse caso, até que XX seja Maior que global.hearts*16+4.
Nós dizemos aqui que XX deve aumentar em 16 até que isso aconteça.
"E como isso fez aparecer mais corações?" -- Só apareceram mais corações, porque dizemos no código abaixo demos uma ordem de draw_sprite, mas os corações foram mudando de lugar porque declaramos que XX é o valor x da view. Se tivessemos dito, por exemplo, que XX é SCORE, ele aumentaria o SCORE até ele ser maior que global.hearts*16+4... (e isso ficaria totalmente senseless, mas é só um exemplo).
Capiche?


Código a ser Executado:

Código:

draw_sprite(s_hearth,0,xx,view_yview+30);

E por ultimo, declaramos o que deveria acontecer cada vez que XX aumentasse seu valor em +16 (a cada passo do For). Nesse caso, nós declaramos que deveria ser desenhado um novo sprite, usando o valor XX para o eixo x do draw. Ou seja, que cada novo sprite seria desenhando a cada nova posição de view_xview(XX), que foram 16 (inicial), 32, 48, 64... e assim por diante.


É assim mais ou menos que consegui explicar o funcionamento do For como nós o usamos, para entender melhor veja a Aula 6 do Alex FC.
(desculpa a bagunça de caixas de códigos acima, é que o forum tava fazendo ela sumirem se tivessem apenas escritas... to sortudo hj ¬¬)


Para finalizar, se quiser fazer um teste de aumentar ou diminuir corações. Crie um novo Obj e chame-o de obj_controle, nele adicione um evento Step e coloque o seguinte código:

Código:

//teste
if keyboard_check_pressed(ord('X'))
{
global.life -= 10
}

if keyboard_check_pressed(ord('C'))
{
global.life += 10
}

//limitador
if global.life >= 120
{
global.life = 120
}

Aperte X para dimunir a vida, e C para aumentar. O ultimo trecho do código com titulo de limitador, limita a quantidade máxima de corações. Se quiser mais corações ou menos corações, altere o numero baseado em valores multiplos de 10. (10, 20, 30 ... 150, 300, etc).


É isso, espero que tenham gostado.
Não vou postar engine pq criei isso num jogo que estou desenvolvendo, e apenas isolei isso do jogo em questão para trazer a vocês

Próximo Tuto: Criando um Pause Personalizado (Sem usar show_message).


Abração! Até mais galera.
Atencionsamente, DHarrison.