Improve the tween demo

Significant style changes.
This commit is contained in:
Aaron Franke
2020-02-02 04:27:58 -05:00
parent 729be3461d
commit e5ee4a5971
2 changed files with 100 additions and 104 deletions

View File

@@ -1,45 +1,54 @@
extends Control
# Member variables
var trans = ["linear", "sine", "quint", "quart", "quad", "expo", "elastic", "cubic", "circ", "bounce", "back"]
var eases = ["in", "out", "in_out", "out_in"]
var modes = ["move", "color", "scale", "rotate", "callback", "follow", "repeat", "pause"]
const trans_list = ["Linear", "Sine", "Quint", "Quart", "Quad", "Expo", "Elastic", "Cubic", "Circ", "Bounce", "Back"]
const eases_list = ["In", "Out", "InOut", "OutIn"]
const modes_list = ["Move", "Color", "Scale", "Rotate", "Callback", "Follow", "Repeat", "Pause"]
var state = {
trans = Tween.TRANS_LINEAR,
eases = Tween.EASE_IN,
}
onready var trans = $Trans
onready var eases = $Eases
onready var modes = $Modes
onready var tween = $Tween
onready var timeline = $Timeline
onready var color_from_picker = $Colors/ColorFrom/Picker
onready var color_to_picker = $Colors/ColorTo/Picker
onready var sprite = $Tween/Area/Sprite
onready var follow = $Tween/Area/Follow
onready var follow_2 = $Tween/Area/Follow2
onready var size = $Tween/Area.get_size()
func _ready():
for index in range(trans.size()):
get_node("trans/" + trans[index]).connect("pressed", self, "on_trans_changed", [trans[index], index])
for index in range(trans_list.size()):
trans.get_node(trans_list[index]).connect("pressed", self, "on_trans_changed", [trans_list[index], index])
for index in range(eases.size()):
get_node("eases/" + eases[index]).connect("pressed", self, "on_eases_changed", [eases[index], index])
for index in range(eases_list.size()):
eases.get_node(eases_list[index]).connect("pressed", self, "on_eases_changed", [eases_list[index], index])
for index in range(modes.size()):
get_node("modes/" + modes[index]).connect("pressed", self, "on_modes_changed", [modes[index]])
for index in range(modes_list.size()):
modes.get_node(modes_list[index]).connect("pressed", self, "on_modes_changed", [modes_list[index]])
get_node("colors/color_from/picker").set_pick_color(Color(1, 0, 0, 1))
get_node("colors/color_from/picker").connect("color_changed", self, "on_color_changed")
color_from_picker.set_pick_color(Color.red)
color_from_picker.connect("color_changed", self, "on_color_changed")
get_node("colors/color_to/picker").set_pick_color(Color(0, 1, 1, 1))
get_node("colors/color_to/picker").connect("color_changed", self, "on_color_changed")
color_to_picker.set_pick_color(Color.cyan)
color_to_picker.connect("color_changed", self, "on_color_changed")
get_node("trans/linear").set_pressed(true)
get_node("eases/in").set_pressed(true)
get_node("modes/move").set_pressed(true)
get_node("modes/repeat").set_pressed(true)
$Trans/Linear.set_pressed(true)
$Eases/In.set_pressed(true)
$Modes/Move.set_pressed(true)
$Modes/Repeat.set_pressed(true)
reset_tween()
func on_trans_changed(trans_name, index):
for index in range(trans.size()):
var pressed = trans[index] == trans_name
var btn = get_node("trans/" + trans[index])
for index in range(trans_list.size()):
var pressed = trans_list[index] == trans_name
var btn = trans.get_node(trans_list[index])
btn.set_pressed(pressed)
set_mouse_filter(Control.MOUSE_FILTER_IGNORE if pressed else Control.MOUSE_FILTER_PASS)
@@ -49,9 +58,9 @@ func on_trans_changed(trans_name, index):
func on_eases_changed(ease_name, index):
for index in range(eases.size()):
var pressed = eases[index] == ease_name
var btn = get_node("eases/" + eases[index])
for index in range(eases_list.size()):
var pressed = eases_list[index] == ease_name
var btn = eases.get_node(eases_list[index])
btn.set_pressed(pressed)
set_mouse_filter(Control.MOUSE_FILTER_IGNORE if pressed else Control.MOUSE_FILTER_PASS)
@@ -61,14 +70,13 @@ func on_eases_changed(ease_name, index):
func on_modes_changed(mode_name):
var tween = get_node("tween")
if mode_name == "pause":
if get_node("modes/pause").is_pressed():
if $Modes/Pause.is_pressed():
tween.stop_all()
get_node("timeline").set_mouse_filter(Control.MOUSE_FILTER_PASS)
timeline.set_mouse_filter(Control.MOUSE_FILTER_PASS)
else:
tween.resume_all()
get_node("timeline").set_mouse_filter(Control.MOUSE_FILTER_IGNORE)
timeline.set_mouse_filter(Control.MOUSE_FILTER_IGNORE)
else:
reset_tween()
@@ -78,41 +86,35 @@ func on_color_changed(_color):
func reset_tween():
var tween = get_node("tween")
var pos = tween.tell()
tween.reset_all()
tween.remove_all()
var sprite = get_node("tween/area/sprite")
var follow = get_node("tween/area/follow")
var follow_2 = get_node("tween/area/follow_2")
var size = get_node("tween/area").get_size()
if get_node("modes/move").is_pressed():
if $Modes/Move.is_pressed():
tween.interpolate_method(sprite, "set_position", Vector2(0, 0), Vector2(size.x, size.y), 2, state.trans, state.eases)
tween.interpolate_property(sprite, "position", Vector2(size.x, size.y), Vector2(0, 0), 2, state.trans, state.eases, 2)
if get_node("modes/color").is_pressed():
tween.interpolate_method(sprite, "set_modulate", get_node("colors/color_from/picker").get_pick_color(), get_node("colors/color_to/picker").get_pick_color(), 2, state.trans, state.eases)
tween.interpolate_property(sprite, "modulate", get_node("colors/color_to/picker").get_pick_color(), get_node("colors/color_from/picker").get_pick_color(), 2, state.trans, state.eases, 2)
if $Modes/Color.is_pressed():
tween.interpolate_method(sprite, "set_modulate", color_from_picker.get_pick_color(), color_to_picker.get_pick_color(), 2, state.trans, state.eases)
tween.interpolate_property(sprite, "modulate", color_to_picker.get_pick_color(), color_from_picker.get_pick_color(), 2, state.trans, state.eases, 2)
else:
sprite.set_modulate(Color(1, 1, 1, 1))
sprite.set_modulate(Color.white)
if get_node("modes/scale").is_pressed():
if $Modes/Scale.is_pressed():
tween.interpolate_method(sprite, "set_scale", Vector2(0.5, 0.5), Vector2(1.5, 1.5), 2, state.trans, state.eases)
tween.interpolate_property(sprite, "scale", Vector2(1.5, 1.5), Vector2(0.5, 0.5), 2, state.trans, state.eases, 2)
else:
sprite.set_scale(Vector2(1, 1))
sprite.set_scale(Vector2.ONE)
if get_node("modes/rotate").is_pressed():
if $Modes/Rotate.is_pressed():
tween.interpolate_method(sprite, "set_rotation_degrees", 0, 360, 2, state.trans, state.eases)
tween.interpolate_property(sprite, "rotation_degrees", 360, 0, 2, state.trans, state.eases, 2)
if get_node("modes/callback").is_pressed():
if $Modes/Callback.is_pressed():
tween.interpolate_callback(self, 0.5, "on_callback", "0.5 second's after")
tween.interpolate_callback(self, 0.2, "on_callback", "1.2 second's after")
if get_node("modes/follow").is_pressed():
if $Modes/Follow.is_pressed():
follow.show()
follow_2.show()
@@ -125,38 +127,31 @@ func reset_tween():
follow.hide()
follow_2.hide()
tween.set_repeat(get_node("modes/repeat").is_pressed())
tween.set_repeat($Modes/Repeat.is_pressed())
tween.start()
tween.seek(pos)
if get_node("modes/pause").is_pressed():
if $Modes/Pause.is_pressed():
tween.stop_all()
#get_node("timeline").set_ignore_mouse(false)
get_node("timeline").set_value(0)
timeline.set_value(0)
else:
tween.resume_all()
#get_node("timeline").set_ignore_mouse(true)
func _on_tween_step(_object, _key, elapsed, _value):
var timeline = get_node("timeline")
var tween = get_node("tween")
var runtime = tween.get_runtime()
var ratio = 100 * (elapsed / runtime)
timeline.set_value(ratio)
func _on_timeline_value_changed(value):
if !get_node("modes/pause").is_pressed():
if !$Modes/Pause.is_pressed():
return
var tween = get_node("tween")
var runtime = tween.get_runtime()
tween.seek(runtime * value / 100)
func on_callback(arg):
var label = get_node("tween/area/label")
label.add_text("on_callback -> " + arg + "\n")
$Tween/Area/Label.add_text("on_callback -> " + arg + "\n")

