shader設(shè)置

個人比較懶，每個按鈕都做好幾個顏色不是我的風格，剛好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)，當按下時狀態(tài)置為1，當按下時，按鈕背景的亮度增加50%，透明度減少15%

腳本設(shè)置

這里當按鈕按下時，增加了按鈕的大小，因為按鈕繪制是從左上角坐標開始，為了省資源，沒有再套一層去處理，直接對縮放和位置同時設(shè)置動畫效果。

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ù)，這個函數(shù)的cubic in是y=x^3，cubic out是將曲線按x軸翻轉(zhuǎn)再+1： y=1-(1-x)^3;

tween運動效果速查表：http://www.xuanfengge.com/easeing/easeing/#

node結(jié)構(gòu)

記得把每個按鈕的shader都獨立出來，否則。。。