2011年9月18日星期日

KAG教學---圖層移動,move

(建議在閱讀本篇教學之前,請先閱讀KAG教學---不要再製造不思議事件,顯示前景(2)KAG教學---美化這黑色的東西,文字圖層(1)KAG教學---萬能的功能,layopt)

吉里吉里有沒有功能可以令遊戲更加動態?>( ゚ω゚ s)

(k ゚∀゚)<更加動態?你想要怎樣的動態?

例如現在的遊戲有時有些立繪移動效果,或許是立繪淡入淡出的效果等。>( ゚ω゚ s)

吉里吉里有沒有辦法做到這些效果?>( ゚ω゚ s)

(k ゚∀゚)<那麼[move]一定可以滿足你,[move]的功能是移動圖層,包括文字圖層和前景圖層,是個十分好玩的功能,可以用到很多不錯的效果,看看以下的範例。

[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 left=-30 top=-42 visible=true]
移動開始[p][cm]
移動中
[move layer=0 page=fore time=1500 path="(300,-42,255) (150,-42,255)"]
[wm canskip=false]
[p][cm]
移動結束































(k ゚∀゚)<[move]必須使用layer指定想移動的圖層,由於可選擇文字圖層和前景圖層,layer可寫上0或以上的數值來指定前景圖層,或者是message0、message1等來指定文字圖層,同時大家亦可用page設定前頁面(表ページ)或後頁面 (裏ページ),預設值是fore,即是前頁面。

(k ゚∀゚)<還有,我們必須加上time屬性來設定移動所需的時間,並以微秒(ms)為單位。

等一下,我總覺得有點怪,上述的範例中明明time的數值是1500,不過執行時好像用多過1.5秒。>( ゚ω゚ s)

(k ゚∀゚)<原因是time設定所謂的移動所需的時間,是指定圖層移動到下一個位置所需的時間,上述的範例設定了兩個位置,所以實際所需的時間是3秒。

(k ゚∀゚)<path是設定圖層的移動路徑,我們要寫上移動經過的位置,但不包括起點,每個位置都以(x,y,opacity)的格式來設定,除了座標位置之外,我們還可以設定透明度變化。

(k ゚∀゚)<上述的範例中前景圖層一開始時座標位置為(-30,-42),透明度為255,即是不透明,當[move]執行時,圖層將以常速移動到(300,-42),透明度仍然是255,然後圖層會再以常速移動到(150,-42),透明度不變。

(k ゚∀゚)<不過要留意一下,文字圖層一開始時的透明度必須用[layopt]來設定,不能用[position]的opacity來設定。還有,由於我們是用time來設定移動所需的時間,移動速度會隨著移動距離而有快慢的分別。

話說[move]下面的那個[wm]用來幹嘛?>( ゚ω゚ s)

(k ゚∀゚)<[wm]是等待[move]結束,等待到[move]結束後,才繼續執行下去,[wm]還有一個屬性canskip,可以設定[move]的效果可否因點擊滑鼠而略過,若果是true,當玩家點擊滑鼠時,[wm]會直接把[move]結束,直接顯示移動後的模樣,不會等待[move]結束。反之若果是false,玩家必須等待[move]結束才繼續。

(k ゚∀゚)<如果想直接停止[move],可用[stopmove]停止它,不過[stopmove]平常不太常用。

可以同時執行多個圖層的移動嗎?>( ゚ω゚ s)

(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 left=-30 top=-42 visible=true opacity=0]
[image storage="fg1" page=fore layer=1 left=300 top=-42 visible=true opacity=0]
移動開始[p][cm]
移動中
[move layer=0 page=fore time=1500 path="(300,-42,255)"]
[move layer=1 page=fore time=3000 path="(-30,-42,255)"]
[wm canskip=false]
[wm canskip=false]
[p][cm]
移動結束






























(k ゚∀゚)<在上述的範例中,我們先設定好兩個前景圖層,透明度皆是0,即是完全透明,然後下面兩個[move]會同時執行,但要留意一下,由於兩個[move]移動所需的時間不同,而[wm]只會等待其中一個[move]結束,當某一個[move]結束,[wm]就會讓遊戲繼續執行下去,不會等待另一個[move],所以必須要加上兩個[wm]。

我想兩個[move]不同時間開始,但同時結束,吉里吉里有沒有辦法用到?>( ゚ω゚ s)

(k ゚∀゚)<[move]有個delay屬性,可設定延遲時間,並以微秒(ms)為單位。看看以下的範例。

[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 left=-30 top=-42 visible=true opacity=0]
[image storage="fg1" page=fore layer=1 left=300 top=-42 visible=true opacity=0]
移動開始[p][cm]
移動中
[move layer=0 page=fore time=1500 delay=1500 path="(300,-42,255)"]
[move layer=1 page=fore time=3000 path="(-30,-42,255)"]
[wm canskip=false]
[wm canskip=false]
[p][cm]
移動結束

(k ゚∀゚)<在上述的範例中,原本這個[move]只要花費了1.5秒,不過我們加上delay屬性,把它延遲1.5秒開始,結果[move]花了3秒才結束。

移動可不可以多點變化,這樣直線常速的移動有點乏味。>( ゚ω゚ s)

