[Destiny Script] Barra de HP sem carregar arquivos externos (Atualização 1.1.0)

[Dr.XGB]

Barra de HP

sem carregar arquivos externos

Autor: Dr.XGB
Plataforma usada: RPG Maker 2000
Dificuldade: Intermediário
Outro Motor: Destiny Patcher 2.0

Introdução:
[box class=catbg3]

E aí, pessoal?
Neste tópico você vai aprender a criar uma barra de HP sem precisar carregar nenhum arquivo externo, ou seja, sem precisar abrir nenhuma picture, e para isso, somente com Destiny Script conseguimos fazer esse sistema, apresentando uma técnica totalmente diferente da maneira feita com eventos. Acredito que só será preciso carregar uma imagem caso você queira fazer uma borda legal para o seu jogo, isso eu também vou te mostrar como se faz.
Tudo que será necessário é conhecer um pouco mais sobre o objeto Picture e uma noção básica de numeração hexadecimal, aplicando para as cores. Caso você não conhece a aplicação de números hexadecimais, clique aqui para ver o meu Editor de Paletas que criei com Destiny; lá no tópico eu expliquei um pouco sobre essa aplicação às cores, caso você queira mudar a cor da sua barrinha.
Nós vamos separar este tutorial em 3 etapas, explicando aos poucos como você pode fazer e aplicar o uso dessas barras no seu projeto.

Vamos ao tutorial!

[/box]

Etapa 1: Criando as barras

Antes de pensarmos em definir a barra de HP, precisamos pensar onde ele ficará posicionada na tela e como ela deve aparecer. É altamente recomendável que você faça isso em um Evento Comum com início Processo Paralelo; dessa forma, você não precisará fazer o comando em todos os mapas. Se você achar necessário criar uma switch para que ela apareça, não tem problema. é óbvio que em um jogo você precisará dela, pois você não vai querer assistir uma cena do jogo onde não aparece o herói mas com a barra de HP no canto da tela. Isso depende da maneira que você vai trabalhar no seu jogo.
Usando o Destiny Script, realize o seguinte comando para posicionar a Picture antes de criar a imagem:

$
// Posicionar pictures antes de serem criadas
Picture[2].X = 56;
Picture[2].Y = 12;

Muito bem! Colocamos a picture antes de criá-la para que não ocorra o caso de Picture aparecer no canto da tela e, de repente, mudar para a posição desejada, já que a posição inicial de todas pictures é 0,0.
Agora para criar as pictures sem carregar, no Destiny existe uma propriedade chamada AuroraSheet. É ela que permite fazer com que as imagens do RPG Maker apareçam no seu jogo. E nessa propriedade ainda temos  sub-propriedades e métodos para ela.
Antes de tudo, vamos verificar se a Picture 2 possui um AuroraSheet, ou seja, se possui uma imagem nela ou se está vazia. Neste caso usaremos uma condição e nela vamos chamar o método IsEmpty(). Se a picture estiver realmente vazia, então começaremos a criar a picture com o método Create(w,h). Este método pede dois parâmetros: comprimento e largura; o tamanho da imagem que está sendo criada. Vamos deixar o comprimento como 100 para podermos associar o HP do herói em porcentagem.
Depois disso, usaremos a propriedade Palette[] para o obejto Picture, que é uma array onde nós temos todas as cores da picture. Esta picture que nós criamos agora não possui cores no momento, então todas as cores estão definidas com a cor preta, que possui o valor 0. Como o RPG Maker só aceita imagens de 256 cores, então o limite dessa array é de 0 até 255. Como todas as imagens com cores indexadas, ou seja, que possui uma paleta própria, temos então a primeira cor da paleta é compreendida como a cor transparente (isso quando ativada com a propriedade UseMaskColor), como a Picture foi criada agora com a propriedade AuroraSheet, a propriedade UseMaskColor estará sempre desativada, ou seja, ela ficará visível. Portanto não se preocupe com isso agora porque nós vamos aproveitar essa cor para fazer a nossa barra.

