Criando uma HUD simples de HP e MP na tela

Introdução

Oi gente... Venho a trazer um tutorial que criei na RMB de como criar uma HUD simples de HP e MP na tela, breve trarei mais scripts criados por mim :)

Bom... Aqui começa a aula:

No RMVX, os nomes da HP é simplesmente hp e MP é sp

No caso, nós criaremos um sprite, então comece o script assim:

Código:

class HUD < Sprite
 
  #Inicia
  def initialize(view)
    super(view)


E então, você deve criar as cores que você quer usar exemplo:

Código:

    @ch1 = Color.new(50,0,0)
    @ch2 = Color.new(222,26,50)
    @cm1 = Color.new(50,60,60)
    @cm2 = Color.new(0,240,50)
    @back = Color.new(0,0,0)
    @back2 = Color.new(240,240,80)


Lembre-se tudo que começa com @alguma coisa, significa que isto é um atalho e que ele simplesmente não faz nada, você deve colocar um = e definir o que vai acontecer. Outra coisa que é necessário lembra é: nos '()' tem 3 números, por exemplo, (50,0,0) isso significa que esta cor terá 50 de vermelho, 0 de verde e 0 de azul.

Depois é necessário criar o bitmap, que futuramente fará a barra, use isto:

Código:

    #Cria o Bitmap
    self.bitmap = Bitmap.new(200,200)
    self.bitmap.font.name = "UmePlus Gothic"
    self.bitmap.font.size = 20
    self.z = 300
    update
  end


E então crie um 'atualiza' e um 'apaga o conteúdo', parece pouco importante, mas é fundamental para a execução

Código:

  #Atualiza
  def update
    super
 
    #Apaga o conteudo
    self.bitmap.clear


Para fazer a barra você deve usar fill.rect's que eu não sei usar, então peguei um que sempre uso de base:

Código:

    hp = $game_actors[1].hp
    maxhp = $game_actors[1].maxhp
    wb = 116 * hp / maxhp
    self.bitmap.fill_rect(10, 10, 120, 10, @back)
    self.bitmap.fill_rect(11, 11, 118, 8, @back2)
    self.bitmap.fill_rect(12, 12, 116, 6, @back)
    self.bitmap.gradient_fill_rect(12, 12, wb, 6, @ch1, @ch2)
    self.bitmap.draw_text(60, 0, 200, 24, "HP")


Observe que nas primeiras linhas, nós definimos sempre, o hp e o hp máximo!
Onde tem: $game_actor[1] significa que os dados serão retirados do primeiro persongem do grupo se você mudar para $game_actor[2] ele irá retirar os dados do segundo, e assim vai.

Agora a barra de MP (no RMVX sp) faça a mesma coisa, mas só mude tudo de hp pra mp:

Código:

    #Cria a barra de MP
    mp = $game_actors[1].mp
    maxmp = $game_actors[1].maxmp
    wb = 116 * mp / maxmp
    self.bitmap.fill_rect(10, 30, 120, 10, @back)
    self.bitmap.fill_rect(11, 31, 118, 8, @back2)
    self.bitmap.fill_rect(12, 32, 116, 6, @back)
    self.bitmap.gradient_fill_rect(12, 32, wb, 6, @cm1, @cm2)
    self.bitmap.draw_text(60, 20, 200, 24, "MP")
 
  end


Depois você deve criar o dispose da HUD, crie assim:

Código:

  def dispose
    self.bitmap.dispose
    super
  end
end


E por fim, instale a HUD no mapa:

Código:

#Instala o HUD
class Spriteset_Map
  alias :or_initialize :initialize
  def initialize
    @hud = HUD.new(@viewport2)
    or_initialize
  end
  alias :or_update :update
  def update
    @hud.update
    or_update
  end
  alias :or_dispose :dispose
  def dispose
    @hud.dispose
    or_dispose
  end
end


Créditos

Lembro que peguei uma HUD na internet a muito tempo que era assim, modifiquei, fiz algumas mudanças e criei o tutorial.

Muito bom, vai ajudar muita gente
+ 1 crédito

muito bom ajuda muito
+ 1 credito

Muito bom para akeles que nao sabem criar hud

Sim XD

lla que la area de rpg maker vx esta fracasada!! !

ai ai, q preguiça de ler o tópico mais só pra eu n receber um alerta toma ai +1 cred

Gostei caramba meu conseguii voce é o mestre meu

Show aqui esta a hud com o hp vermelho
e o mp azul

Hud

Spoiler:

Muito bom... mas esse é o meu tutorial com outras palavras ... mas o mesmo código e comentários............e com os créditos retirados ;x

Código original:

Código:

################################################################
#Hud Criada por Flock (Lucky).
#Créditos : Flock e Alucard_2 Por me Ensinar RGSS2.
#Introdução : Esse Script Faz uma HUD Que não necessita de Imagens ,
#Está HUD é quase 100% Modificavel.
#Um Pequeno Tutorial Incluso No Script.
################################################################
class HUD < Sprite
 
  #Inicia
  def initialize(view)
    super(view)
 
    #Cria as cores
    @ch1 = Color.new(50,0,0) #Muda a Cor Mais Escura Da Hud de HP.
    @ch2 = Color.new(250,0,0)#Muda a Cor Mais Clara da Hud de HP.
    @cm1 = Color.new(12,0,113)#Muda a Cor Mais Escura da Hud de MP.
    @cm2 = Color.new(0,0,255)#Muda a Cor Mais Clara da Hud de MP.
    @back = Color.new(20,20,20)#Parte de Traz da HUD¹.
    @back2 = Color.new(240,240,0)#Parte de Traz da Hud².
 
    #Cria o Bitmap
    self.bitmap = Bitmap.new(200,200)
    self.bitmap.font.name = "Comic Sans MS" #Escolhe a Fonte Para "HP" e "MP"
    self.bitmap.font.size = 20
    self.z = 300
    update
  end
 
  #Atualiza
  def update
    super
 
    #Apaga o conteudo
    self.bitmap.clear
 
    #Cria a barra de HP
    hp = $game_actors[1].hp
    maxhp = $game_actors[1].maxhp
    wb = 116 * hp / maxhp
    self.bitmap.fill_rect(10, 10, 120, 10, @back)
    self.bitmap.fill_rect(11, 11, 118, 8, @back2)
    self.bitmap.fill_rect(12, 12, 116, 6, @back)
    self.bitmap.gradient_fill_rect(12, 12, wb, 6, @ch1, @ch2)
    self.bitmap.draw_text(10, 0, 200, 24, "HP")
 
    #Cria a barra de MP
    mp = $game_actors[1].mp
    maxmp = $game_actors[1].maxmp
    wb = 116 * mp / maxmp
    self.bitmap.fill_rect(10, 30, 120, 10, @back)
    self.bitmap.fill_rect(11, 31, 118, 8, @back2)
    self.bitmap.fill_rect(12, 32, 116, 6, @back)
    self.bitmap.gradient_fill_rect(12, 32, wb, 6, @cm1, @cm2)
    self.bitmap.draw_text(10, 20, 200, 24, "MP")
 
  end
 
  def dispose
    self.bitmap.dispose
    super
  end
end

#Instala o HUD
class Spriteset_Map
  alias :or_initialize :initialize
  def initialize
    @hud = HUD.new(@viewport2)
    or_initialize
  end
  alias :or_update :update
  def update
    @hud.update
    or_update
  end
  alias :or_dispose :dispose
  def dispose
    @hud.dispose
    or_dispose
  end
end

Percebe-se poucas alterações