1. Initialy buttons are semi-transparent.
2. When hovering over button it slides slightly to the center and become fully visible.
3. When pressing on button it stays in that position and is fully visible.
4. When pressing on different button previously active button becomes semi-transparent as it slides back to the side.
I have issue with this animation. Whenever I press button on the left side of screen it resets animation and plays it from start instead of continuing it from previous state. The thing is I have exactly the same animation on buttons on the right side of the screen and animation plays smoothly without any resets and continues from previous state as described above.
LEFT SIDE BUTTONS:
This is the screen where button's animation is reseting on pressing them, they are place on the left side of screen:
Code: Select all
screen cg_gallery(page=1,doTrans=True):
key "game_menu" action ShowMenu('extras',fromMain=True,doTrans=False)
add gui.mm_background
fixed:
at gui_fade_out
add "gui_overlay"
use exit_button(clickaction=ShowMenu('extras',fromMain=True,doTrans=False),doTrans=False)
if doTrans:
add "gui/log_decor_top.png" at gui_overlaydecor_top
else:
add "gui/log_decor_top.png" xalign 0.5 ypos 104 alpha 0.3
frame:
background None
xsize 1200
if doTrans:
at gui_overlaydecor_bottom
else:
xalign 0.5 ypos 967
add "gui/cg_decor_bottom.png":
alpha 0.3
text "GALLERY":
style "gui_overlay_title"
# Page navigation.
vbox:
align (0.0, 0.49)
spacing 20
if doTrans:
at gui_fade(1.0)
button:
style "cgbutton_left"
text "Backgrounds":
style "cgbutton_text"
xpos 72
if page is not 1:
hovered Play("system",guisfx_button_hover)
action [Play("system",guisfx_button_click),
SelectedIf(page==1),
ShowMenu("cg_page1",page=1,doTrans=False)]
at gui_buttonfade_slide_left
button:
style "cgbutton_left"
text "CG":
style "cgbutton_text"
xpos 72
if page is not 2:
hovered Play("system",guisfx_button_hover)
action [Play("system",guisfx_button_click),
SelectedIf(page==2),
ShowMenu("cg_page2",page=2,doTrans=False)]
at gui_buttonfade_slide_left
button:
style "cgbutton_left"
text "Characters 1":
style "cgbutton_text"
xpos 72
if page is not 3:
hovered Play("system",guisfx_button_hover)
action [Play("system",guisfx_button_click),
SelectedIf(page==3),
ShowMenu("cg_page3",page=3,doTrans=False)]
at gui_buttonfade_slide_left
button:
style "cgbutton_left"
text "Characters 2":
style "cgbutton_text"
xpos 72
if page is not 4:
hovered Play("system",guisfx_button_hover)
action [Play("system",guisfx_button_click),
SelectedIf(page==4),
ShowMenu("cg_page4",page=4,doTrans=False)]
at gui_buttonfade_slide_left
Code: Select all
screen cg_page1(page=1,doTrans=True):
tag menu
use cg_gallery(page=page,doTrans=doTrans)
default sub_page = 1
vbox:
align (0.97, 0.49)
xanchor 1.0
spacing 20
if doTrans:
at gui_fade(1.0)
button:
style "cgbutton_right"
text "Page 1":
style "cgbutton_text"
xpos 24
if sub_page is not 1:
hovered Play("system",guisfx_button_hover)
action [Play("system",guisfx_button_click),
SelectedIf(sub_page==1),
SetScreenVariable("sub_page",1)]
at gui_buttonfade_slide_right
button:
style "cgbutton_right"
text "Page 2":
style "cgbutton_text"
xpos 24
if sub_page is not 2:
hovered Play("system",guisfx_button_hover)
action [Play("system",guisfx_button_click),
SelectedIf(sub_page==2),
SetScreenVariable("sub_page",2)]
at gui_buttonfade_slide_right
frame:
style "cgpage_frame"
if doTrans:
at gui_fade(1.0)
if sub_page == 1:
grid 3 3:
spacing 60
Code: Select all
transform gui_buttonfade_slide_left(beginalpha=0.3):
alpha beginalpha
xoffset -40
on idle:
easein 0.3 alpha beginalpha xoffset -40
on selected_idle:
easein 0.3 alpha 1.0 xoffset 0
on hover:
easein 0.3 alpha 1.0 xoffset 0
on selected_hover:
easein 0.3 alpha 1.0 xoffset 0
This is screen for buttons on the right side where sliding and opacity animation works perfectly fine without any resets and continues from previous state:
Code: Select all
screen cg_page3(page=3,doTrans=False):
tag menu
use cg_gallery(page=page,doTrans=doTrans)
default sub_page = 1
vbox:
align (0.97, 0.49)
xanchor 1.0
spacing 20
if doTrans:
at gui_fade(1.0)
button:
style "cgbutton_right"
text "NAME":
style "cgbutton_text"
xpos 24
if sub_page is not 1:
hovered Play("system",guisfx_button_hover)
action [Play("system",guisfx_button_click),
SelectedIf(sub_page==1),
SetScreenVariable("sub_page",1)]
at gui_buttonfade_slide_right
button:
style "cgbutton_right"
text "NAME":
style "cgbutton_text"
xpos 24
if sub_page is not 2:
hovered Play("system",guisfx_button_hover)
action [Play("system",guisfx_button_click),
SelectedIf(sub_page==2),
SetScreenVariable("sub_page",2)]
at gui_buttonfade_slide_right
button:
style "cgbutton_right"
text "NAME":
style "cgbutton_text"
xpos 24
if sub_page is not 3:
hovered Play("system",guisfx_button_hover)
action [Play("system",guisfx_button_click),
SelectedIf(sub_page==3),
SetScreenVariable("sub_page",3)]
at gui_buttonfade_slide_right
Code: Select all
transform gui_buttonfade_slide_right(beginalpha=0.3):
alpha beginalpha
xoffset 10
on idle:
easein 0.3 alpha beginalpha xoffset 10
on selected_idle:
easein 0.3 alpha 1.0 xoffset -30
on hover:
easein 0.3 alpha 1.0 xoffset -30
on selected_hover:
easein 0.3 alpha 1.0 xoffset -30