renpy (4) button / imagebutton / textbutton 按鈕變色效果 (hover / unhover)

當滑鼠移上按鈕，咻，按鈕變色了。當滑鼠離開按鈕，咻，按鈕又變回來了。
藉由這樣的效果，可以讓玩家清楚感受到這是一個可點選的按鈕。
要如何製作這樣的效果呢?

imagebutton

難度：簡單

Imagebutton:
    idle "滑鼠離開時照片"
    hover "滑鼠移上時照片"
    action NullAction()

參閱官網只要設定屬性idle及hover即可，要注意的一點是，必須要有任意Action，變色效果才會顯現出來。
如果不打算有任何Action，則使用NullAction吧，此方法就是為了變色而設立的。

textbutton

難度：中等參閱官網在options.rpy當中，有欄位為

widget_text = "滑鼠離開時顏色",
widget_selected = "滑鼠移上時顏色",

設定好後，textbutton的變色就會依照此設定來做調整囉。
缺點是不能在任意的textbutton指定變數顏色，如果今天有兩個textbutton，想指定為

textbutton1 滑鼠移上紅色滑鼠離開白色
textbutton2 滑鼠移上藍色滑鼠離開白色

在此方法中是無能為力的。

button

難度：困難，但textbutton或imagebutton也可用此方法來變色，最萬用。

Screen button_test:
    default myhover = False
    button:
        action SetScreenVariable("myhover", False)
        hovered SetScreenVariable("myhover", True)
        unhovered SetScreenVariable("myhover", False)
        if myhover:
          image "滑鼠移上時照片"
          text ("YA") color "滑鼠移上時顏色"
        else:
          image "滑鼠離開時圖片"
          text ("YA") color "滑鼠離開時顏色"

在Screen Language當中，可以使用defalut這個字眼來定義專屬於某個Screen的變數，並且可使用SetScreenVariable此Action來指定變數值。
所以只要指定，在滑鼠移上時，變數值為True，滑鼠離開時，變數值為False。
最後再根據True/False之值，來決定畫面上要顯示什麼即可。

另外，除了if else寫法以外，單純圖片變色也可以使用ConditionSwitch這個函式

image ConditionSwitch( myhover, "滑鼠移上時圖片",
                        True, "滑鼠離開時圖片")

Contents

imagebutton

textbutton

button