View File

@@ -3,7 +3,7 @@
[ext_resource path="res://main.gd" type="Script" id=1]
[ext_resource path="res://godot.png" type="Texture" id=2]
[node name="main" type="Control"]
[node name="Main" type="Control"]
anchor_left = 0.5
anchor_top = 0.5
anchor_right = 0.5
@@ -19,7 +19,7 @@ __meta__ = {
"_edit_use_anchors_": false
}
[node name="trans" type="VBoxContainer" parent="."]
[node name="Trans" type="VBoxContainer" parent="."]
margin_left = 56.0
margin_top = 288.0
margin_right = 129.0
@@ -27,7 +27,7 @@ margin_bottom = 614.0
size_flags_horizontal = 2
size_flags_vertical = 2
[node name="linear" type="Button" parent="trans"]
[node name="Linear" type="Button" parent="Trans"]
margin_right = 48.0
margin_bottom = 20.0
size_flags_horizontal = 2
@@ -35,7 +35,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "linear"
[node name="sine" type="Button" parent="trans"]
[node name="Sine" type="Button" parent="Trans"]
margin_top = 30.0
margin_right = 39.0
margin_bottom = 50.0
@@ -44,7 +44,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "sine"
[node name="quint" type="Button" parent="trans"]
[node name="Quint" type="Button" parent="Trans"]
margin_top = 60.0
margin_right = 45.0
margin_bottom = 80.0
@@ -53,7 +53,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "quint"
[node name="quart" type="Button" parent="trans"]
[node name="Quart" type="Button" parent="Trans"]
margin_top = 90.0
margin_right = 45.0
margin_bottom = 110.0
@@ -62,7 +62,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "quart"
[node name="quad" type="Button" parent="trans"]
[node name="Quad" type="Button" parent="Trans"]
margin_top = 120.0
margin_right = 43.0
margin_bottom = 140.0
@@ -71,7 +71,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "quad"
[node name="expo" type="Button" parent="trans"]
[node name="Expo" type="Button" parent="Trans"]
margin_top = 150.0
margin_right = 43.0
margin_bottom = 170.0
@@ -80,7 +80,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "expo"
[node name="elastic" type="Button" parent="trans"]
[node name="Elastic" type="Button" parent="Trans"]
margin_top = 180.0
margin_right = 54.0
margin_bottom = 200.0
@@ -89,7 +89,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "elastic"
[node name="cubic" type="Button" parent="trans"]
[node name="Cubic" type="Button" parent="Trans"]
margin_top = 210.0
margin_right = 46.0
margin_bottom = 230.0
@@ -98,7 +98,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "cubic"
[node name="circ" type="Button" parent="trans"]
[node name="Circ" type="Button" parent="Trans"]
margin_top = 240.0
margin_right = 35.0
margin_bottom = 260.0
@@ -107,7 +107,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "circ"
[node name="bounce" type="Button" parent="trans"]
[node name="Bounce" type="Button" parent="Trans"]
margin_top = 270.0
margin_right = 59.0
margin_bottom = 290.0
@@ -116,7 +116,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "bounce"
[node name="back" type="Button" parent="trans"]
[node name="Back" type="Button" parent="Trans"]
margin_top = 300.0
margin_right = 41.0
margin_bottom = 320.0
@@ -125,7 +125,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "back"
[node name="eases" type="VBoxContainer" parent="."]
[node name="Eases" type="VBoxContainer" parent="."]
margin_left = 152.0
margin_top = 288.0
margin_right = 215.0
@@ -133,7 +133,7 @@ margin_bottom = 404.0
size_flags_horizontal = 2
size_flags_vertical = 2
[node name="in" type="Button" parent="eases"]
[node name="In" type="Button" parent="Eases"]
margin_right = 24.0
margin_bottom = 20.0
size_flags_horizontal = 2
@@ -141,7 +141,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "in"
[node name="out" type="Button" parent="eases"]
[node name="Out" type="Button" parent="Eases"]
margin_top = 30.0
margin_right = 33.0
margin_bottom = 50.0
@@ -150,7 +150,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "out"
[node name="in_out" type="Button" parent="eases"]
[node name="InOut" type="Button" parent="Eases"]
margin_top = 60.0
margin_right = 51.0
margin_bottom = 80.0
@@ -159,7 +159,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "in_out"
[node name="out_in" type="Button" parent="eases"]
[node name="OutIn" type="Button" parent="Eases"]
margin_top = 90.0
margin_right = 51.0
margin_bottom = 110.0
@@ -168,7 +168,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "out_in"
[node name="modes" type="VBoxContainer" parent="."]
[node name="Modes" type="VBoxContainer" parent="."]
margin_left = 240.0
margin_top = 288.0
margin_right = 317.0
@@ -176,7 +176,7 @@ margin_bottom = 524.0
size_flags_horizontal = 2
size_flags_vertical = 2
[node name="move" type="Button" parent="modes"]
[node name="Move" type="Button" parent="Modes"]
margin_right = 48.0
margin_bottom = 20.0
size_flags_horizontal = 2
@@ -184,7 +184,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "move"
[node name="color" type="Button" parent="modes"]
[node name="Color" type="Button" parent="Modes"]
margin_top = 30.0
margin_right = 44.0
margin_bottom = 50.0
@@ -193,7 +193,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "color"
[node name="scale" type="Button" parent="modes"]
[node name="Scale" type="Button" parent="Modes"]
margin_top = 60.0
margin_right = 45.0
margin_bottom = 80.0
@@ -202,7 +202,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "scale"
[node name="rotate" type="Button" parent="modes"]
[node name="Rotate" type="Button" parent="Modes"]
margin_top = 90.0
margin_right = 50.0
margin_bottom = 110.0
@@ -211,7 +211,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "rotate"
[node name="callback" type="Button" parent="modes"]
[node name="Callback" type="Button" parent="Modes"]
margin_top = 120.0
margin_right = 63.0
margin_bottom = 140.0
@@ -220,7 +220,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "callback"
[node name="follow" type="Button" parent="modes"]
[node name="Follow" type="Button" parent="Modes"]
margin_top = 150.0
margin_right = 50.0
margin_bottom = 170.0
@@ -229,7 +229,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "follow"
[node name="repeat" type="Button" parent="modes"]
[node name="Repeat" type="Button" parent="Modes"]
margin_top = 180.0
margin_right = 53.0
margin_bottom = 200.0
@@ -238,7 +238,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "repeat"
[node name="pause" type="Button" parent="modes"]
[node name="Pause" type="Button" parent="Modes"]
margin_top = 210.0
margin_right = 50.0
margin_bottom = 230.0
@@ -247,7 +247,7 @@ size_flags_vertical = 2
toggle_mode = true
text = "pause"
[node name="colors" type="HBoxContainer" parent="."]
[node name="Colors" type="HBoxContainer" parent="."]
margin_left = 352.0
margin_top = 273.0
margin_right = 1008.0
@@ -259,56 +259,56 @@ __meta__ = {
"_edit_use_anchors_": false
}
[node name="color_from" type="VBoxContainer" parent="colors"]
margin_right = 308.0
[node name="ColorFrom" type="VBoxContainer" parent="Colors"]
margin_right = 290.0
margin_bottom = 480.0
rect_min_size = Vector2( 0, 320 )
size_flags_horizontal = 2
size_flags_vertical = 2
[node name="label" type="Label" parent="colors/color_from"]
[node name="Label" type="Label" parent="Colors/ColorFrom"]
margin_right = 74.0
margin_bottom = 14.0
size_flags_horizontal = 2
size_flags_vertical = 0
text = "Color From:"
[node name="picker" type="ColorPicker" parent="colors/color_from"]
[node name="Picker" type="ColorPicker" parent="Colors/ColorFrom"]
margin_top = 18.0
margin_right = 308.0
margin_right = 290.0
margin_bottom = 480.0
rect_min_size = Vector2( 0, 320 )
size_flags_horizontal = 2
size_flags_vertical = 2
[node name="color_to" type="VBoxContainer" parent="colors"]
[node name="ColorTo" type="VBoxContainer" parent="Colors"]
margin_left = 348.0
margin_right = 656.0
margin_right = 638.0
margin_bottom = 480.0
rect_min_size = Vector2( 0, 320 )
size_flags_horizontal = 2
size_flags_vertical = 2
[node name="label" type="Label" parent="colors/color_to"]
[node name="Label" type="Label" parent="Colors/ColorTo"]
margin_right = 56.0
margin_bottom = 14.0
size_flags_horizontal = 2
size_flags_vertical = 0
text = "Color To:"
[node name="picker" type="ColorPicker" parent="colors/color_to"]
[node name="Picker" type="ColorPicker" parent="Colors/ColorTo"]
margin_top = 18.0
margin_right = 308.0
margin_right = 290.0
margin_bottom = 480.0
rect_min_size = Vector2( 0, 320 )
size_flags_horizontal = 2
size_flags_vertical = 2
[node name="tween" type="Tween" parent="."]
[node name="Tween" type="Tween" parent="."]
repeat = true
playback/repeat = true
[node name="area" type="Panel" parent="tween"]
[node name="Area" type="Panel" parent="Tween"]
anchor_left = 0.5
anchor_top = 0.5
anchor_right = 0.5
@@ -320,7 +320,7 @@ margin_bottom = -152.0
size_flags_horizontal = 2
size_flags_vertical = 2
[node name="label" type="RichTextLabel" parent="tween/area"]
[node name="Label" type="RichTextLabel" parent="Tween/Area"]
margin_left = 176.0
margin_top = 24.0
margin_right = 552.0
@@ -328,18 +328,18 @@ margin_bottom = 160.0
size_flags_horizontal = 2
size_flags_vertical = 2
[node name="sprite" type="Sprite" parent="tween/area"]
[node name="Sprite" type="Sprite" parent="Tween/Area"]
texture = ExtResource( 2 )
[node name="follow" type="Sprite" parent="tween/area"]
[node name="Follow" type="Sprite" parent="Tween/Area"]
position = Vector2( 0, 184 )
texture = ExtResource( 2 )
[node name="follow_2" type="Sprite" parent="tween/area"]
[node name="Follow2" type="Sprite" parent="Tween/Area"]
position = Vector2( 736, 0 )
texture = ExtResource( 2 )
[node name="timeline" type="HSlider" parent="."]
[node name="Timeline" type="HSlider" parent="."]
anchor_left = 0.5
anchor_top = 0.5
anchor_right = 0.5
@@ -350,8 +350,9 @@ margin_right = 416.0
margin_bottom = -128.0
size_flags_horizontal = 2
value = 1.0
ticks_on_borders = true
__meta__ = {
"_edit_use_anchors_": false
}
[connection signal="tween_step" from="tween" to="." method="_on_tween_step"]
[connection signal="value_changed" from="timeline" to="." method="_on_timeline_value_changed"]
[connection signal="tween_step" from="Tween" to="." method="_on_tween_step"]
[connection signal="value_changed" from="Timeline" to="." method="_on_timeline_value_changed"]