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
» Pokémon Genesis Online! (PGO)
Qua 05 Jul 2017, 17:08 por Lexar

» Tileset Converter to MV
Sex 12 Maio 2017, 13:07 por Douggi

» [Dúvida] Como tirar a porcentagem de esquiva
Ter 09 Maio 2017, 22:15 por Neil Flame Runner

» Pack Resources, Sprites e etc
Qua 23 Dez 2015, 09:30 por raydengv

» Download RPG Maker 2003 + RTP em português
Ter 22 Dez 2015, 08:14 por ::KimMax::

» Fantasy Art Online
Dom 18 Out 2015, 16:42 por daviih123

» Você vai ter medo do Nerve gear?
Sab 25 Jul 2015, 16:02 por Kirito-kun

» O Barato é louco
Sab 27 Jun 2015, 15:26 por Halt

» Download RPG Maker 2000 + RTP em português
Qui 21 Maio 2015, 19:28 por Wismael

» Divulgando meu grupo e página do Facebook
Ter 19 Maio 2015, 13:06 por Halt


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

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

1 Botões com degradê em Qua 07 Nov 2012, 20:05

Soreto

avatar
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:
[Você precisa estar registrado e conectado para ver esta imagem.]
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 perfil do usuário

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum