Arena RPG Maker
Olá, visitante!
Seja bem-vindo ao fórum Arena RPG Maker, caso queira aprender sobre criação de jogos, está no fórum certo. Esperamos que possa aprender tanto quanto possa nos ensinar aqui.

Atenciosamente,
Equipe Arena RPG Maker.
Arena RPG Maker
Olá, visitante!
Seja bem-vindo ao fórum Arena RPG Maker, caso queira aprender sobre criação de jogos, está no fórum certo. Esperamos que possa aprender tanto quanto possa nos ensinar aqui.

Atenciosamente,
Equipe Arena RPG Maker.
Arena RPG Maker

Estamos de volta o/ ... Ou não.Eu amo a -Dark
Doações para o fórum abertas, clique aqui e saiba mais.
Últimos assuntos
» Ainda temos gente aqui?
Botões com degradê EmptyQui 25 Nov 2021, 14:04 por Halt

» [Dúvida] Como tirar a porcentagem de esquiva
Botões com degradê EmptySex 19 Nov 2021, 17:14 por Halt

» Pokémon Genesis Online! (PGO)
Botões com degradê EmptyQua 05 Jul 2017, 18:08 por Lexar

» Tileset Converter to MV
Botões com degradê EmptySex 12 maio 2017, 14:07 por Douggi

» Pack Resources, Sprites e etc
Botões com degradê EmptyQua 23 Dez 2015, 12:30 por raydengv

» Download RPG Maker 2003 + RTP em português
Botões com degradê EmptyTer 22 Dez 2015, 11:14 por ::KimMax::

» Fantasy Art Online
Botões com degradê EmptyDom 18 Out 2015, 18:42 por daviih123

» Você vai ter medo do Nerve gear?
Botões com degradê EmptySáb 25 Jul 2015, 17:02 por Kirito-kun

» O Barato é louco
Botões com degradê EmptySáb 27 Jun 2015, 16:26 por Halt

» Download RPG Maker 2000 + RTP em português
Botões com degradê EmptyQui 21 maio 2015, 20:28 por Wismael


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

1Botões com degradê Empty Botões com degradê Qua 07 Nov 2012, 23:05

Soreto

Soreto
Diva
Diva
Fala ai galera, este tutorial estou tirando base de um que na aldeia feito pelo Roku, entretanto ele estava todo manual, neste estará mais simples e compacto.
Vamos ao script de botão: [WNG] Button
Nas linhas 53 a 57 veremos o seguinte código:
Código:
    s.bitmap.fill_rect(1, 0, @s.bitmap.width-2, s.bitmap.height, User_Edit::BORDA)
    s.bitmap.fill_rect(0, 1, @s.bitmap.width, s.bitmap.height-2, User_Edit::COR1)
    s.bitmap.fill_rect(1, 1, @s.bitmap.width-2, s.bitmap.height-12, User_Edit::COR2)
    s.bitmap.fill_rect(1, 6, @s.bitmap.width-2, s.bitmap.height-12, User_Edit::COR3)
    s.bitmap.fill_rect(1, 11, @s.bitmap.width-2, s.bitmap.height-12, User_Edit::COR4)
Essas linhas são as responsáveis por desenhar o botão, tanto a borda quanto o preenchimento em si.
Agora vamos, antes de completar o tutorial, entender como funcionará.
Sabemos que um degradê começa da cor mais escura ou mais clara e vai escurecendo ou clareando a cada pixel desenhado. Essa parte é um tanto crucial para o entendimento pois, o código irá se basear nessa teoria.
Creio que todos conhecemos a função for, que percorre valores (mais ou menos isso).
Bom, quero que escolham uma cor clara para dar início ao tutorial, essa cor clara será responsável por preencher a primeira linha pixear do botão, então usando o método for iremos escurecendo a cor primária até chegar no limite.
Agora escolham um cor bem escura para representar a borda.
Eu escolhi o rgb(139, 69, 19).
Para cor clara escolhi rgb(205, 102, 29).
Ambos tonalidades derivadas de um laranja.
Ok, agora vamos aos códigos:
Substitua as linhas 53 a 57 pelo código abaixo:
Código:
s.bitmap.fill_rect(0,0,@s.bitmap.width,25, Color.new(139, 69, 19))
    for i in 0...16
      s.bitmap.fill_rect(1,1+i,@s.bitmap.width-2,1, Color.new(205-i, 102-i, 29-i))
    end
Agora as explicações:
Código:
s.bitmap.fill_rect(0,0,@s.bitmap.width,25, Color.new(139, 69, 19))
Aqui desenhamos a borda do botão com a tonalidade escura.
Código:
for i in 0...16
      s.bitmap.fill_rect(1,1+i,@s.bitmap.width-2,1, Color.new(205-i, 102-i, 29-i))
    end
