Forums » RPG Maker XP

Aula Extra 4 - Criando Barras (HP/MP/EXP/...)

    • 404 posts
    14 de maio de 2015 01:25:53 ART

    Aula Extra 4 - Criando Barras (HP/MP/EXP/...)

     


    Aula 1 - Label
    Aula 2 - Switch
    Aula 3 - Switch Local
    Aula 4 - Variaveis
    Aula 5 - Mostrar Imagem
    Aula 6 - Armazenar Número
    Aula 7 - Operação de Tempo/Condições
    Aula 8 - Mostrar Mensagem/Mostrar Escolha/Opções de Mensagem/Esperar
    Aula 9 - Teletransporte/Posição de Evento/Movimento de Tela
     
    Aula Extra 1 - Criando Escolhas por Imagens (Menus)
    Aula Extra 2 - Criando seu ABS básico
    Aula Extra 3 - Trabalhando com Projéteis
    Aula Extra 4 - Criando Barras (HP/MP/EXP/...)

     

    Voltando depois de muito tempo para ensinar a criar barras, para HP, MP, e outros.
    Essa aula requer conhecimento sobre variáveis, condicionais e imagens.

     

    O que faremos?

     

    Imagem Postada[img="http://dl.dropbox.com/u/13824693/imagem3².PNG" alt="" width=315 height=235]

    Nessa aula aprenderemos a criar barras que demonstrem de forma gráfica o valor de uma variável em relação ao valor máximo que ela pode alcançar. São utilizados cálculos de porcentagem para descobrir a situação da variável perante seu valor máximo.

     

    Programando

     

    Primeiro, óbvio, é preciso ter as imagens à serem utilizadas. Para iniciantes, é recomendável que as barras tenham tamanhos redondos na sua largura (100, 200, 300, etc), pois isto facilita um tanto os cálculos para descobrir a posição da barra em relação ao seu background. Outra coisa é que, se a barra terá um background (uma borda ou qualquer coisa do tipo), essa parte terá que ficar em uma imagem separada. Usaremos nesta aula imagens simples, que funcionarão dos dois modos que serão ensinados (sim, vamos aprender dois modos para calcular a posição/tamanho da barra):

    Imagem Postada
    Imagem Postada
    (Salve as imagens na pasta Pictures com os nomes de fundo.png e barra.png, respectivamente)


    Agora podemos começar com, de fato, a programação. É importante que todo o código fique num evento em Processo Paralelo, pois os cálculos precisam ser refeitos à todo instante e a imagem atualizada. Recomendo um Evento Comum, mas por fim isso tanto faz.
    Aqui trabalhamos com variáveis, como os cálculos são todos baseados em um valor e no valor máximo que ele pode atingir, precisamos guardar tudo isso em uma variável. Nesta aula, de exemplo, faremos a barra mostrar a quantidade de HP que o herói principal possui, logo, armazenamos:

    Imagem Postada

    Como já disse, precisamos transformar os valores em porcento: se o valor retornado for 100(%), a barra será mostrada cheia, se o valor retornado for 50(%), será mostrada pela metade, e assim vai. A base para o cálculo é essa:

    RESULTADO = VALOR ATUAL * 100 / VALOR MÁXIMO

    Logo, temos isso:

    Imagem Postada

    Agora, como já temos uma variável para saber a porcentagem do HP atual, basta fazer a aplicação de alterar a barra de acordo com ela. A partir daqui existem dois modos para fazer isso, um é mais genérico, muito mais fácil de fazer, mas funciona apenas com imagens encostadas no canto da tela, ou de modo que exista outra imagem sobrepondo a da barra, pois esta sairá de seu contorno, o outro modo é mais cansativo de fazer, talvez até mais difícil. Bora lá:

    Barra no canto da tela


    Esse modo só funciona para imagens que ficam no canto da tela pois ao invés de diminuirmos o tamanho da barra, movemos ela para trás, logo se não estiver no canto vai ficar lá uma barra jogada onde não deveria. Fica melhor para compreender com a imagem:

    Imagem Postada
    (Naturalmente, só se vê o que está dentro da janela - se a barra sai, não vemos mais ela)

    É bem simples de se programar. A lógica é essa: mostramos a imagem da barra na posição X e Y que desejamos (nesse caso, x = 2 - tamanho da barra (no caso, 2-100 = -97), y = 2 - reservamos 2 pixels para a borda da barra), como a imagem deve ser movida a esquerda, o X deve ser diminuído, ao ficar negativo a imagem sairá da tela. Lembram da dica da imagem ter 100 pixels de largura? Pois então, isso já nos trás uma grande facilidade nessa parte pois podemos simplesmente somar de X o resultado da porcentagem. Por exemplo, se temos 100% de HP, a barra deverá ser mostrada nas coordenadas (2,2), pelos cálculos (2 - 100 + 100,2). Logo depois, mostramos a imagem das bordas para a barra (é importante que a imagem das bordas seja mostrada depois da imagem das barras, pois assim uma imagem sobrepõe a outra da maneira correta). Temos:

    Imagem Postada

    Para esse modo, é isso. Note que o tamanho da imagem e o valor usado na porcentagem (100) são usados em conjunto, um influencia o outro. Logo, se a imagem tiver 150pixels de largura, facilita fazer o cálculo da porcentagem multiplicando por 150.

    Dica: usar o comando "Mover Imagem" ao invés de "Mostrar Imagem", para que assim a imagem deslize sobre a tela ao invés de mudar sua posição de repente.

    Tamanho da imagem


    Esse modo se baseia na alteração da largura da imagem (magnitude x), e não na sua movimentação pela tela. A lógica dele é muito mais simples e temos a vantagem de poder colocar a imagem em qualquer lugar sem os problemas do modo anterior. Porém, como disse, é mais chato de ser feito, o evento fica bem comprido, também. Aqui utilizamos condicionais. É aquela coisa: a porcentagem é 100%? Mostra a imagem com magnitude 100. A porcentagem é 30%? Mostra a imagem com magnitude 30. Infelizmente o RPG Maker XP não nos dá opção para manipular a magnitude através de variáveis (a não ser que utilize scripts, mas nesse caso, só eventos), logo temos que criar várias condicionais, alterando apenas a magnitude. Aconselho fazer essas condições alterando de 5 em 5, logo a barra irá se mover a cada 5% de HP alterado. Assim:

    Imagem Postada



    É isso. Qualquer dúvida, pode mandar. :-)