A primeira cor podemos deixar preta mesmo e a segunda, para HP, pode ser vermelha. Não se esqueça de aplicar o método FlushPalette para aplicar as alterações das cores para a picture.
Então o código ficaria assim:

$
// Barra de HP
if(Picture[2].AuroraSheet.IsEmpty())
  Picture[2].AuroraSheet.Create(100,16);

  // Definir cores da barra
  Picture[2].Palette[0] = 0;    // Preto
  Picture[2].Palette[1] = 0xFF; // Vermelho

  // Aplicar cores à imagem
  Picture[2].FlushPalette();
endif;

Podemos confirmar o comando com "Ok" lá nos comentários do RPG Maker e vamos fazer agora a barra do HP preenchendo a barra preta que criamos. Imagine que no primeiro nível você tem um determinado valor de HP Máximo, no segundo, naturalmente, seu HP máximo é maior que o do primeiro nível, mas você quer que a barra continue do mesmo tamanho. Para isso você vai precisar preencher a barra de acordo com a porcentagem de HP em relação ao HP Máximo, multiplicando o HP por 100 e dividindo pelo HP Máximo. Assim teremos a porcentagem de HP:

$
// Calcular porcentagem de HP do herói e retornar para v[1]
v[1] = (Actor[1].HP*100)/Actor[1].LevelAttribute[Actor[1].Level].MaxHP;

Acabei preferindo armazenar em uma variável para que possamos usar essa porcentagem em outras ocasiões, caso você queira criar um menu com a porcentagem de HP ou escrever em uma mensagem o valor percentual. E foi por essa razão que criei a barra com 100px de comprimento em AuroraSheet.Create.
Agora que fizemos o cálculo da porcentagem, temos que preencher a barra vazia primeiro para que o Processo Paralelo esteja sempre atualizando a barra de HP caso o herói sofra um dano durante o mapa. Para isso, no objeto Picture[], chamaremos o método FillRect() que possui a função de preencher um retângulo dentro da picture com a cor selecionada de acordo com a ordem da paleta que criamos no início deste tutorial.
Primeiro vamos criar o retângulo preto, indicando o espaço vazio da imagem:

$
Picture[2].FillRect(
                    0,                 // Pos X
                    0,                 // Pos Y
                    Picture[2].Width,  // Comprimento
                    Picture[2].Height, // Largura
                    0                  // Cor do retângulo
                   );

Pos X - Coordenada X onde iniciará o desenho do retângulo;
Pos Y - Coordenada Y onde será feito o retângulo;
Comprimento - Extensão horizontal do retângulo, coordenada da picture onde terminará o desenho do retângulo;
Largura - Extensão vertical do retângulo;
Cor do retângulo - o número indica a index da paleta da imagem. No caso do 0, como já definimos anteriormente no código, indicará a cor preta.

Daí então, preencheremos a cor vermelha que representará a porcentagem de HP do herói:

$
// Preencher com a segunda cor de acordo com HP do herói
Picture[2].FillRect(0,0,v[1],Picture[2].Height,1);

Podemos perceber que neste código, temos algumas diferenças: a primeira é que o comprimento do retângulo terá o valor representado pela variável que fizemos o cálculo da porcentagem. Isso significa que o retângulo será preenchido até o valor atual do HP em porcentagem. A segunda diferença é que agora na definição da cor, deixamos o valor de 1, que representa a cor vermelha na paleta que criamos para esta imagem.
Depois disso tudo, teste o seu jogo. Se a barra aparecer de acordo com a figura abaixo, quer dizer que o código funcionou.

Etapa 2: Mudando a cor da barra de acordo com a porcentagem

Agora que já temos a noção básica para montar uma barra através do objeto Picture[] sem precisar carregar algum arquivo externo, ou seja, criamos tudo dentro do jogo, vamos deixar essa barra de HP mais atrativa. Nesta etapa apenas vamos enfeitar a nossa barrinha de HP, mudando as cores de acordo com a porcentagem do HP do herói.

Vamos considerar as cores da nossa barra da seguinte maneira:

HP acima de 75% - Verde;
HP acima de 25% - Amarelo;
HP abaixo de 25% - Vermelho;

