KAG教學(補充篇)---前頁面與後頁面，圖層切換(1)

(k ﾟ∀ﾟ)<由於圖層切換不太容易理解，這篇是進一步解釋圖層切換的原理。

其實我還不太明白前頁面(表ページ)與後頁面(裏ページ)到底有什麼分別。>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<你可以把它想像成一個舞台，前頁面(表ページ)是舞台，放在這裡的東西馬上被玩家看到，而後頁面 (裏ページ)是後台，為出場而準備，玩家是看不到後頁面的部分，後頁面可以作為一個緩衝區，並把準備好的畫面顯示到前頁面。

(k ﾟ∀ﾟ)<簡單來說，兩者的差別只是看到與看不到。但由於我們看不到後頁面的部分，所以容易出錯，使用時必須清楚後頁面的狀態。

(k ﾟ∀ﾟ)<先看看以下的範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640]
[image storage="bg1" page=fore layer=base]
[image storage="fg1" page=fore layer=0 pos=right visible=true]
前頁面的模樣

(k ﾟ∀ﾟ)<執行完上述的範例，到底前頁面與後頁面是怎麼樣?

現在前頁面應該有一張叫bg1的圖片作為背景，有一張叫fg1的圖片作為前景，而且放在畫面的右邊，並且有個640x160的文字圖層，上面寫著"前頁面的模樣"。>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<正確，那麼後頁面呢?

什麼都沒有?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<不太對，因為我們暫時沒有在後頁面裡放置任何東西，所以後頁面是預設的模樣，就是一開始時的這個黑色背景和大大的文字圖層。就好像以下的模樣(左是前頁面，右是後頁面)。

(k ﾟ∀ﾟ)<我們再看看以下的範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640]
[image storage="bg1" page=fore layer=base]
[image storage="fg1" page=fore layer=0 pos=right visible=true]
前頁面的模樣

[position page=back layer=message0 left=0 top=320 height=160 width=640]

[image storage="bg2" page=back layer=base]

[image storage="fg1" page=back layer=0 pos=left visible=true]

[current page=back]

後頁面的模樣

(k ﾟ∀ﾟ)<執行完上述的範例，到底後頁面是怎麼樣?

現在前頁面應該有一張叫bg2的圖片作為背景，有一張叫fg1的圖片作為前景，而且放在畫面的左邊，並且有個640x160的文字圖層，上面寫著"後頁面的模樣"。>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<是的，就好像以下的模樣(左是前頁面，右是後頁面)。

(k ﾟ∀ﾟ)<我們再看看以下的範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640]
[image storage="bg1" page=fore layer=base]
[image storage="fg1" page=fore layer=0 pos=right visible=true]
前頁面的模樣
[position page=back layer=message0 left=0 top=320 height=160 width=640]
[image storage="bg2" page=back layer=base]
[image storage="fg1" page=back layer=0 pos=left visible=true]
[current page=back]
後頁面的模樣

[p]

[trans method=crossfade time=3000]

[wt]

(k ﾟ∀ﾟ)<[trans]的功能是把後頁面的內容轉移到前頁面，執行完上述的範例，前頁面會變成後頁面的模樣，不過要留意，後頁面的內容是不會改變的。

(k ﾟ∀ﾟ)<就好像以下的模樣(左是前頁面，右是後頁面)。

(k ﾟ∀ﾟ)<我們再看看以下的範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640]
[image storage="bg1" page=fore layer=base]
[image storage="fg1" page=fore layer=0 pos=right visible=true]
前頁面的模樣
[position page=back layer=message0 left=0 top=320 height=160 width=640]
[image storage="bg2" page=back layer=base]
[image storage="fg1" page=back layer=0 pos=left visible=true]
[current page=back]
後頁面的模樣
[p]
[trans method=crossfade time=3000]
[wt]

[current page=fore]

[layopt page=fore layer=message0 visible=false]

圖層切換完畢後，前頁面的文字圖層設定成不顯示?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<是的，就好像以下的模樣(左是前頁面，右是後頁面)。

(k ﾟ∀ﾟ)<我們再看看以下的範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640]
[image storage="bg1" page=fore layer=base]
[image storage="fg1" page=fore layer=0 pos=right visible=true]
前頁面的模樣
[position page=back layer=message0 left=0 top=320 height=160 width=640]
[image storage="bg2" page=back layer=base]
[image storage="fg1" page=back layer=0 pos=left visible=true]
[current page=back]
後頁面的模樣
[p]
[trans method=crossfade time=3000]
[wt]
[current page=fore]
[layopt page=fore layer=message0 visible=false]

[p]

[image storage="fg1" page=back layer=0 pos=right visible=true]

[trans method=crossfade time=3000]

(k ﾟ∀ﾟ)<在上述的範例裡，我在後頁面放置一張叫fg1的圖片作為前景，而且放在畫面的右邊，之後用[trans]來切換圖層，那麼我們看到什麼畫面?

叫fg1的圖片會出現在畫面的右邊?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<事實上變化不只是fg1會出現在畫面的右邊，設定成不顯示的文字圖層都會重新顯示。

咦?為什麼文字圖層會重新顯示?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<因為我們只是把前頁面的文字圖層設定成不顯示，後頁面的文字圖層並沒有改變，這意味著後頁面的文字圖層還是設定成顯示。

(k ﾟ∀ﾟ)<當我們用[trans]把後頁面的內容轉移到前頁面時，文字圖層就會返回顯示的設定。

(k ﾟ∀ﾟ)<以下是切換前的模樣(左是前頁面，右是後頁面)。

(k ﾟ∀ﾟ)<以下是切換後的模樣(左是前頁面，右是後頁面)。

原來如此!>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<這是新手經常犯上的錯誤，因為忘記了把前頁面複製到後頁面，所以顯示了一些非預期的東西，因此我們會使用[backlay]把所有前頁面的圖層的設定複製到後頁面，令兩者的圖層內容變得一樣，之後我們只要修改想切換的圖層就可以。

(k ﾟ∀ﾟ)<今次解釋到這裡，大家更加理解圖層切換的原理。