2011年6月22日星期三

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]的所有屬性已經介紹完,下回介紹多個文字圖層。

21 則留言:

  1. [position page=fore layer=message0 left=0 top=320 height=160 width=640 frame=chat visible=false]
    [image storage="bg1" page=fore layer=base]
    [image storage="fg2" left=100 top=100 visible=false layer=1 page=back]
    [trans method=wave wavetype=2 time=2000
    話説,我把這個放到内容中間辦不到。
    我把上面那句寫了但還是會看到文字圖層(沒加Wave前倒是消失了)

    在中間的時候要把它消失一會兒該寫什麽?

    回覆刪除
  2. 對不起,我不太理解您的問題,
    請問可以再說詳細一點嗎?

    回覆刪除
  3. 也就是說呢,我想把人物和文字圖層利用wave消失。
    然後就利用上面那句,結果使人物成功wave消失,但文字圖層卻保留着

    但如果不用wave的話,雙方都成功消失。

    回覆刪除
  4. [trans]的功能是把後頁面的內容轉移到前頁面,
    這意味著後頁面的內容是切換後的樣子,
    如果想利用wave的效果把人物和文字圖層消失,
    那麼只要先把前頁面的內容複製到後頁面,
    再把人物和文字圖層設定為不顯示,
    這樣的話用[trans]切換之後,
    人物和文字圖層就會消失了。
    以下是例子。

    [loadplugin module="extrans.dll"]
    [position page=fore layer=message0 left=0 top=320 height=160 width=640 visible=true]
    [image storage="bg1" page=fore layer=base]
    [image storage="fg1" page=fore layer=1 pos=center visible=true]
    圖層切換之前[p][cm]
    [backlay]
    [layopt page=back layer=message0 visible=false]
    [layopt page=back layer=1 visible=false]
    [trans method=wave wavetype=2 time=2000]

    回覆刪除
  5. 原來如此,謝謝了!

    回覆刪除
  6. [position page=fore layer=message0 left=0 top=0 frame=chat margint=340 marginl=70 marginr=70 marginb=40]
    話説可以在上面那段句子加"sysbutton"麽?而且還要有方向的。
    可以的話應該加在那裏?還是要分開加呢?

    回覆刪除
  7. [sysbutton]的用法基本上跟[button]一樣,
    可以用[locate]來調整系統按鈕的位置。
    詳細可以參考http://kibitz2550.blogspot.com/2011/08/kag-2.html

    回覆刪除
    回覆
    1. 聽説Sysbutton要自己定義,不然會顯示“sysbutton不存在”,該怎麽定義呢?

      刪除
    2. [sysbutton]是KAG-EX所增加的tag,
      如果您不是用KAG-EX版本的話,
      正常來說不會有[sysbutton]這個tag。

      刪除
    3. 果然……OTL

      刪除
    4. 一旦按了button,button就會消失並且執行button的命令。
      那麽,有沒有代碼是:
      一旦按了button,執行了命令后button又會恢復……總之就像Sysbutton一樣的,TJS我不行=_=

      刪除
    5. 其實[button]並不是因按了而消失,
      而是因為[cm]等消除了文字圖層令[button]消失,
      其中一個可行的方法是把[button]放在另一個文字圖層,
      再利用[er]取代[cm]來消除文字圖層的內容,
      那麼放了[button]的文字圖層就不會消失。

      刪除
  8. [position page=fore layer=message0 left=0 top=0 frame=chat margint=340 marginl=70 marginr=70 marginb=40]
    [image storage="XX" page=fore layer=base]
    只要輸入這幾行程式碼之後後面在打上字字就會在那框框範圍裏面嗎?

    回覆刪除
    回覆
    1. 實際上還要因應您的情況做一些微調整,
      frame指定您的對話框圖片,
      left, top設定對話框圖片的位置,
      margint, marginb, marginl, marginr調整文字顯示的範圍等等。

      刪除
    2. 所以只要知道我得對話框的邊界多少之後打上字字就會顯示在那個範圍裡面~不用像之前的教學需要設定座標?

      刪除
    3. 其實兩種方法都可以做到同樣的效果,
      請不要被對話框圖片騙到,
      雖然對話框好像是下方,
      其實跟遮掩了大半個畫面的文字圖層一樣,
      只不過這文字圖層的背景改變了,
      我們是可以使用height, width去調整文字顯示的範圍,
      不過由於不想弄得太複雜,
      所以在範例裡只用了margint, marginb, marginl, marginr調整文字顯示的範圍。

      刪除
  9. 請問一下,我不確定是不是 KRKR 版本的關係 (我用 2.32)
    我試著用自製的對話框,不過總會出現不明就裡的白邊
    而且半透明的部分顏色很奇怪
    我也試了範例給的對話框,白邊依然存在
    不過相同的語法、圖片搬到 2.20 卻可以用 (汗
    我想用 2.32 啊...
    詳細見這邊 https://docs.google.com/document/d/1wIqaBOShBiL5MdeKHpPIpDGiymTV5FazQopFw1W6sng/edit

    感謝你提供這麼好的教學
    正在努力吸收中

    回覆刪除
    回覆
    1. 這是由於所使用的圖片並不是ltAddAlpha格式,
      基本上有兩種方式去解決,
      一是將Config.tjs裡的layerType設定為ltAlpha,
      二是利用在tools資料夾裡的krkrtpc.exe去轉換成ltAddAlpha格式。

      刪除
    2. 成功了(歡呼) 感謝!
      回去看了一下 2.20 的 Config.tjs
      想說它是不是直接改成 layerType = ltAlpha 了
      結果發現並沒有 layerType 這一行,所以預設可能就是 ItAlpha 吧?
      如此一來,為什麼舊版可以,新版不行的疑惑也消失了

      刪除
    3. ltAddAlpha是較新的版本才有的設定,
      據說處理速度比較快,但缺點是圖片要特別處理,
      而ltAlpha則是一開始的版本就已經有,
      所以舊版預設是ItAlpha,新版則可以選ltAlpha或ltAddAlpha。

      刪除
  10. 請問
    我做的對話框沒辦法消白邊耶
    我有照你立繪的教學做
    奇怪的是放在前景的話 可以順利消白邊
    放在 position 又不行了

    回覆刪除