Fizemos um loop limitado (0 a 16) para o for percorrer enquanto i representa o valor atual. Assim vamos diminuindo o valor i a cada volta do loop e desenhamos 16 linhas com tonalidades diferentes porém próximas.
Resultado final:
Spoiler:
Script de botão final:
Código:
#==============================================================================
# ** Button - This class is used to create buttons.
#------------------------------------------------------------------------------
# Author    Trebor777
# Modified  Valentine
# Version  2.0
#==============================================================================
class Button < Widget
  attr_accessor :mask
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize(win,x,y,text,id=0,widgetid=0,chatid=0,&block)
    super(win,x,y)
    @text = text
    @block = block
    @chatid = chatid
    @id = id
    @widgetid = widgetid
    refresh
  end
  #--------------------------------------------------------------------------
  # Draw the button text, and create the mask.
  #--------------------------------------------------------------------------
  def refresh
    b = Bitmap.new(4,4)
    if not @id == 2
      b.font.size = 16
      if @id == 3
        cx = 54
      else
        cx = b.text_size(@text).width
      end
    else
      cx = 104
    end
    b.dispose
    s.bitmap = Bitmap.new(cx+10, 18)
    s.bitmap.font.color = Color.new(0,0,0,255)
    s.bitmap.font.size = 16 if not @id == 2
    @mask = Sprite.new(win.viewport)
    @mask.x=s.x
    @mask.y=s.y
    if @chatid == $chat_id
      @mask.visible=true
    else
      @mask.visible=false
    end
    @mask.z = 5000
    @mask.bitmap=Bitmap.new(s.bitmap.width,s.bitmap.height)
    @mask.bitmap.fill_rect(0, 0, @s.bitmap.width, @s.bitmap.height, Window_Edits::Button_ColorSkin_Start)
    s.bitmap.clear
    s.bitmap.fill_rect(0,0,@s.bitmap.width,25, Color.new(139, 69, 19))
    for i in 0...16
      s.bitmap.fill_rect(1,1+i,@s.bitmap.width-2,1, Color.new(205-i, 102-i, 29-i))
    end
    s.bitmap.font.color = Color.new(40,40,40)
    s.bitmap.font.size = 13
    s.bitmap.draw_text(0, 1, @s.bitmap.width, s.bitmap.height, @text, 1)
  end
  #--------------------------------------------------------------------------
  # Dispose the mask, and itself
  #--------------------------------------------------------------------------
  def dispose
    @mask.dispose
    super
  end
  #--------------------------------------------------------------------------
  # Frame update, check the mask status, and active status
  #--------------------------------------------------------------------------
  def update
    @mask.visible= false if @mask.visible and !visible
    if visible
      @mask.x=s.x if @mask.x != s.x
      @mask.y=s.y if @mask.y != s.y
      @mask.update
      if in_area? or @chatid == $chat_id
        @mask.visible=true
      else
        @mask.visible=false
      end
      self.active=false if self.active
      s.opacity = Window_Edits::Button_Active_Opacity  if s.opacity<Window_Edits::Button_Active_Opacity
    end
    if win!=nil
      x= s.x
      y= s.y
      s.visible = win.visible
    end
    if @widgetid == 1
      if Input.pressed(Input::Mouse_Left) and in_area? and s.visible
        @active=true
        win.active = true
        clicked
        return
      elsif Input.trigger(Input::Mouse_Left) and !in_area? and s.visible
        @active=false
        outclick
        return
      end
    else
      if Input.trigger(Input::Mouse_Left) and in_area? and s.visible
        @active=true
        win.active = true
        clicked
        return
      elsif Input.trigger(Input::Mouse_Left) and !in_area? and s.visible
        @active=false
        outclick
        return
      end 
    end
    #super
  end
  #--------------------------------------------------------------------------
  # Change the button opacity when clicked
  #--------------------------------------------------------------------------
  def clicked
    #$game_system.se_play($data_system.decision_se)
    s.opacity -= Window_Edits::Button_Not_Active_Opacity if s.opacity==Window_Edits::Button_Active_Opacity
    if @block != nil
      @block.call
    else
    self.active = true
    end
  end
  #--------------------------------------------------------------------------
  # Visible
  #--------------------------------------------------------------------------
  def visible=(v)
    @mask.visible=v if @mask != nil
    s.visible = v if s != nil
  end
end
Se o valor de um dos correspondentes rgb for zero você não poderá retirar nada dele, então não haverá necessidade de usar o -i.

Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos