HUD para RPG Maker XP

HUD Totalmente por eventos, com barras de EXP, NEXT EXP, HP, MP; mostra o nível do herói, etc… (semelhante a alguns MMORPGs) tutorial de sistema para RPG Maker XP por zecomeia.

Características:

• Barra de HP;
• Barra de MP;
• Barra de EXP;
• Barra de EXP para próximo level;
• Level do personagem;
• Face com nome do personagem;
• Estado do herói(evenenado, cego, etc.);
• “Level UP!” e “Level Down!”.

Download:
Clique Aqui (sem download no momento)

Créditos e Agradecimentos:
Aero por fazer as imagens usadas nesta demo
zecomeia por programar o sistema
Thibra pela solução pra facilitar o calculo da barra
Linkei pela dica interessante sobre as barras de experiência e próximo level

Informações sobre como utilizar:
Caso for usar esta HUD do jeito em que está mudando apenas as imagens tenha em mente as seguintes informações sobre cada imagem da mesma (para ajudar use como template as imagens na pasta picture da demo):

• 10 imagens com os números de 0 a 9 (para mostrar o nível do personagem);
• 1 imagem/icone de “level up” e 1 de “level down”;
• Icones para mostrar cada estado do herói (envenenado,cego,morto,etc);
• Um fundo para a HUD (porque se não nos movimentos de barras,etc, o fundo vai ficar como cenário);
• Uma imagem com a face e nome do herói devidamente posicionados (siga o template). Envolto à face não deixe transparente porque as barras poderam aparecer por traz, mas deixe transparente o resto, se não as barras podem ser cobertas por causa que a face com o nome  está em um layer acima (SIGA O TEMPLATE!).
• 4 imagens para as barras (pode usar a mesma imagem paras as quatro se preferir).O essencial ao fazer a barra é que ela tenha 100pixeis de comprimento na horizontal (largura,eixo X), já na vertical não importa.
• Uma imagem para ser a “capa” HUD, ou seja, estará no layer de maior prioridade, portanto lembre-se de fazer “furos” (deixar transparente) onde estão localizados os outros gráficos se não os mesmo vão ficar cobertos pela capa da HUD e não aparecerão.

Tutorial

Começando pelas barras
O calculo de todas as barras são muito simples e seguem quase em todos os casos a mesma forma. Acho que muitos devem conhecer o velho, bom e simples calculo de porcentagem? Então é ele mesmo que foi usado. Lembram que foi dito na descrição das imagens que as barras tem que ter 100 pixeis na horizontal? O motivo é deixar a precisão da barra no deslocamento de 1 pixel para cada 1% do estato em questão(HP,  MP,etc). Então seria o seguinte:

no caso do HP
variavel_HP = HP do personagem
variavel_HP *= Largura da barra
variavel_HP /= HP maximo do personagem

Após o calculo pegamos o valor da variavel_HP e colocamos como a coordenada X do “mostrar imagem” da barra em questão e, se preciso, somamos um valor a variavel_HP para melhor posicioná-la.

no caso do MP
variavel_MP = MP do personagem
variavel_MP *= Largura da barra
variavel_MP /= MP maximo do personagem

Após o calculo pegamos o valor da variavel_MP e colocamos como a coordenada X do “mostrar imagem” da barra em questão e, se preciso, somamos um valor a variavel_MP para melhor posicioná-la.

Já no caso da experiência, se olhar no controle de variaveis verá que não existe um “EXP max”, portanto foi preciso fazer um pré calculo para descobrirmos qual o valor máximo.

[001]EXP_Calc_Bar1 = EXP do personagem
Mudar nível: Todo o grupo +1 nivel

[002]EXP_Calc_Bar4 = EXP do personagem
Mudar nível: Todo o grupo -1 nivel
[003]EXP_Calc_Bar2 = EXP do personagem
[004]EXP_Calc_Bar3 = [003]EXP_Calc_Bar2
[001]EXP_Calc_Bar1 -= [004]EXP_Calc_Bar3
Mudar Experiência: Todo o grupo +[001]EXP_Calc_Bar1
#Comentario: Aqui já começa o simples calculo de porcentagem
[002]EXP_Calc_Bar4 -= [003]EXP_Calc_Bar2
[001]EXP_Calc_Bar1 *= Largura da barra
[001]EXP_Calc_Bar1 /= [002]EXP_Calc_Bar4

*OBS: para a barra de próximo level, faça o mesmo calculo acima porém será acrecentado algo mais. Veja:

[001]EXP_Calc_Bar1 = EXP do personagem
Mudar nível: Todo o grupo +1 nivel

[002]EXP_Calc_Bar4 = EXP do personagem
Mudar nível: Todo o grupo -1 nivel
[003]EXP_Calc_Bar2 = EXP do personagem
[004]EXP_Calc_Bar3 = [003]EXP_Calc_Bar2
[001]EXP_Calc_Bar1 -= [004]EXP_Calc_Bar3
Mudar Experiência: Todo o grupo +[001]EXP_Calc_Bar1
#Comentario: Aqui já começa o simples calculo de porcentagem
[002]EXP_Calc_Bar4 -= [003]EXP_Calc_Bar2
[001]EXP_Calc_Bar1 *= Largura da barra
[001]EXP_Calc_Bar1 /= [002]EXP_Calc_Bar4

