KAG教學---Transition，圖層切換(1)

(k ﾟ∀ﾟ)<今次開始介紹圖層切換，包括背景、前景和文字圖層。

圖層切換?這是什麼意思?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<例如立繪切換另一個新立繪，背景切換另一個背景，這是每個遊戲必會用到的功能之一，不過也是新手經常有疑問和問題的東西。

不能用[image]直接切換嗎?之前的範例都曾經顯示立繪去不同位置，這不是切換嗎?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<如果單純只是切換立繪，確實可以這樣做，但新立繪會直接顯示出來。

(k ﾟ∀ﾟ)< 今次介紹的[trans]主要是把後頁面 (裏ページ)的內容轉移到前頁面(表ページ)。[trans]能在顯示或切換時加上特效，例如淡出淡入的效果。

(k ﾟ∀ﾟ)<不過詳細介紹[trans]之前，首先看看以下的範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640] [image storage="bg1" page=fore layer=base] 圖層切換之前[p][cm] [backlay] [image storage="bg2" page=back layer=base] [trans method=crossfade time=3000] [wt] 圖層切換之後

我們不是介紹[trans]的嗎?為什麼有其他沒看過的東西冒出來?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<因為通常它們都會用在一起，事實上若果大家有看過其他地方介紹圖層切換的話，也會看到類似的形式，在正式介紹[trans]之前，簡單介紹實際上這範例在幹什麼。

(k ﾟ∀ﾟ)<上述的範例的前2行一如以往地設定前頁面(表ページ)的文字圖層和背景，而第4行出現了[backlay]，這個[backlay]的功能是前頁面(表ページ)的內容複製到後頁面 (裏ページ)。

(k ﾟ∀ﾟ)<第5行的[image]把新背景設定到後頁面 (裏ページ)，之前曾經提及過後頁面 (裏ページ)是作為一個緩衝區，這是為了切換圖層的準備。

(k ﾟ∀ﾟ)<第6行的[trans]把後頁面 (裏ページ)所有圖層的內容轉移到前頁面(表ページ)，第7行的[wt]是等待[trans]結束。

(k ﾟ∀ﾟ)<一般來說，第4至7行的步驟是基本的圖層切換方法。

不過我很在意這個[backlay]，什麼複製到後頁面 (裏ページ)，可以不寫它嗎?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<使用[backlay]的原因是[trans]切換了所有圖層，我們使用[backlay]把所有前頁面(表ページ)圖層的設定複製到後頁面 (裏ページ)，令兩者的圖層內容變得一樣，之後我們只要修改想切換的圖層就可以。

(k ﾟ∀ﾟ)<如果不用[backlay]，兩者的圖層有可能設定不一致，以上述的範例以例，若果不寫[backlay]，雖然背景一樣被切換，不過由於沒有修改後頁面 (裏ページ)的文字圖層，文字圖層會變回預設的模樣。

那麼[wt]呢?可以不寫它嗎?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<我建議最好加上[wt]來等待，否則顯示的文字可能會被切換。

(k ﾟ∀ﾟ)<[wt]還有一個屬性canskip，可以設定[trans]的特效可否因點擊滑鼠而略過，若果是true，當玩家點擊滑鼠時，[wt]會直接把[trans]結束，直接變成切換後的模樣，不會等待[trans]結束。反之若果是false，玩家必須等待[trans]結束才繼續。

(k ﾟ∀ﾟ)<如果想直接停止[trans]，可以使用[stoptrans]，不過一般極少使用並且不建議這樣做。

(k ﾟ∀ﾟ)<然而，使用[trans]亦可以同時切換多個圖層，以下是範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640] [image storage="bg1" page=fore layer=base] 圖層切換之前[p][cm] [backlay] [image storage="bg2" layer=base page=back] [image storage="fg1" pos=center visible=true layer=0 page=back] [trans method=crossfade time=3000] [wt] 圖層切換之後

(k ﾟ∀ﾟ)<上述的範例同時切換前景和背景圖層，不論切換多少個圖層或者是哪個圖層，只要放在後頁面 (裏ページ)就可以。

(k ﾟ∀ﾟ)<差不多時候介紹[trans]，[trans]提供了三種基本的效果方式來切換圖層，分別是交叉淡化(Cross fade)、捲軸式(Scroll)、使用遮色片切換(Universal)。

(k ﾟ∀ﾟ)<另外，吉里吉里提供了插件extrans.dll擴充，增加了幾種效果。

(k ﾟ∀ﾟ)<今回先介紹基本的三種，我們使用[trans]的method就可以設定切換的效果方式，上述的範例都是交叉淡化，也是使用方法最簡單的一個。

(k ﾟ∀ﾟ)<使用交叉淡化時把method設定為crossfade，並且加上time屬性來設定切換所需的時間，以微秒(ms)為單位。例子就請看上面的範例吧。

(k ﾟ∀ﾟ)<下一個介紹的是捲軸式，使用時把method設定為scoll，以下是範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640] [image storage="bg1" page=fore layer=base] 圖層切換之前[p][cm] [backlay] [image storage="bg2" layer=base page=back] [trans method=scroll from=bottom stay=nostay time=2000] [wt] 圖層切換之後

(k ﾟ∀ﾟ)<不同於之前的crossfade，scoll 除了用time 設定切換所需的時間，還有from和stay這兩個scoll專用的屬性，from是設定捲軸時的方向，有left、right、top和bottom這四種方向選擇，而stay是設定切換時圖像移動與否，有nostay、stayfore、stayback 這三種選擇，nostay時前頁面(表ページ)和後頁面 (裏ページ)的圖像會一起移動，stayfore時只有前頁面(表ページ)會移動，stayback則反之，只有後頁面 (裏ページ)會移動。

不得了，為什麼我的對話框跟著背景跑掉了?我只想要切換背景而已......>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<因為[trans]是所有圖層都切換，其他切換方式或許不大問題，但scoll 則會發生上述的情況，為了避免文字圖層或前景圖層一起切換，大家可以使用children這屬性，children設定"子圖層"是否跟著一起切換，"子圖層"是指文字圖層或前景圖層等圖層，當children為false時，文字圖層或前景圖層就不會被切換，以下是範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640] [image storage="bg1" page=fore layer=base] 圖層切換之前[p][cm] [backlay] [image storage="bg2" layer=base page=back] [trans method=scroll from=bottom stay=nostay children=false time=2000] [wt] 圖層切換之後

(k ﾟ∀ﾟ)<下一個介紹的是使用遮色片切換，使用時把method設定為universal，但不同於上述兩種方式，universal必須準備遮色片，吉里吉里說明文件稱呼為"ルール画像"，簡單來說就是利用遮色片的灰階度，灰階度越高，越早被切換，以下是範例和給大家測試用的遮色片。

[position page=fore layer=message0 left=0 top=320 height=160 width=640] [image storage="bg1" page=fore layer=base] 圖層切換之前[p][cm] [backlay] [image storage="bg2" layer=base page=back] [trans method=universal rule=r1 vague=30 time=2000] [wt] 圖層切換之後

(k ﾟ∀ﾟ)<除了time外，universal亦有兩個專用的屬性rule和vague，rule是設定遮色片的檔案名稱，vague是設定切換時柔化程度，接受的數值為0或以上的正整數，如果用上面的遮色片，當vague為0時，可以看到背景一格格地被切換。

我一直有疑問，[trans]沒有layer這個屬性嗎?不能指定某個圖層嗎?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<[trans]的確有layer這個屬性，不過絕不建議使用，因為使用上十分困難。

(k ﾟ∀ﾟ)<今回就介紹到這裡，下回再見。