KAG教學---美化這黑色的東西，文字圖層(1)

(建議在閱讀本篇教學之前，請先閱讀KAG教學---請立繪登場，顯示前景(1))


這黑色的文字圖層很礙眼，遮掩了大半個畫面，可不可以弄小一些>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<你說文字圖層嗎?剛好今回我正要介紹文字圖層。

(k ﾟ∀ﾟ)<在不修改任何設定的情況下，吉里吉里根據Config.tjs 的設定來決定文字圖層的模樣。

這樣的話直接在Config.tjs 不就行了嗎?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<一般情況下，如果遊戲中只有一個對話框，亦不會中途修改對話框模樣的話，的確可以直接在Config.tjs 就可以。

(k ﾟ∀ﾟ)<但近年多了不少AVG遊戲給予玩家設定自己喜歡的模樣，例如文字速度、文字顏色，其中也見過有設定對話框的顏色。某些遊戲甚至把個別角色的對話框加上個別的特色，每個角色都有屬於自己的對話框。這些情況都不能單純透過Config.tjs 來設定。

(k ﾟ∀ﾟ)<所以今次我們將介紹[position]，[position]是專門用來設定文字圖層，包括位置、顏色等。

(k ﾟ∀ﾟ)<[position]和[image]一樣擁有layer和page兩個屬性，可是文字圖層的名稱不是正整數來命名，而是message0、message1等。而page則是跟之前相同，可選擇fore和back來指定為前頁面(表ページ)還是後頁面 (裏ページ)。以下是沒有圖的範例。

[position layer=message0 page=fore]

(k ﾟ∀ﾟ)<事實上上述的範例什麼事都沒做過，message0是最底層的文字圖層，也就是這個黑色的文字圖層。

(k ﾟ∀ﾟ)<不過[position]有一個有趣的地方，就是不一定需要用layer屬性來指定某個圖層。

如果一個文字圖層的確不是問題，但如果有多個文字圖層怎麼辦，不用layer的話，吉里吉里怎樣知道我設定哪個?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<當我們沒有用layer屬性來指定哪個圖層時，吉里吉里會自己指定目前控制中的文字圖層。

(k ﾟ∀ﾟ)<在控制不同文字圖層的情況下，我們會使用[current] 來指定文字圖層，不過這部分留待下次才講解。今次主要介紹一個文字圖層的情況。

(k ﾟ∀ﾟ)<我首先介紹如何設定位置和大小，相信不少人都希望修改這礙眼的傢伙。

(k ﾟ∀ﾟ)<[position]可用left和top來設定位置，用height和width來設定高度和寬度，它們均以pixel為單位。以下是範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640] [image storage="bg2" page=fore layer=base] 我是對話框1~~

(k ﾟ∀ﾟ)<上述的對話框的位置設定距離上方320pixel，距離左方0pixel(left=0 top=320)，大小則是640x160 (height=160 width=640)。

這對話框看起來不錯，但有點單調......>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<這簡單的對話框也有部分遊戲選用的，主要都要看風格適不適合。

(k ﾟ∀ﾟ)<當然，如果認為顏色和透明度不適合的話，可以用color和opacity修改。以下是範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640 color=0x6B7CFF opacity=200] [image storage="bg2" page=fore layer=base] 我是對話框1~~

(k ﾟ∀ﾟ)<上述的範例把顏色改成藍色 (color=0x6B7CFF)，而把透明度調低(opacity=200)。Config.tjs設定原本的透明度是128。

真的是跟[image]十分相似。>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<的確是有部分相同的屬性......對了，還有一個相同的，就是visible，visible在文字圖層不時會用到。

(k ﾟ∀ﾟ)<特別是遊戲主內容以外的情況，例如我們總不會在標題畫面看到對話框吧，這時候可以用visible設定成不顯示。以下是範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640 visible=false] [image storage="bg2" page=fore layer=base] 我是對話框1~~

(k ﾟ∀ﾟ)<雖然文字圖層不被顯示，不過顯示文字的部分卻有被執行的。我們在歷史記錄(メッセージ履歴)可以看見顯示的文字。

(k ﾟ∀ﾟ)<還有除了message0外，其他文字圖層一律預設visible為false。

(k ﾟ∀ﾟ)<之後我們介紹極不常用的兩個屬性，vertical和draggable。

(k ﾟ∀ﾟ)<vertical是設定文字以直書形式顯示，預設值是false。以下是範例。

[position page=fore layer=message0 vertical=true] [image storage="bg2" page=fore layer=base] 我是文字圖層，而且是直書。

這樣的形式我從來沒有看過，真的有人用的嗎......?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<的確有的，raiL-soft的遊戲提供各種顯示形式，包括直書形式顯示，真是個很有個人風格的系統。雖然raiL-soft的遊戲內容上原本已經很有個人風格就是......另一個例子是light的タペストリー，這個亦是使用直書形式的。

(k ﾟ∀ﾟ)<下一個介紹是draggable，設定文字圖層可否被拖曳，預設值是false。話說我從未看過有人使用這個，所以我也不知這個可以能拿來幹嘛。以下是沒有圖的範例。

[position page=fore layer=message0 left=0 top=320 height=160 width=640 draggable=true] [image storage="bg2" page=fore layer=base] 我是對話框1~~

(k ﾟ∀ﾟ)<不過要留意，文字圖層的透明度不能低於64，否則不能拖曳。不過文字圖層部分是指margint, marginl, marginr, marginb 所指定的範圍，margint, marginl, marginr, marginb 留待下面介紹。

(k ﾟ∀ﾟ)<好了，下一次是......

......我有問題，一般AVG遊戲的對話框模樣明明很精緻，為什麼我們的總是單色的?>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<嗯，如果這種對話框不能滿足大家的話，大家亦可以自製對話框。

(k ﾟ∀ﾟ)<[position]中的frame屬性可以指定圖片作為文字圖層的背景。其用法與[image]差不多。frame寫上檔案名稱或路徑，透明部分可使用framekey設定透明色，用法與[image]的key一樣。

(k ﾟ∀ﾟ)<大家亦可以使用遮色片，用法同樣與[image]一樣。大家可以參考之前的教學。

(k ﾟ∀ﾟ)<不過，當frame指定了圖片後，color和opacity所設定的東西會變得無效，以下是使用遮色片的範例(包括遮色片)。

對話框:

遮色片:

範例:

[position page=fore layer=message0 left=0 top=0 frame=chat] [image storage="bg2" page=fore layer=base] 我是對話框1~~

......你覺不覺得這範例有點問題......是我眼睛太累了嗎?為什麼我看到文字跳了出來。>( ﾟωﾟ s)

(k ﾟ∀ﾟ)<不是你眼睛有問題，這是因為圖片是640x480，吉里吉里會設定文字圖層為整張圖片，並非不透明部分。吉里吉里還未聰明到可以辨識圖像。

(k ﾟ∀ﾟ)<為了解決這問題，我們可用margint, marginb, marginl, marginr 設定文字圖層真正的範圍。它們分別設定左邊界、右邊界、上邊界和下邊界與文字圖層的圖片邊界的距離，當然以pixel為單位，以下是範例。

[position page=fore layer=message0 left=0 top=0 frame=chat margint=340 marginl=70 marginr=70 marginb=40] [image storage="bg2" page=fore layer=base] 我是文字圖層，左邊界距離是70，右邊界距離是70，上邊界距離是340，下邊界距離是40。

(k ﾟ∀ﾟ)<[position]的所有屬性已經介紹完，下回介紹多個文字圖層。