Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
[Aula] Criando Hud Redonda [RD12]
+6
Duel
jiraya
†AnjoFael†
lucasbiell
Maverick ~
RD12
10 participantes
Página 1 de 2
Página 1 de 2 • 1, 2
[Aula] Criando Hud Redonda [RD12]
Aula de RGSS
Criando uma Hud redonda
Minha primeira Aula de Rgss, e Hud.
Sobre: O objetivo desse tópico não é disponibilizar uma hud bonita, e sim ensinar como se faz uma HUD, e não aquelas HUDs retangulares, uma HUD redonda.
Eu fiz a HUD do 0, minha primeira, então aceito dicas pois não sou especialista em HUDs.
Introdução: Vou tentar explicar ao máximo profundamente como é criada a HUD, cada linha do script.
Para criar utilizei a Classe Sprite, algumas pessoas criam na Classe Window_Base (que é aquelas Huds numa janela), a classe Sprite server somente para exibir gráficos, como textos e imagens.
Prévia do script(imagem):
- Spoiler:
Começando: Vamos começar criando a nossa Classe da Hud em Sprite.
- Código:
class My_Hud < Sprite
def initialize
super()
end
def update
super
end
def refresh
end
end
class My_Hud < Sprite
A classe, onde ficará todo o código do script. Chamará My_Hud, e iremos usar a classe pai Sprite.
Usar a classe pai sprite significar que iremos usar os métodos da classe pai sprite, por exemplo: @Sprite.angle, @Sprite.mirror, esses métodos angle, mirror, são da classe Sprite, por isso iremos usar ela como se fosse uma base para criar nossa HUD.
def initialize
Todo código abaixo daqui só será executado 1 vez, ao chamar a classe.
Normalmente iniciamos as variáveis aqui, não faz sentido dar valor a elas num update, isso diminuiria o desempenho.
def update
Como o nome já diz, em inglês, aqui o código será atualizado, será executado toda hora.
Aqui iremos chamar o método refresh, o refresh é como o update, só que se pormos o conteúdo do refresh no update, irá dar muito lag.
def refresh
Esse método será chamado no update, nele ficará o conteúdo da Hud, como o texto, imagens, a parte do código envolvido no tamanho da imagem...
Essa parte, é só a base da HUD, para criarmos as imagens... Vamos agora começar a criar nossa Hud.
Iniciando os Bitmaps e as Variáveis:
O código abaixo, ficará dentre o método initialize.
- Código:
def initialize
super()
self.bitmap = Bitmap.new(65,50)
self.x = 0
self.y = 0
self.z = 99998
self.bitmap.font.size = 14
self.bitmap.font.name = "Tahoma"
@HP_Img = Sprite.new
@HP_Img.bitmap = Bitmap.new(55,50)
@HP_Img.bitmap = RPG::Cache.picture("HP")
@HP_Img.angle = 180
@HP_Img.z = 99999
@HP_Img.mirror = true
@HP_Img.y = 43
@HP_Img.x = 28
refresh
end
self.bitmap = Bitmap.new(65,50)
Criamos um objeto Bitmap, com o tamanho 65x50 pixels (65=largura, 50=altura).
Esse bitmap será criado dentro da sprite, podemos mudar a posição dele, mas se ele ultrapassar o da Sprite, ele sumirá.
Obs: Essa sprite é o desenho do HP, a esfera que irá ser o HP.
Se mudarmos a posição da Sprite, logo as posições dos bitmaps também serão mudados.
- Código:
self.x = 0
self.y = 0
self.z = 99998
Também damos a posição Z, quanto maior o Z, mais por cima de outras janelas e Sprites essa nossa HUD irá ficar.
- Código:
self.bitmap.font.size = 14
self.bitmap.font.name = "Tahoma"
- Código:
@HP_Img = Sprite.new
@HP_Img.bitmap = Bitmap.new(55,50)
@HP_Img.bitmap = RPG::Cache.picture("HP")
Essa sprite, é o HP.
- Código:
@HP_Img.angle = 180
Para intenderem melhor fiz essa comparação:
@HP_Img.z = 99999
Como já disse, quanto maior o Z, mais por cima dos outros objetos ficam, o z da picture base, que ficará por baixo dessa picture de HP, é 99998, logo, a esfera HP tem que ser maior: 99999, para ficar em cima.
@HP_Img.mirror = true
Isso fará só com inverta a imagem horizontalmente, pois quando mudamos o angle, ela é invertida horizontalmente também. Com ou Sem o Mirror, não terá muita diferença a não ser que a sprite tenha uma sombra ou um desenho.
- Código:
@HP_Img.y = 43
@HP_Img.x = 28
refresh
vamos para o método refresh, onde está o principal do código, que faz a esfera diminuir, cria a base...
Agora já acabamos o método initialize
- Código:
def update
super
refresh
end
Vamos agora para a parte mais complicadinha.
O método refresh
- Código:
def refresh
actor = $game_party.actors[0]
base = RPG::Cache.picture("base")
rect = Rect.new(0,0,base.width,base.height)
self.bitmap.blt(0,15,base,rect)
self.bitmap.draw_text(36, 17, 100, 32, "#{actor.hp}")
if actor.hp >= actor.maxhp/1.3
self.bitmap.font.color = Color.new(0,255,0)#Cor Normal
elsif actor.hp <= actor.maxhp/1.3 and actor.hp >= actor.maxhp/2
self.bitmap.font.color = Color.new(255,255,0)#Amalerado
elsif actor.hp <= actor.maxhp/2 and actor.hp >= actor.maxhp/4
self.bitmap.font.color = Color.new(255,128,0)#Alaranjado
elsif actor.hp <= actor.maxhp/4
self.bitmap.font.color = Color.new(255,0,0)#Vermelho
end
altura = 27 * actor.hp / actor.maxhp
@HP_Img.src_rect = Rect.new(0,0,27, altura)
end
actor = $game_party.actors[0]
$game_party.actors[0] guarda várias informações do jogador, como o HP, o Level, o MP, o MaxHP e MaxMP, a destreza, enfim, os atributos do herói.
Damos a variável actor o valor da $game_party.actors[0], assim o código fica menor e mais fácil de se ler.
base = RPG::Cache.picture("base")
Botamos na variável base uma picture.
rect = Rect.new(0,0,base.width,base.height)
A var rect irá armazenar o tamanho do retângulo ocupado pela imagem base, como a largura, altura.
self.bitmap.blt(0,15,base,rect)
Inserimos no Bitmap a imagem, com o tamanho.
self.bitmap.draw_text(36, 17, 100, 32, "#{actor.hp}")
Desenha o texto com a quantidade de HP.
- Código:
if actor.hp >= actor.maxhp/1.3
self.bitmap.font.color = Color.new(0,255,0)#Cor Normal
elsif actor.hp <= actor.maxhp/1.3 and actor.hp >= actor.maxhp/2
self.bitmap.font.color = Color.new(255,255,0)#Amalerado
elsif actor.hp <= actor.maxhp/2 and actor.hp >= actor.maxhp/4
self.bitmap.font.color = Color.new(255,128,0)#Alaranjado
elsif actor.hp <= actor.maxhp/4
self.bitmap.font.color = Color.new(255,0,0)#Vermelho
end
Vou explicar um pouco ele.
if actor.hp >= actor.maxhp/1.3
self.bitmap.font.color = Color.new(0,255,0)#Cor Normal
Se o HP for maior que o HP máximo dividido por 1,3, vai colorir de verde.
elsif actor.hp <= actor.maxhp/1.3 and actor.hp >= actor.maxhp/2
self.bitmap.font.color = Color.new(255,255,0)#Amalerado
Se o hp for menor que o maxhp dividido por 1,3 e maior que dividido por 2 Colore de amarelo.
E assim em diante.
altura = 27 * actor.hp / actor.maxhp
@HP_Img.src_rect = Rect.new(0,0,27, altura)
Vamos calcular a altura da imagem, multiplicando a altura pelo HP dividido pelo MaxHp, isso fará com que o tamanho seja de acordo com a quantidade
No lugar do 27 bote a altura da esfera HP
@HP_Img.src_rect = Rect.new(0,0,27, altura)
Após calculado a altura de acordo com o HP, vamos mudar o tamanho da nossa 2° Sprite. 27 é a largura, e a variável altura é a que calculamos de acordo com o HP.
Após isso nossa HUD está criada, mas quando você for jogar, não irá vela, pois temos que libera-la no mapa.
no final da hud colamos esse código:
- Código:
#Coloca a hud no mapa e atualiza
class Scene_Map
alias hud_main main
def main
@My_Hud = My_Hud.new
hud_main
@My_Hud.dispose
end
alias hud_update update
def update
hud_update
@My_Hud.refresh
end
end
Explicando:
- Código:
alias hud_main main
def main
@My_Hud = My_Hud.new
hud_main
@My_Hud.dispose
- Código:
def update
hud_update
@My_Hud.refresh
end
Script Completo:
- Código:
#:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=
#|Por: RD12| Aula de Rgss
# Criando uma Hud redonda
#|Edit: Cidiomar|
#:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=
class My_Hud
def initialize(x = 0, y = 0)
super()
@base = Sprite.new
@base.bitmap = RPG::Cache.picture('base')
@base.x, @base.y = x, y
@base.z = 0xFFFF
#-----
@hp_img = Sprite.new
@hp_img.bitmap = RPG::Cache.picture('HP.png')
@hp_img.angle = 180
@hp_img.z = @base.z + 1
@hp_img.mirror = true
@hp_img.x = @hp_img.bitmap.width + 1 + @base.x
@hp_img.y = @hp_img.bitmap.height + 1 + @base.y
#-----
@hp_vl = Sprite.new
@hp_vl.bitmap = Bitmap.new(27, 18)
@hp_vl.z = @base.z + 1
@hp_vl.x = @base.x + 34
@hp_vl.y = @base.y + 10
@hp_vl.bitmap.font.size = 14
@hp_vl.bitmap.font.name = 'Tahoma'
#-----
@last_actor = nil
@last_hp = -1
@last_mhp = -1
#-----
refresh
end
def update
actor = $game_party.actors.first
hp, mhp = actor.hp, actor.maxhp
altura = 27 * hp / mhp
@hp_img.src_rect = Rect.new(0, 0, 27, altura)
if @last_actor != actor or @last_hp != hp or @last_mhp != mhp
@last_actor = actor
@last_hp = hp
@last_mhp = mhp
refresh(actor)
end
end
def refresh(actor = $game_party.actors.first)
if actor.hp >= actor.maxhp / 1.3
@hp_vl.bitmap.font.color = Color.new(0, 255, 0) # Cor Normal
#@hp_img.tone = Tone.new(0, 0x80, 0, 0)
elsif actor.hp <= actor.maxhp / 1.3 and actor.hp >= actor.maxhp/2
@hp_vl.bitmap.font.color = Color.new(255, 255, 0) # Amalerado
#@hp_img.tone = Tone.new(0x80, 0x80, 0, 0)
elsif actor.hp <= actor.maxhp / 2 and actor.hp >= actor.maxhp/4
@hp_vl.bitmap.font.color = Color.new(255, 128, 0) # Alaranjado
#@hp_img.tone = Tone.new(0x80, 0x40, 0, 0)
elsif actor.hp <= actor.maxhp / 4
@hp_vl.bitmap.font.color = Color.new(255, 0, 0) # Vermelho
#@hp_img.tone = Tone.new(0x80, 0, 0, 0)
end
@hp_vl.bitmap.clear
@hp_vl.bitmap.draw_text(@hp_vl.bitmap.rect, actor.hp.to_s)
#-----
end
def dispose
@base.bitmap.dispose
@hp_img.bitmap.dispose
@hp_vl.bitmap.dispose
#-----
@base.dispose
@hp_img.dispose
@hp_vl.dispose
end
end
#Coloca a hud no mapa e atualiza
class Scene_Map
alias hud_main main
def main
@My_Hud = My_Hud.new
hud_main
@My_Hud.dispose
end
alias hud_update update
def update
hud_update
@My_Hud.update
end
end
end
#Coloca a hud no mapa e atualiza
class Scene_Map
alias hud_main main
def main
@My_Hud = My_Hud.new
hud_main
@My_Hud.dispose
end
alias hud_update update
def update
hud_update
@My_Hud.refresh
end
end
Coloque essas imagens na pasta picture:
https://i.imgur.com/acgEf.png
https://i.imgur.com/wASC9.png
Agora, quem leu, pode tentar fazer sua hud, adicionando o MP, e o Exp, é só trocar o actor.hp por actor.mp, e assim pro maxhp.
Créditos: RD12
Obrigado a quem ler.
Qualquer dúvida postem abaixo, ou críticas e erros.
Espero que tenha ajudado vocês o/ até a próxima
Qualquer dúvida postem abaixo, ou críticas e erros.
Espero que tenha ajudado vocês o/ até a próxima
Última edição por RD12 em Dom Abr 08, 2012 1:37 pm, editado 3 vez(es)
Re: [Aula] Criando Hud Redonda [RD12]
Vou ler aqui agora,achei muito interessante
sempre quis fazer uma hud com esse efeito
mais nao conhecia esses comandos.
Lendo...
sempre quis fazer uma hud com esse efeito
mais nao conhecia esses comandos.
Lendo...
_________________
Alguma Duvida!? Me mande uma MP
Regras do Fórum
Regras do Fórum
Maverick ~- Membro Ativo
- Mensagens : 372
Créditos : 39
Re: [Aula] Criando Hud Redonda [RD12]
Boa Vei ;D ajudo muito vou tentar usa-la no meu projeto
valeu mesmo xd ajudo muito eu e acho que vai ajudar muito
+ 1 bem merecido hehe
valeu mesmo xd ajudo muito eu e acho que vai ajudar muito
+ 1 bem merecido hehe
_________________
- Spoiler:
Facebook
Skype: Lucas_biell
Atuo Nas Areas
Mapper, Eventer (rpg maker xp)
Web master e Designer
Projeto:
http://www.aldeiarpgbr.com/t8623-recrutamento-combat-mario
lucasbiell- Membro Ativo
- Mensagens : 366
Créditos : 36
Re: [Aula] Criando Hud Redonda [RD12]
Mano muinto tenço!!!
Min ajudou bastante!!!
Min ajudou bastante!!!
_________________
Facebook
†AnjoFael†- Experiente
- Mensagens : 408
Créditos : 67
Re: [Aula] Criando Hud Redonda [RD12]
Parabens RD12 essa é a aulas mais detalhada que eu ja vi ...
Muito fodastica...
Muito fodastica...
_________________
[roll="Ataque nível 1"]
Se escrevam no meu Canal no Youtube: Eberton Munhoz
Se escrevam no meu Canal no Youtube: Eberton Munhoz
Re: [Aula] Criando Hud Redonda [RD12]
Vlw, muito obrigado, foi tenso escrever tudo isso .-. ainda bem que gostaram. Quem sabe posto mais aulas depois? Podem pedir algumas aí.(peça aula para aprender e nao para pegar o script)
Re: [Aula] Criando Hud Redonda [RD12]
Ensina a base de deixar algo global,tipo o petRD12 escreveu:Vlw, muito obrigado, foi tenso escrever tudo isso .-. ainda bem que gostaram. Quem sabe posto mais aulas depois? Podem pedir algumas aí.(peça aula para aprender e nao para pegar o script)
acho que seria um ótimo aprendizado pelo menos
pra mim que li tudo isso ai acima.
_________________
Alguma Duvida!? Me mande uma MP
Regras do Fórum
Regras do Fórum
Maverick ~- Membro Ativo
- Mensagens : 372
Créditos : 39
Re: [Aula] Criando Hud Redonda [RD12]
Ja que sou preguiscoso
eu nao li o topico todo
mais queria perguntar
Da para aumentar o Circulo ?
eu nao li o topico todo
mais queria perguntar
Da para aumentar o Circulo ?
_________________
- Jack:
Duel- Aldeia Friend
- Mensagens : 1375
Créditos : 107
Ficha do personagem
Nível: 1
Experiência:
(0/0)
Vida:
(30/30)
Re: [Aula] Criando Hud Redonda [RD12]
Leon > Talvez depois ensino um pouco de packets para o Np, assim botam coisas globais.
Guilherme > Se você lesse você já saberia, mas ta nessa parte:
Vlw.
Guilherme > Se você lesse você já saberia, mas ta nessa parte:
- Spoiler:
- altura = 27 * actor.hp / actor.maxhp
@HP_Img.src_rect = Rect.new(0,0,27, altura)
Vamos calcular a altura da imagem, multiplicando a altura pelo HP dividido pelo MaxHp, isso fará com que o tamanho seja de acordo com a quantidade
No lugar do 27 bote a altura da esfera HP
@HP_Img.src_rect = Rect.new(0,0,27, altura)
Vlw.
Re: [Aula] Criando Hud Redonda [RD12]
Perfeita aula , muito boa mesmo, continue trazendo mais aulas boas como está pra cá xD
+Creds
+Creds
_________________
- Pessoas que admiro:
- RD12 - Por ele sempre ajudar os outros e ser um cara mt foda.
Cidiomar - O melhor Scripter que conheço
Felix Blayder - The Best
emilyoly- Diva
- Mensagens : 526
Créditos : 83
Página 1 de 2 • 1, 2
Tópicos semelhantes
» [Tutorial/Aula]Condição de ser Homem ou mulher(por motivos de safadinhos como RD12 resolvi mudar o nome)
» Aula 11 - Criando Uma HUD Parte 1
» Aula 11 - Criando Uma HUD Parte 2
» [Vídeo Aula] Criando Mapas
» Aula Avançada 1: Criando Scenes Avançadas
» Aula 11 - Criando Uma HUD Parte 1
» Aula 11 - Criando Uma HUD Parte 2
» [Vídeo Aula] Criando Mapas
» Aula Avançada 1: Criando Scenes Avançadas
Página 1 de 2
Permissões neste sub-fórum
Não podes responder a tópicos
|
|