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?
[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):
(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:
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:
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:
(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:
Para esse modo, é isso. Note que o tamanho da imagem e o valor usado na por
centagem (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:
É isso. Qualquer dúvida, pode mandar.
