KAG教學(應用篇)---簡單選項框

(建議在閱讀本篇教學之前，請先閱讀KAG教學---分歧，選項(1)、KAG教學---到底你想控制誰，文字圖層(2)、KAG教學---萬能的功能，layopt)

(k ﾟ∀ﾟ)<今次利用之前介紹的東西，製作一個一般常見的選項框，上次在KAG教學---分歧，選項(1) 已經介紹過選項，不過大家可能有疑問，我們看慣的選項框不是這樣子的。

的確上一次的範例的選項是放在對話框裡，雖然有少部分遊戲會這樣做，不過大多數都有獨自的選項框。>( ﾟωﾟ s)

不過會很困難嗎? >( ﾟωﾟ s)

(k ﾟ∀ﾟ)<絕對不困難，就算使用純文字式選項，只要配合文字圖層，就能製作出不錯的選項框。

(k ﾟ∀ﾟ)<我們可以使用修改對話框的文字圖層來製作成選項框，好處是比較簡單。以下是範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640] [image storage="bg2" page=fore layer=base] 以下是分歧點。[p][cm] [cm] [position page=fore layer=message0 left=160 top=180 height=120 width=320] [link target=*select1]選項１[endlink][r] [link target=*select2]選項２[endlink][r] [s] *select1 [cm] [position page=fore layer=message0 left=0 top=320 height=160 width=640] 這是選項1。[l] [jump target=*common] *select2 [cm] [position page=fore layer=message0 left=0 top=320 height=160 width=640] 這是選項２。[l] [jump target=*common] *common [cm] 回到共通路線。

(k ﾟ∀ﾟ)<當到達選項出現的時候，就把原本的對話框改成選項框，而在選項完結後再把選項框改回對話框就可以。

(k ﾟ∀ﾟ)<當然我們可以使用圖片來自製選項框，以下是範例和範例中選項框的圖片。


選項框:

範例:

[position page=fore layer=message0 left=0 top=320 height=160 width=640] [image storage="bg2" page=fore layer=base] 以下是分歧點。[p][cm] [cm] [position page=fore layer=message0 left=160 top=180 frame=choicebox1] [link target=*select1]選項１[endlink][r] [link target=*select2]選項２[endlink][r] [s] *select1 [cm] [position page=fore layer=message0 left=0 top=320 height=160 width=640 frame=""] 這是選項1。[l] [jump target=*common] *select2 [cm] [position page=fore layer=message0 left=0 top=320 height=160 width=640 frame=""] 這是選項２。[l] [jump target=*common] *common [cm] 回到共通路線。

(k ﾟ∀ﾟ)<對不起，這個選項框的模樣有點隨便，請大家見諒。

(k ﾟ∀ﾟ)<不過要留意，當指定圖片為文字圖層背景，我們改回對話框時別忘記需要修改它，由於這範例的對話框沒有圖片作背景，所以只要在frame寫上""就可以。

哦! 好像開始有點像樣，不過我經常看見的選項框是每個選項都有自己的選項框。>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<這情況可以使用多個文字圖層，不過由於需要的文字圖層數量比較多，大家可修改Config.tjs 中的numMessageLayers 來設定文字圖層數量，以下是範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640] [position page=fore layer=message1 left=160 top=140 height=60 width=320] [position page=fore layer=message2 left=160 top=220 height=60 width=320] [image storage="bg2" page=fore layer=base] 以下是分歧點。[p][cm] [cm] [current layer=message1] [link target=*select1]選項１[endlink] [current layer=message2] [link target=*select2]選項２[endlink] [layopt layer=message0 visible=false] [layopt layer=message1 visible=true] [layopt layer=message2 visible=true] [s] *select1 [cm] [layopt layer=message0 visible=true] [layopt layer=message1 visible=false] [layopt layer=message2 visible=false] [current layer=message0] 這是選項1。[l] [jump target=*common] *select2 [cm] [layopt layer=message0 visible=true] [layopt layer=message1 visible=false] [layopt layer=message2 visible=false] [current layer=message0] 這是選項２。[l] [jump target=*common] *common [cm] 回到共通路線。

 (k ﾟ∀ﾟ)<我們使用多個文字圖層來製作個選項框，上述的範例中，文字圖層mesage0用作為對話框，文字圖層mesage1和mesage2則用作為選項框。

(k ﾟ∀ﾟ)<當需要使用選項時，只要用[current]把選項放在各個文字圖層，然後用[layopt]把對話框設定為不顯示(visible=false)，而選項框設定為顯示(visible=true)，若果保留對話框的話，就可以不用設定對話框了。

(k ﾟ∀ﾟ)<當選項完結後，我們重新把對話框設定為顯示，而選項框設定為不顯示，當然記得用[current]來重新控制對話框，透過文字圖層的顯示與否，我們可以到達切換對話框和選項框的效果。

(k ﾟ∀ﾟ)<上述的範例中的對話框和選項框各自有自己的文字圖層，這樣的好處是方便管理，而且各個文字圖層的用處十分清晰，發生錯誤的機會亦可減低。

(k ﾟ∀ﾟ)<當然一樣可以使用圖片來自製選項框，以下是範例和範例中選項框的圖片。

選項框:

範例:

[position page=fore layer=message0 left=0 top=320 height=160 width=640] [position page=fore layer=message1 left=180 top=140 frame="choicebox2"] [position page=fore layer=message2 left=180 top=220 frame="choicebox2"] [image storage="bg2" page=fore layer=base] 以下是分歧點。[p][cm] [cm] [current layer=message1] [link target=*select1]選項１[endlink] [current layer=message2] [link target=*select2]選項２[endlink] [layopt layer=message0 visible=false] [layopt layer=message1 visible=true] [layopt layer=message2 visible=true] [s] *select1 [cm] [layopt layer=message0 visible=true] [layopt layer=message1 visible=false] [layopt layer=message2 visible=false] [current layer=message0] 這是選項1。[l] [jump target=*common] *select2 [cm] [layopt layer=message0 visible=true] [layopt layer=message1 visible=false] [layopt layer=message2 visible=false] [current layer=message0] 這是選項２。[l] [jump target=*common] *common [cm] 回到共通路線。

哦! 這才是我一直看慣的選項框呀! >( ﾟωﾟ s)

(k ﾟ∀ﾟ)<這個方法比使用[button]有其好處，就是只需要製作一個選項框就可以用於所有選項，使用[button]則要每個都要重新繪畫。

(k ﾟ∀ﾟ)<大致上介紹完如何製作簡單的選項框，今回就到這裡，下次再見。