(k ゚∀゚)<如果不喜歡常速移動,可以用accel屬性設定加速度,數值可寫上-1以下、1以上或0等實數數值,當數值小於-1,移動會減速,並由快至慢地移動,相反地若果數值大於1,移動就會加速,並由慢至快地移動,當數值是0的話,移動就是常速。

(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 left=-30 top=-42 visible=true]
移動開始[p][cm]
移動中
[move layer=0 page=fore time=1500 accel=3 path=" (165,0,255) (300,-42,255) (165,0,255) (-30,-42,255)"]
[wm canskip=false]
[p][cm]
移動結束

(k ゚∀゚)<至於不想直線移動的話,可以用spline來設定成曲線移動,當spline的數值為true,吉里吉里會用指定位置製作貝茲曲線,圖層便會用這曲線作為移動路徑,而spline的預設值是false,不過使用時要注意path指定位置的數目最少有2個,以下是範例。

[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 left=-30 top=-42 visible=true]
移動開始[p][cm]
移動中
[move layer=0 page=fore time=500 spline=true path=" (165,30,255) (300,-42,255) (165,30,255) (-30,-42,255)"]
[wm canskip=false]
[p][cm]
移動結束

看來這個[move]真的很好玩>( ゚ω゚ s)

(k ゚∀゚)<[move]在基本的特效方面十分有用,可以製作出更加動態的遊戲。

(k ゚∀゚)<今次介紹到這裡,下次再見。

5 則留言:

  1. 抱歉,正做遊戲所以問題會多。
    [image layer=0 page=back visible=true storage="copyright" left=300 top=450 opacity=0]
    [trans method=crossfade time=1500]
    [wt]
    [move layer=0 path=(300,550,255) time=3000]
    [wm canskip=false]

    [image layer=1 page=back visible=true storage="tcm" left=300 top=450 opacity=0]
    [trans method=crossfade time=1500]
    [wt]
    [move layer=1 path=(300,450,255) time=3000]
    [wm canskip=false]
    我想問一下,只要layer2出現layer1就會消失。
    該如何避免呢?
    還有,有沒有代碼是把一張圖慢慢縮小/大呢

    恩還有關於cond的,[wm canskip=true cond="tf.flag=1"]我是要如果flag是1,才能跳過
    不過貌似不行,是否我放錯位子呢?

    回覆刪除
  2. ......先解決第一個問題吧,
    [trans]的功能是把後頁面的內容轉移到前頁面,
    這意味著後頁面的內容是切換後的樣子,
    所以使用時必須清楚後頁面的狀態,
    首先看看開頭那三句,
    我們用[image]來把copyright這張圖像放置於後頁面(page=back),
    而且把它設定完全透明(opacity=0),
    之後用[trans]來把後頁面的內容切換到前頁面,
    我們可以想像一下到底切換後的模樣是怎樣,
    這個完全透明的圖像會花了1.5秒來切換出來,
    所以基本上那個切換是不必要的,
    至於為何layer 1出現時layer 0會消失,
    跟上述問題十分相似,
    我們用[image]來把tcm這張圖像放置於後頁面(page=back),
    到底後頁面有什麼東西?
    除了這個完全透明的tcm之外,還有之前的完全透明的copyright圖像,
    所以切換後copyright會變成完全透明。

    如果您是使用KAG-EX的話,
    可以嘗試使用[action],
    [action]做到的動態效果其實遠超過[move],
    基本上可以輕易地做到慢慢縮小/放大的效果,
    用法可以看看以下的例子。
    [action layer=1 time=3000 module=LayerNormalZoomModule zoom=150]

    最後是cond的問題,留意兩個等於符號(==)才是比較運算子,tf.flag=1是把數值指定給tf.flag。

    回覆刪除
    回覆
    1. -我寫的是kirikiri的說,那如果要重寫去KAG的話,可以直接複製麽

      -[wm canskip=false cond="sf.Item<10"] (抱歉我寫的是這樣)不過我也試了 [wm canskip=true cond="sf.Item==1"](一開始的變數是1),也是不能跳過。
      我寫的eval是這樣的
      [eval exp="f.Mio=1"]
      [eval exp="sf.Item=1"]
      是不能兩個一起所以導致 跳過無用了麽?

      -然後關於第一題,其實我不是很明白。
      但是我在copyright的句子后加入了[image storage="copyright" left=300 top=550 opacity=225 layer=0 page=back] 就行了,不過這其實很浪費記憶体的吧?

      刪除
    2. 抱歉,關於canskip的問題我解決了,原來我已經放了[clickskip enabled=false]

      刪除
    3. 關於第一題問題,
      簡單來說,就是我們不必用到後頁面,
      看看以下的例子,
      [image layer=0 page=fore visible=true storage="copyright" left=300 top=450 opacity=0]
      [image layer=1 page=fore visible=true storage="tcm" left=300 top=450 opacity=0]
      [move layer=0 path=(300,550,255) time=3000]
      [wm canskip=false]
      [move layer=1 path=(300,450,255) time=3000]
      [wm canskip=false]
      上述的例子中我們在前頁面裡設定了兩張圖像都是透明,
      以後利用[move]來移動和顯示這兩張圖像。

      刪除