shader設(shè)置
個(gè)人比較懶赔退,每個(gè)按鈕都做好幾個(gè)顏色不是我的風(fēng)格橙依,剛好shader是可以用來處理顏色的,那么就上手吧
shader_type canvas_item;
uniform int status:hint_range(0,1) = 0 ;
void fragment(){
vec4 cc = texture(TEXTURE, UV);
if(status==1){
cc.rgb = mix(vec3(.0), cc.rgb, 1.5);
cc.a *= .85;
}
COLOR = cc;
}
這里硕旗,我們用到了狀態(tài)窗骑,當(dāng)按下時(shí)狀態(tài)置為1,當(dāng)按下時(shí)漆枚,按鈕背景的亮度增加50%创译,透明度減少15%
腳本設(shè)置
這里當(dāng)按鈕按下時(shí),增加了按鈕的大小墙基,因?yàn)榘粹o繪制是從左上角坐標(biāo)開始软族,為了省資源刷喜,沒有再套一層去處理,直接對(duì)縮放和位置同時(shí)設(shè)置動(dòng)畫效果立砸。
extends TextureButton
var sizeDrt = Vector2();
var scale = 1.1;
var potOld = Vector2();
func _ready():
sizeDrt.x = rect_size.x*(1-scale)/2;
sizeDrt.y = rect_size.y*(1-scale)/2;
potOld = rect_position;
pass # Replace with function body.
func _on_bt_play_button_down():
material.set_shader_param('status',1)
$Tween.interpolate_property(self,"rect_scale",rect_scale, Vector2(scale,scale), .2,Tween.TRANS_CUBIC,Tween.EASE_OUT);
$Tween.interpolate_property(self,"rect_position",rect_position, potOld+sizeDrt, .2,Tween.TRANS_CUBIC,Tween.EASE_OUT);
$Tween.start();
func _on_bt_play_button_up():
material.set_shader_param('status',0)
$Tween.interpolate_property(self,"rect_scale",rect_scale, Vector2(1.0, 1.0), .3,Tween.TRANS_CUBIC,Tween.EASE_OUT);
$Tween.interpolate_property(self,"rect_position",rect_position, potOld, .3,Tween.TRANS_CUBIC,Tween.EASE_OUT);
$Tween.start();
效果用到了cubic out函數(shù)掖疮,這個(gè)函數(shù)的cubic in是y=x^3,cubic out是將曲線按x軸翻轉(zhuǎn)再+1: y=1-(1-x)^3;
tween運(yùn)動(dòng)效果速查表:http://www.xuanfengge.com/easeing/easeing/#
node結(jié)構(gòu)
記得把每個(gè)按鈕的shader都獨(dú)立出來颗祝,否則氮墨。。吐葵。