Forums » RPG Maker XP

Criando uma HUD simples em 4 passos!

    • 404 posts
    14 de maio de 2015 01:12:13 ART

    Introdução:

     

    Estes dias o membro Clif, me pediu um sistema de HUD por eventos. E eu fiz com um método que eu conhecia desde 2010, um método simples de um tutorial do Makson.
    Só que a maneira dele de criar HUDs, só era possível com uma variável que armazena o Hp e HP max. do herói, mas se por exemplo, quisemos criar um sistema The Sims, onde o jogo tem barras de fome, sono, e etc... teremos que nos limitar no HP e MP do herói.
    Mas não, estou trazendo um método meu, com base deste tutorial, aqui para vocês,e com isto você poderá fazer quantas HUDs quiser.



    Passo 1:

     

    Primeiro, crie o gráfico da sua HUD como desejar, mas guarde o número de sua largura.
    No meu caso a largura da minha HUD é de 130.

    Agora crie um gráfico com o mesmo tamanho. Mas este será o fundo da sua barra, que quantos mais você vai perdendo HP, mais essa barra vai aparecendo:
    Spoiler 
     


    Importe as imagens da sua HUD para a pasta pictures do seu projeto.
    Agora, em eventos comuns, você deixa a condição de inicio em processo paralelo, e cria uma switch qualquer para este evento, eu coloquei o nome desta switch de ''~~HUD~~''.
    Agora crie uma variável com o nome de "Var_Divisão" e iguale à 100:
    Spoiler 
     


    Feito isto, feche a aba de eventos comuns, e crie um evento no mapa em processo paralelo, com os seguintes comandos:
    Opção de switch ~~HUD~~ ON.
    Agora crie uma nova variável com o nome de "Variável_1" e iguale à 100.
    Depois, é só colocar um comando "apagar evento temp." e pronto, seu evento deve estar assim:
    Spoiler 
     



    Passo 2:

     

    Agora, volte à aba de eventos comuns, e crie uma nova variável com o nome de "Y_Variavel_1"
    Na constante você deixará o valor desejado para a coordenada Y da sua hud no mapa, no meu caso eu deixei zero:
    Spoiler 
     


    Feito isto, crie uma nova variável com o nome de X_Variavel_1, e em operando, vá em "variável" e escolha a variavel: "Variavel_1":
    Spoiler 
     


    Dê ok.
    Agora com a variável X_Variavel_1, você a multiplica pela largura da sua HUD.
    Para fazer isto, em operação você marca o símbolo (*) da multiplicação, e em constante você coloca o tamanho da largura da sua HUD, a minha tem largura de 130:
    Spoiler 
     



    Passo 3:

     

    Agora, com a variável "X_Variavel_1" novamente, você irá dividi-la pela variável "Var_Divisão".
    Para fazer isto, com a variável "X_Variável_1" você marca a opção com este símbolo (/) que é o de divisão, na opção operação, e em operando indo na opção "variável" você seleciona a variável "Var_divisão":
    Spoiler 
     


    Dê ok.
    E novamente com a variável "X_Variavel_1", você irá subtraí-la pelo valor da largura da HUD (no meu caso 130):
    Spoiler 
     


    Feito tudo isto, você irá chamar o comando "mostrar imagem" e irá selecionar a imagem do fundo da sua HUD, no meu caso a imagem branca.
    Na coordenada Y você deixa a constante igual à que você deixou na variável: Y_Variável_1, eu por exemplo deixem ambas em zero:
    Spoiler 
     


    Agora, chame outro comando de mostrar imagem (nº2) e selecione a imagem da sua HUD.
    Em "especificar" você marca a opção "por variável" e lá, você coloca as variáveis X_variavel_1 e Y_variavel_1:
    Spoiler 
     

    Seu comando de evento, no final deverá ficar assim:
    Spoiler 
     



    Passo 4:

     

    Configuramos a HUD em si, mas ainda falta fazer com que possa-se diminuir o valor da variável "variavel_1" na HUD.
    Para fazer isto, apenas de teste, você cria um NPC no mapa, que ao falar com ele a variável "variável_1" diminua em 10:
    Spoiler 
     


    E para aumentar, crie outro NPC no mapa, porém agora a constante da variável "variavel_1" irá aumentar em 10:
    Spoiler 
     


    Certo, agora sua HUD aumenta e diminuí conforme você falar com o NPC no mapa.
    Mas, ainda há um problema! 
    Quando você aumenta a sua HUD ao máximo, e depois mais ainda, a imagem da barra da hud sai de dentro da imagem base (a img branca).

    Para acabar com este problema, crie um evento em processo paralelo no mapa, para bloquear isto.
    Em comandos de eventos, coloque uma condição com a variável "variável_1" e deixe a constate da mesma em 110, e coloque a opção "igual a ":
    Spoiler 
     


    Dentro da condição, você coloca a opção de switch ~~HUD~~ em OFF, e coloque para a variável: ''variável_1" diminuir 10:
    Spoiler 
     

    Depois, coloque para que a switch ~~HUD~~ fique ON novamente.
    Seu evento deverá estar assim:
    Spoiler 
     


    Agora, neste mesmo comando, repita este processo, porém, na constante da variável, dentro da condição, você deixará em zero, e na opção "menor":
    Spoiler 
     


    Dentro da condição você coloca a switch do evento comum da hud em OFF, e depois coloque para que a variável "variavel_1" fique igualada à zero:
    Spoiler 
     


    Coloque para que a switch ~~HUD~~ fique ON novamente e dê ok.
    Se evento deve estar assim:
    Spoiler 
     


    Isto tudo foi feito para que a variável da constante da HUD não fique negativa.

    Acabamos nossa tutorial, agora é só testar para ver se funciona!
    E você poderá fazer quantas HUDs quiser, usando este método, basta substituir as imgs, e as variáveis da constante, e coordenadas X e Y.



    Considerações finais:

     

    Espero que tenham gostado deste tutorial!
    Se restar alguma dúvida, baixa a demo em anexo, onde eu criei mais de uma HUD com este tutorial.

    Créditos: MayLeone pelo tutorial e novo método;
    Makson pelo método.