shader设置

个人比较懒，每个按钮都做好几个颜色不是我的风格，刚好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;
}

这里，我们用到了状态，当按下时状态置为1，当按下时，按钮背景的亮度增加50%，透明度减少15%

脚本设置

这里当按钮按下时，增加了按钮的大小，因为按钮绘制是从左上角坐标开始，为了省资源，没有再套一层去处理，直接对缩放和位置同时设置动画效果。

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函数，这个函数的cubic in是y=x^3，cubic out是将曲线按x轴翻转再+1： y=1-(1-x)^3;

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

node结构

记得把每个按钮的shader都独立出来，否则。。。