Para conseguirmos este resultado, teremos que realizar algumas alterações no código onde define as cores da imagem e no desenho do retângulo da barra de HP. Primeiro vamos voltar ao comentário onde está a definição das cores da imagem e vamos acrescentar mais duas cores à paleta dela:

[box title=Antes]$
// Definir cores da barra
Picture[2].Palette[0] = 0;    // Preto
Picture[2].Palette[1] = 0xFF; // Vermelho[/box]
[box title=Depois]$
// Definir cores da barra
Picture[2].Palette[0] = 0;    // Preto
Picture[2].Palette[1] = 0xFF; // Vermelho
Picture[2].Palette[2] = 0xFFFF; // Amarelo
Picture[2].Palette[3] = 0xCB00; // Verde[/box]
Confirme e salve as alterações, vamos pular lá para a parte onde está o último comando (preencher a barra vermelha representando a porcentagem do HP). Você tem 3 maneiras de fazer a barra mudar de cor de acordo com o HP do herói, vou organizar do método mais fácil até o mais trabalhoso em spoilers. Escolha aquele que for melhor pra você, mas se quiser experimentar os 3 métodos também não há problema:
:mrm=linha:

Método A: Eventos - Usando "Fork Conditions"

[close]

Método B: Destiny Script - Condições com variáveis de acordo com o método A

$
if(v[1] >= 75)
  Picture[2].FillRect(0,0,v[1],Picture[2].Height,3);
else
  if(v[1] >= 25)
    Picture[2].FillRect(0,0,v[1],Picture[2].Height,2);
  else
    Picture[2].FillRect(0,0,v[1],Picture[2].Height,1);
  endif;
endif;

[close]

Método C: Destiny Script - Verificando condição através de equações

$
if((Actor[1].HP*100)/Actor[1].LevelAttribute[Actor[1].Level].MaxHP >= 75)
  Picture[2].FillRect(0,0,(Actor[1].HP*100)/Actor[1].LevelAttribute[Actor[1].Level].MaxHP,Picture[2].Height,3);
else
  if((Actor[1].HP*100)/Actor[1].LevelAttribute[Actor[1].Level].MaxHP >= 25)
    Picture[2].FillRect(0,0,(Actor[1].HP*100)/Actor[1].LevelAttribute[Actor[1].Level].MaxHP,Picture[2].Height,2);
  else
    Picture[2].FillRect(0,0,(Actor[1].HP*100)/Actor[1].LevelAttribute[Actor[1].Level].MaxHP,Picture[2].Height,1);
  endif;
endif;

[close]

:mrm=linha:

Para quem escolheu o método C, vale lembrar que aquele comando que usamos para retornar a porcentagem do HP para uma variável não será necessária pois já usamos a mesma equação para a condição e para definir o comprimento do retângulo. Os três métodos terão o mesmo resultado, a diferença está mesmo na aplicação já que a lógica é a mesma.

Teste o seu jogo e então você verá que a barra vai mudar de cor quando chegar a um determinado valor. Coloque no mapa coisas que causam dano ao herói, batalhas ou se quiser fazer um ABS também não tem problema; faça o que você quiser, desde que seja para mostrar a funcionalidade deste sistema...

Caso você queira deixar uma borda na sua barra de HP, será necessário carregar uma picture (neste caso sim precisará de um arquivo externo) e colocá-la na mesma coordenada da barra que a gente criou por códigos, lembrando que a borda ela tem que ficar inferior à picture da barra, portanto esta será a Picture[1].
Se você não possui nenhuma no momento, você pode pegar esta barra que fiz justamente para este sistema. Não está um gráfico bom porque não tenho muita habilidade em Pixel Art, mas você pode fazê-la do jeito que você quiser de acordo com este modelo:

Etapa 3: Fazendo um efeito gradiente na barra de HP

