tooltip

所謂的tooltip,就是當你滑鼠移到一個button上後,可以顯示一些說明,讓使用者更了解這個button的功能。
可以用以下的程式碼簡單的實作tootip

1
2
3
screen tooltip(tip, positon):
    frame:
        text tip pos position

然後在button上的hovered和unhovered加上action即可

1
2
3
button:
    hovered Show(tooltip, tip="說明文字", position = (10,20) )
    unhovered Hide(tooltip)

出現在滑鼠的位置

目前這個簡陋的tooltip,它的位置是被固定死的。也就是說,每次有新的tooltip,都得自己先行想好tooltip的位置。
能不能要tooltip直接顯示在滑鼠旁邊呢? 可行的,renpy有提供滑鼠位置的函式。

1
2
3
4
screen tooltip(tip=None):
    frame:
        $ position = renpy.get_mouse_pos()
        text tip pos position

如此一來,不用輸入position也可以直接顯示在滑鼠上了,使用者想要自己加減pixel,讓tooltip出現在滑鼠的上下左右方也是非常輕而易舉。

隨著滑鼠而移動

如果想要tooltip不僅僅只是閃現的那刻出現在滑鼠旁,而是無時無刻的跟著滑鼠移動呢?
查閱官網,影響位置的參數有兩個。大部分的Screen物件都有兩種可調的位置屬性,第一個是Common Properties中的at,第二個是Position Style Properties。
據我所知,Position Style Properties是無法動態調整的,所以我們只能依靠關鍵字at後面所接續的trnasform statement來解決這個問題了。

具體步驟

  1. 新增一個transform執行function
  2. 此function內容為定時更新位置(範例為0.05秒)
  3. 在tooltip當中對frame加上at 步驟1的transform

範例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
transform follow_mouse:
    function follow_mouse_func
    
init python:
    def follow_mouse_func(trans, st, at):
        trans.pos = renpy.get_mouse_pos()
        return 0.05

screen tooltip(tip=None):
    frame:
        at follow_mouse
        if tip is not None:
            text tip size 14 color "#000000"

function的撰寫可以參考官網 簡略的說一下內容:

  1. 必須有3個參數
  2. 第一個參數為transfrom物件,物件的資訊一樣看官網
  3. 第二、三個參數跟執行時間相關,較不重要。
  4. 回傳值為希望多久後再呼叫一次此function,0秒代表立刻,None代表不再call function,可以繼續向下執行其他transition內容。