1 Botões com degradê Qua 07 Nov 2012, 23:05
Soreto
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:
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:
Resultado final:
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)
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
- Código:
s.bitmap.fill_rect(0,0,@s.bitmap.width,25, Color.new(139, 69, 19))
- 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
Resultado final:
- Spoiler:
- [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- 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