Suporte no desenvolvimento de jogos


    [Aula] Criando Hud Redonda [RD12]

    RD12
    RD12
    Lenda
    Lenda

    Medalhas : [Aula] Criando Hud Redonda [RD12] 48080450[Aula] Criando Hud Redonda [RD12] Trophy11[Aula] Criando Hud Redonda [RD12] GIueZ[Aula] Criando Hud Redonda [RD12] ZgLkiRU
    Mensagens : 1946
    Créditos : 743
    Cash : 0

    [Aula] Criando Hud Redonda [RD12] Empty [Aula] Criando Hud Redonda [RD12]

    Mensagem por RD12 em Sex Abr 06, 2012 7:17 pm

    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:
    [Aula] Criando Hud Redonda [RD12] RBwSb

    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
    Explicando:
    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
    Explicando:
    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
    Nessa parte, damos as posições X e Y da Sprite, lembrando se muda-las, todos os bitmaps mudaram de posição também, pois estão dentro desse sprite.
    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"
    Aqui mudamos o tamanho da fonte do nosso bitmap criado acima, e o nome da fonte.

    Código:
     @HP_Img = Sprite.new
        @HP_Img.bitmap = Bitmap.new(55,50)
        @HP_Img.bitmap = RPG::Cache.picture("HP")
    Aqui iremos criar uma outra Sprite, mas numa variável, pois nossa HUD é redonda, então necessitei de criar 2 Sprites, você irá entender já já por que.
    Essa sprite, é o HP.
    Código:
        @HP_Img.angle = 180
    Iremos mudar o ângulo da imagem, rotaciona-la, mas só posso rotacionar uma class sprite, por isso tive que criar outra sprite, por que se eu rotacionasse a 1°, iria rotacionar todos os bitmaps. Mas por que rotacionar? Por que, para fazer uma hud redonda, em vez de mudarmos a largura da imagem, vamos mudar a altura, mas se fizermos só isso o HP irá diminuir de baixo para cima, será estranho encher de baixo para cima né? Por isso vamos mudar o angle para 180, assim viramos verticalmente a imagem.
    Para intenderem melhor fiz essa comparação:
    [Aula] Criando Hud Redonda [RD12] 0dmwR

    @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
    Damos o X e Y da nossa esfera HP, para ficar bem em cima certinho da base.

    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
    Esse método update será executado frequentemente, assim botamos para ele chamar o método refresh para atualizar nossa HUD.

    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
    Essa parte eu fiz para colorir o texto da quantidade de HP de acordo com a quantidade, assim quanto menor o HP, vai ficando amarelo, laranja, vermelho.
    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
    Aqui liberamos a sprite, com o dispose.

    Código:
     def update
        hud_update
        @My_Hud.refresh
      end
    Aqui atualizamos a hud, com o update da scene map.

    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:
    [Aula] Criando Hud Redonda [RD12] AcgEf
    https://i.imgur.com/acgEf.png

    [Aula] Criando Hud Redonda [RD12] WASC9
    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

    Very Happy


    Última edição por RD12 em Dom Abr 08, 2012 1:37 pm, editado 3 vez(es)
    Maverick ~
    Maverick ~
    Membro Ativo
    Membro Ativo

    Mensagens : 372
    Créditos : 39
    Cash : 0

    [Aula] Criando Hud Redonda [RD12] Empty Re: [Aula] Criando Hud Redonda [RD12]

    Mensagem por Maverick ~ em Sex Abr 06, 2012 7:23 pm

    Vou ler aqui agora,achei muito interessante
    sempre quis fazer uma hud com esse efeito
    mais nao conhecia esses comandos.
    Lendo...


    _________________
    Alguma Duvida!? Me mande uma MP

    [Aula] Criando Hud Redonda [RD12] BgIconeLivro                 Regras do Fórum


    [Aula] Criando Hud Redonda [RD12] L4thF
    lucasbiell
    lucasbiell
    Membro Ativo
    Membro Ativo

    Mensagens : 366
    Créditos : 36
    Cash : 0

    [Aula] Criando Hud Redonda [RD12] Empty Re: [Aula] Criando Hud Redonda [RD12]

    Mensagem por lucasbiell em Sex Abr 06, 2012 7:49 pm

    Boa Vei ;D ajudo muito Wink vou tentar usa-la no meu projeto Successful

    valeu mesmo xd ajudo muito eu e acho que vai ajudar muito

    + 1 bem merecido hehe Successful


    _________________
    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
    †AnjoFael†
    †AnjoFael†
    Experiente
    Experiente

    Mensagens : 407
    Créditos : 66
    Cash : 0

    [Aula] Criando Hud Redonda [RD12] Empty Re: [Aula] Criando Hud Redonda [RD12]

    Mensagem por †AnjoFael† em Sex Abr 06, 2012 8:16 pm

    Mano muinto tenço!!!

    Min ajudou bastante!!!


    _________________

    [Aula] Criando Hud Redonda [RD12] 34g0n7q
    [Aula] Criando Hud Redonda [RD12] CczuLhS
    Facebook
    jiraya
    jiraya
    Membro Ativo
    Membro Ativo

    Mensagens : 272
    Créditos : 26
    Cash : 0

    [Aula] Criando Hud Redonda [RD12] Empty Re: [Aula] Criando Hud Redonda [RD12]

    Mensagem por jiraya em Sex Abr 06, 2012 11:14 pm

    Parabens RD12 essa é a aulas mais detalhada que eu ja vi ...

    Muito fodastica...


    _________________
    Afim de descolar uns trocados se inscreva  pagamento por Paypal, Mercado Pago  até mesmo na sua conta bancaria:

    Link
    _____________________________________________________________________________________________




    Se escrevam no meu Canal no Youtube:  Eberton Munhoz
           
    RD12
    RD12
    Lenda
    Lenda

    Medalhas : [Aula] Criando Hud Redonda [RD12] 48080450[Aula] Criando Hud Redonda [RD12] Trophy11[Aula] Criando Hud Redonda [RD12] GIueZ[Aula] Criando Hud Redonda [RD12] ZgLkiRU
    Mensagens : 1946
    Créditos : 743
    Cash : 0

    [Aula] Criando Hud Redonda [RD12] Empty Re: [Aula] Criando Hud Redonda [RD12]

    Mensagem por RD12 em Sex Abr 06, 2012 11:16 pm

    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)
    Maverick ~
    Maverick ~
    Membro Ativo
    Membro Ativo

    Mensagens : 372
    Créditos : 39
    Cash : 0

    [Aula] Criando Hud Redonda [RD12] Empty Re: [Aula] Criando Hud Redonda [RD12]

    Mensagem por Maverick ~ em Sex Abr 06, 2012 11:23 pm

    @RD12 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)
    Ensina a base de deixar algo global,tipo o pet
    acho que seria um ótimo aprendizado pelo menos
    pra mim que li tudo isso ai acima.


    _________________
    Alguma Duvida!? Me mande uma MP

    [Aula] Criando Hud Redonda [RD12] BgIconeLivro                 Regras do Fórum


    [Aula] Criando Hud Redonda [RD12] L4thF
    Yung
    Yung
    Aldeia Friend
    Aldeia Friend

    Mensagens : 1375
    Créditos : 107
    Cash : 0

    [Aula] Criando Hud Redonda [RD12] Empty Re: [Aula] Criando Hud Redonda [RD12]

    Mensagem por Yung em Sab Abr 07, 2012 9:22 am

    Ja que sou preguiscoso
    eu nao li o topico todo
    mais queria perguntar
    Da para aumentar o Circulo ?


    _________________
    Jack sz:
    [Aula] Criando Hud Redonda [RD12] Tumblr_m1axq3n5qo1r99f4t
    RD12
    RD12
    Lenda
    Lenda

    Medalhas : [Aula] Criando Hud Redonda [RD12] 48080450[Aula] Criando Hud Redonda [RD12] Trophy11[Aula] Criando Hud Redonda [RD12] GIueZ[Aula] Criando Hud Redonda [RD12] ZgLkiRU
    Mensagens : 1946
    Créditos : 743
    Cash : 0

    [Aula] Criando Hud Redonda [RD12] Empty Re: [Aula] Criando Hud Redonda [RD12]

    Mensagem por RD12 em Sab Abr 07, 2012 9:24 am

    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:
    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.
    emilyoly
    emilyoly
    Diva
    Diva

    Mensagens : 526
    Créditos : 83
    Cash : 0

    [Aula] Criando Hud Redonda [RD12] Empty Re: [Aula] Criando Hud Redonda [RD12]

    Mensagem por emilyoly em Sab Abr 07, 2012 9:48 am

    Perfeita aula , muito boa mesmo, continue trazendo mais aulas boas como está pra cá xD

    +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

    Conteúdo patrocinado

    [Aula] Criando Hud Redonda [RD12] Empty Re: [Aula] Criando Hud Redonda [RD12]

    Mensagem por Conteúdo patrocinado


      Data/hora atual: Qua Nov 13, 2019 4:59 pm