Next_exp_bar = [001]EXP_Calc_Bar1
Next_exp_bar += 1
Next_exp_bar *= -1
Next_exp_bar += 1

Após o calculo pegamos o valor da EXP e colocamos como a coordenada X do “mostrar imagem” da barra em questão e, se preciso, somamos um valor à EXP para melhor posicioná-la.

Bem simples agora certo. No meio dos calculos da experiência foi colocado uma instrução dizendo para fazer condições para as habilidades, isso porque se você parar pra pensar perceberá que caso o personagem esteja no level 8 por exemplo, e aprenda uma magia no level 9 então essa magia já será aprendida no level 8 por causa do comando de subir +1 level. Existe outra forma de driblar isso simplesmente aumentando um no level de cada magia que vai ser aprendida no Database do seu jogo, mas aí pode parecer gambiarra alem de possível privação de utilizar o level 99 para aprender uma habilidade, ainda não pensei na possibilidade. Use a imaginação, combine as idéias, talvez poupe seu trabalho fazendo a condição apenas para uma magia no level 99.

DICA:
Usar a barra de experiência e de próximo level na HUD pode ficar meio estranho porque a diferença está apenas na direção que a barra se move, quando uma está no máximo outra está no mínimo e vice versa. Uma idéia proposta por Linkei é fazer a barra de experiência como uma barra total, ou seja, de toda esperiência ganha no jogo sendo que só chegaria ao máximo no ultimo level, enquanto a de próximo level continua no mesmo esquema.

O Contador de level
É bem simples fazer este contador também. Como foi dito no começo, são usadas 10 imagens, cada imagem contem um número de 0 a 9. Como o level no database só vai até 99 então faremos um contador de apenas 2 digitos, que são as:

Unidades
Como o no database o level vai até 99(2 digitos) então para pegarmos a casa das unidades pegamos o resto do LV divido por 10.

variavel_LV = Level do personagem
variavel_LV %= 10
variavel_LV(unidades) = variavel_LV

Agora a variável “variavel_LV(unidades)” tem o valor das unidades do level, então basta criar 10 condições onde cada uma verifica se
“variavel_LV(unidades)” é igual a um número de 0 a 9, e então no corpo da condição colocamos o comando de mostrar imagem com a imagem do número correspondente(use o mesmo número para todas as imagens). Vamos colocar uma condição na exceção da outra(com exceção da ultima) para amenizar possíveis problemas com lag.

se variavel_LV(unidades) == 0
mostrar imagem(10, “numero0”, x, y)
exceção
se variavel_LV(unidades) == 1
mostrar imagem(10, “numero1”, x, y)
exceção
se variavel_LV(unidades) == 2
mostrar imagem(10, “numero2”, x, y)
exceção
…
…
… até chegar ao 9

Para evitar mais o lag, faça isso dentro da condição de level Up/Down, assim só será analisadas essas condições e executados os eventos quando mudar de level.

Dezenas
É feito da mesma forma das unidades, porem ao invés de pegarmos o resto da divisão por 10, apenas dividimos por:

variavel_LV = Level do personagem
variavel_LV /= 10
variavel_LV(dezenas) = variavel_LV

O resto do procedimento também é o mesmo, basta trocar o número da imagem, a posição(X,Y).

se variavel_LV(dezenas) == 0
mostrar imagem(11, “numero0”, x, y)
exceção
se variavel_LV(dezenas) == 1
mostrar imagem(11, “numero1”, x, y)
exceção
se variavel_LV(dezenas) == 2
mostrar imagem(11, “numero2”, x, y)
exceção
…
…
… até chegar ao 9

Para evitar mais o lag, faça isso dentro da condição de level Up/Down, assim só serão analisadas essas condições e executados os eventos quando mudar de level.

Level UP/Level Down
Basicamente existem duas variáveis que contém juntas o valor do level do herói, porém uma é atualizada constantemente. Já a outra apenas quando o herói subir/descer o level. Essa parte do sistema é dividido uma parte para o level up e e outra para o level down, a diferença fundamental entre os dois é apenas a primeira condição onde uma comprar se a variável que é atualizada constantemente é maior que a outra, e no caso do level down a comparação é o inverso, ou seja, é comparado se a variável constantemente atualizada é menor que a outra.

Fora isso o resto se trata de eventos visuais/audiveis para indicar o level up ou level down. Outra coisa importante é que são atualizados alguns valores para evitar bugs, etc.

Estados
Essa indiscutivelmente é a parte mais básica desta HUD.Simplesmente é criada uma variavel que vai ser usada para fazermos as condições onde cada condição, em seu corpo, tem um comando para mostrar a imagem do ícone do estado na HUD e atribuir aquele estado ao herói.Foram colocadas algumas bobagenzinhas a mais, como causar “Game Over” quando o personagem chegar a HP=0 (estado morto), e antes do game over mudar o gráfico do herói para deixá-lo deitado indicando que está morto.

Aqui acaba a resumida explicação desta HUD, em caso de duvidas/bugs contate sj-pereira@hotmail.com.
***Na demo eu posso ter usado, sem necessidade, variaveis a mais entre outras coisas, isso aconteceu porque teve coisas que passaram despercebidas quando terminei o sistema (coisas de testes).

fonte: Tweg