Depois de tudo que aprendemos nas 2 últimas etapas, provavelmente você já sabe como desenhar a barra de HP e como definir as cores da barra de maneira desejada. Para mostrar que o sistema não acaba por aqui, vou mostrar como deixar a sua barra de HP mais interessante ainda, usando um efeito gradiente que vai do vermelho, passa pelo amarelo até ficar verde.
Vamos precisar criar mais duas variáveis: uma para selecionar as cores da paleta e outra para definir a cor causando o efeito gradiente.
Nós vamos alterar os mesmos lugares que usamos na etapa 2. Para criar o efeito, é necessário utilizar um loop e alguns cálculos para conseguir o efeito desejado:

$
  // Definir cores da barra
  Picture[2].Palette[0] = 0;
  Picture[2].Palette[1] = 0xFF;
  // Efeito gradiente do vermelho para o verde
  v[5] = 1;
  for(v[4] = 2; v[4] <= 101; v[4]++)
    if(v[5] <= 255)
      // Vermelho para Amarelo
      Picture[2].Palette[v[4]] = (v[5]<<8)+0xFF;
      v[5] += 7;
    else
      // Amarelo para Verde
      Picture[2].Palette[v[4]] = 0xFFFF-(v[5]-255);
      if(v[5] <= 255+32)
        v[5] += 1;
      else
        v[5] += 6;
      endif;
    endif;
  next;

Ao desenhar o retângulo na imagem também terá um raciocínio do loop, verificando todas as cores que criamos (no caso mais 100 cores novas) e preencher um espaço vertical com uma cor de cada. Lembre-se que agora como não estamos desenhado um retângulo com o tamanho do HP, temos que criar uma condição para romper o ciclo quando a verificação chegar ao valor atual usando a estrutura break quando chegar lá:

$
for(v[4] = 0; v[4] < 100; v[4]++)
  if(v[4] > v[1])
    // Interromper ciclo se passar do HP atual
    break;
  endif;
  Picture[2].FillRect(v[4],0,v[4]+1,Picture[2].Height,v[4]+1);
next;

E, enfim, o resultado de todo esse trabalho:

Download da Demo: Versão 1.0
(NOVO) Versão 1.1.0

[box class=catbg3]Então é isso!
Neste tutorial vimos que, em alguns casos, não é necessário desenhar imagens para criar uma barra HP; você pode desenhá-las com a ajuda do próprio RPG Maker com os códigos do Destiny Script para o objeto Picture[]. A única imagem que precisou ser carregada foi da borda da barra, colocada em uma camada inferior da barra para causar a impressão de que a barra está dentro da borda.
Você pode fazer vários tipos de barras de HP com essa lógica, nesta demo disponível acima eu fiz um outro tipo de barra bem curioso calculando pixels usando o objeto "Math" e os métodos "Sin" e "Cos", que retornam o Seno e o Cosseno dos valores respectivamente. Só que no meu notebook está dando muito lag devido ao processo de desenho pixel por pixel e dois loops sendo executados ao mesmo tempo. Gostaria que vocês verificassem no computador de vocês e me avisar se está dando lag também ao selecionar o Estilo Extra. Também deixei um outro meio de preenchimento que é o Gradativo, onde a barra vai encolhendo ou crescendo até chegar ao valor atual.
Com essa ideia, gostaria que vocês fizessem a barra de MP também, selecionando uma das formas aprendidas neste tutorial para pegar o raciocínio deste sistema.

Espero que tenham gostado deste tutorial e que lhes possa ser útil o material apresentado neste tópico.
Até a próxima, pessoal![/box]



Log de Atualizações:

Versão 1.1.0
- Nova Barra de HP em forma de anel.

[cristianoforce]

Interessantíssimo isto  , é bacana conferir do que o Destiny Script é capaz.

Muito bom tutorial Dr. =)
+gold

[Dr.XGB]

Atualização Disponível!

Arrumei o problema do lag na barra de energia extra. Ao invés de formar um círculo, deixei a barra de Hp em forma de Anel mesmo. Veja como ficou nesta nova versão:

[elvio]

Acho que em circulo fica esquisito :P
mas se não de bug tudo bem =)

[Jalax]

Estilo B -> Instantânea -> This

Fora isso ficou muito bom.
E o círculo não dá lag não.