[Renpy] 14. ลูกเล่นการเปลี่ยนฉาก (Pre-Defined Transitions )

nooknazha

[Renpy] 14. ลูกเล่นการเปลี่ยนฉาก (Pre-Defined Transitions )

เป็นคำสั่งลูกเล่นแบบต่างๆ ที่เราต้องการสร้างความน่าสนใจเวลาเปลี่ยนภาพตัวละคร หรือภาพพื้นฉากแต่ละภาพนะค่ะ ซึ่งโปรแกรม renpy ก็มีมาให้เลือกใช้หลายคำสั่งด้วย

1. fade ทำให้ภาพค่อยๆจางหาย
ฟังก์ชั่น Function:  Fade  (out_time, hold_time, in_time, old_widget=None, new_widget=None, color=None, widget=None):  
ตัวอย่างโค๊ด:

1. init:
   
2.     $ fade = Fade(.5, 0, .5) # Fade to black and back.
   
3. 
   
4. scene bg washington with fade

คัดลอกไปที่คลิปบอร์ด

2. dissolve ทำให้ภาพค่อยๆจางหายคล้ายกับแบบ fade
ฟังก์ชั่น Function:  Dissolve  (time, old_widget=None, new_widget=None, alpha=False):
ตัวอย่างโค๊ด:

1. init:
   
2.     $ dissolve = Dissolve(0.5)
   
3.     $ e = Character('NOOKFUFU2', color="#c8ffc8")
   
4. image dongmai_02 = "cha/dongmai_02.png"
   
5. label start:
   
6. 
   
7.     show dongmai_02 with dissolve
   
8.     e "ไง...สวัสดี!"
   
9. return

คัดลอกไปที่คลิปบอร์ด

3. pixellate ทำให้ภาพแตกเหมือนภาพแบบ Pixel
ฟังก์ชั่น Function:  Pixellate  (time, steps, old_widget=None, new_widget=None):   
ตัวอย่างโค๊ด:

1. 
   
2. init:
   
3.     $ pixellate = Pixellate(1.0, 5)
   
4.     $ e = Character('NOOKFUFU2', color="#c8ffc8")
   
5. 
   
6. image dongmai_02 = "cha/dongmai_02.png"
   
7. label start:
   
8. 
   
9.     show dongmai_02 with pixellate
   
10.     e "ไง...สวัสดี!"
    
11. return

คัดลอกไปที่คลิปบอร์ด

4. move ทำให้ภาพตัวละครเคลื่อนย้ายไปที่มุมใดมุมหนึ่ง หรือตำแนห่งใด ตำแนห่งหนึ่ง
ฟังก์ชั่น Function:  Move  (startpos, endpos, time, repeat=False, bounce=False, time_warp=None, **properties):   
ตัวอย่างโค๊ด:

1. init:
   
2.     $ move = MoveTransition(0.5)
   
3.     $ e = Character('NOOKFUFU2', color="#c8ffc8")
   
4. image dongmai_02 = "cha/dongmai_02.png"
   
5. 
   
6. label start:
   
7.     show dongmai_02 at center with move
   
8.     show dongmai_02 at right with move
   
9.     show dongmai_02 at left with move
   
10.     show dongmai_02 at Move((0.0, 0.0), (1.0, 1.0), 10.0,
    
11.                   xanchor="center", yanchor="center")
    
12.     e "ไง...สวัสดี!"
    
13. return

คัดลอกไปที่คลิปบอร์ด

5. moveinright, moveinleft, moveintop, moveinbottom
เป็นการสั่งย้ายภาพพื้นฉากหลังขนาดใหญ่ เลื่อนเข้ามาหยุดตรงมุมที่ต้องการเช่น มุมซ้าย ขวา บน ล่าง (ใช้เวลาเลื่อน 0.5 วินาที)
ตัวอย่างโค๊ด:

1. 
   
2. init:
   
3.     $ e = Character('NOOKFUFU2', color="#c8ffc8")
   
4. image dongmai_02 = "cha/dongmai_02.png"
   
5. image bg_star = "cha/bg_star.jpg"
   
6. label start:
   
7.     scene bg_star with moveinright #<---นำภาพเข้า
   
8.     show dongmai_02  
   
9.     e "ไง...สวัสดี!"
   
10. return

คัดลอกไปที่คลิปบอร์ด

6. moveoutright, moveoutleft, moveouttop, moveoutbottom
เป็นการสั่งย้ายภาพพื้นฉากหลังขนาดใหญ่ เลื่อนออกไปทางตรงมุมที่ต้องการเช่น มุมซ้าย ขวา บน ล่าง (ใช้เวลาเลื่อน 0.5 วินาที)
ตัวอย่างโค๊ด:

1. 
   
2. init:
   
3.     $ e = Character('NOOKFUFU2', color="#c8ffc8")
   
4. image dongmai_02 = "cha/dongmai_02.png"
   
5. image bg_star = "cha/bg_star.jpg"
   
6. label start:
   
7.     scene bg_star with moveinbottom
   
8.     show dongmai_02  
   
9. 
   
10.     e "ไง...สวัสดี!"
    
11. 
    
12.     hide bg_star with moveoutbottom #<-------ย้ายภาพออก
    
13. return
    
14. 
    

คัดลอกไปที่คลิปบอร์ด

7. ease, easeinright, easeinleft, easeintop, easeinbottom, easeoutright, easeoutleft, easeouttop, easeoutbottom
คล้ายกับการย้ายภาพแบบข้อ 6. แต่จะนิ่มนวลกว่า
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star
   
3.     show dongmai_02  
   
4. 
   
5.     e "ไง...สวัสดี!"
   
6. 
   
7.     hide bg_star with easeoutright
   
8. return

คัดลอกไปที่คลิปบอร์ด

8. zoomin
ใช้ซูมภาพพื้นหลังให้ขยายออกจนเต็มพอดีกับพื้นฉาก (ใช้เวลา 0.5 วินาที)
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with zoomin #<---------
   
3.     show dongmai_02  
   
4. 
   
5.     e "ไง...สวัสดี!"
   
6. 
   
7.     hide bg_star
   
8. return

คัดลอกไปที่คลิปบอร์ด

9. zoomout
ใช้ย่อภาพพื้นหลังให้หดลงเล็กลงจนหายไปจากหน้าจอ (ใช้เวลา 0.5 วินาที)
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with zoomin
   
3.     show dongmai_02  
   
4. 
   
5.     e "ไง...สวัสดี!"
   
6. 
   
7.     hide bg_star with zoomout #<---------
   
8. 
   
9.     e "ไง...สวัสดี!"
   
10. 
    
11. return
    

คัดลอกไปที่คลิปบอร์ด

10. zoominout
ใช้ซูมภาพพื้นหลังที่มีขนาดใหญ่เข้าและออก เช่น เมื่อถึงคำสั่งภาพจะขยายออกจนแสดงเต็มจอ และเมื่อคลิกเม้าส์อีกครั้งภาพจะย่อลงและหายไปจากหน้าจอ
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with zoominout #<--------
   
3.     show dongmai_02  
   
4. 
   
5.     e "ไง...สวัสดี!"
   
6. return

คัดลอกไปที่คลิปบอร์ด

11. vpunch
ทำให้ภาพเขย่าเบาๆ
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with vpunch
   
3.     show dongmai_02  with vpunch
   
4. 
   
5.     e "ไง...สวัสดี!"
   
6. return

คัดลอกไปที่คลิปบอร์ด

12. hpunch
ทำให้ภาพสั่นสะเทือนแรงๆ คล้ายแผ่นดินไหว
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with hpunch
   
3.     show dongmai_02  with hpunch
   
4. 
   
5.     e "ไง...สวัสดี!"
   
6. return
   

คัดลอกไปที่คลิปบอร์ด

13. blinds
ภาพจะค่อยๆ เปลี่ยนแบบกลับด้านเป็นแถบแนวตั้ง
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with blinds
   
3.     show dongmai_02  with blinds
   
4. 
   
5.     e "ไง...สวัสดี!"
   
6. return

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์....



14. squares
ภาพค่อยๆเปลี่ยนแบบช่องตารางสี่เลหี่ยม
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with squares
   
3. 
   
4.     e "ไง...สวัสดี!"
   
5. return

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์....


15. wiperight
ภาพพื้นหลังค่อยๆแสดงจาดซ้ายไปขวา
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with wiperight
   
3. 
   
4.     e "ไง...สวัสดี!"
   
5. return

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์....


16. wipeleft
เหมือนกับแบบข้อ 15 เพียงแต่แสดงจากขวาไปซ้าย
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with wipeleft
   
3. 
   
4.     e "ไง...สวัสดี!"
   
5. return

คัดลอกไปที่คลิปบอร์ด

17. wipeup
เหมือนกับแบบข้อ 15 เพียงแต่แสดงจากล่างขึ้นบน
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with wipeup
   
3. 
   
4.     e "ไง...สวัสดี!"
   
5. return

คัดลอกไปที่คลิปบอร์ด

18. wipedown
เหมือนกับแบบข้อ 15 เพียงแต่แสดงจากบนลงล่าง
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with wipedown
   
3. 
   
4.     e "ไง...สวัสดี!"
   
5. return

คัดลอกไปที่คลิปบอร์ด

19. slideright
ภาพค่อยๆเลื่อนจากด้านขวา ไปซ้าย
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with slideright
   
3. 
   
4.     e "ไง...สวัสดี!"
   
5. return

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์....


20. slideleft
แบบข้อ 19 เพียงแต่ภาพจะเลื่อนจากขวาไปซ้าย

21. slideup
แบบข้อ 19 เพียงแต่ภาพจะเลื่อนจากล่างขึ้นบน

22. slidedown
แบบข้อ 19 เพียงแต่ภาพจะเลื่อนจากบนลงล่าง

23. slideawayright
ย้ายภาพออกไปจากหน้าจอ จากซ้ายไปขวา

ฟังก์ชั่น Function:  CropMove  (time, mode='fromleft', startcrop=(0.0, 0.0, 0.0, #0), startpos=(0.0, 0.0), endcrop=(0.0, 0.0, #0, #0), endpos=(0.0, 0.0), topnew=True, old_widget=None, new_widget=None):  

ตัวอย่างโค๊ด:

1. init:
   
2.     $ wiperight = CropMove(1.0, "wiperight")
   
3.     $ wipeleft = CropMove(1.0, "wipeleft")
   
4.     $ wipeup = CropMove(1.0, "wipeup")
   
5.     $ wipedown = CropMove(1.0, "wipedown")
   
6. 
   
7.     $ slideright = CropMove(1.0, "slideright")
   
8.     $ slideleft = CropMove(1.0, "slideleft")
   
9.     $ slideup = CropMove(1.0, "slideup")
   
10.     $ slidedown = CropMove(1.0, "slidedown")
    
11. 
    
12.     $ slideawayright = CropMove(1.0, "slideawayright")
    
13.     $ slideawayleft = CropMove(1.0, "slideawayleft")
    
14.     $ slideawayup = CropMove(1.0, "slideawayup")
    
15.     $ slideawaydown = CropMove(1.0, "slideawaydown")
    
16. 
    
17.     $ irisout = CropMove(1.0, "irisout")
    
18.     $ irisin = CropMove(1.0, "irisin")
    
19. 
    
20. e "The CropMove transition class lets us provide a wide
    
21.                range of transition effects."
    
22. 
    
23. hide eileen with dissolve
    
24. 
    
25. e "I'll stand offscreen, so you can see some of its modes. I'll read
    
26.    out the mode name after each transition."
    
27. 
    
28. scene bg whitehouse with wiperight
    
29. 
    
30. e "We first have wiperight..."
    
31. 
    
32. scene bg washington with wipeleft
    
33. 
    
34. e "...followed by wipeleft... "   
    
35. 
    
36. scene bg whitehouse with wipeup
    
37. 
    
38. e "...wipeup..."
    
39. 
    
40. scene bg washington with wipedown
    
41. 
    
42. e "...and wipedown."
    
43. 
    
44. e "Next, the slides."
    
45. 
    
46. scene bg whitehouse with slideright
    
47. 
    
48. e "Slideright..."
    
49. 
    
50. scene bg washington with slideleft
    
51. 
    
52. e "...slideleft..."
    
53. 
    
54. scene bg whitehouse with slideup
    
55. 
    
56. e "...slideup..."
    
57. 
    
58. scene bg washington with slidedown
    
59. 
    
60. e "and slidedown."

คัดลอกไปที่คลิปบอร์ด

24. slideawayleft
เหมือนข้อ 23. เพียงแต่ย้ายจากขวาไปซ้าย

25. slideawayup
เหมือนข้อ 23. เพียงแต่ย้ายจากล่างขึ้นบน

26. slideawaydown
เหมือนข้อ 23. เพียงแต่ย้ายจากบนลงล่าง

27. irisout
ภาพแผ่กางออกจากจุดศูนย์กลาง
ฟังก์ชั่น Function:  CropMove  (time, mode='fromleft', startcrop=(0.0, 0.0, 0.0, #0), startpos=(0.0, 0.0), endcrop=(0.0, 0.0, #0, #0), endpos=(0.0, 0.0), topnew=True, old_widget=None, new_widget=None):   
ตัวอย่างโค๊ด:

1. label start:
   
2.     scene bg_star with irisout
   
3. 
   
4.     e "ไง...สวัสดี!"
   
5. 
   
6. return

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์....


28. irisin
ตรงข้ามกับข้อ 27.
ฟังก์ชั่น Function:  CropMove  (time, mode='fromleft', startcrop=(0.0, 0.0, 0.0, #0), startpos=(0.0, 0.0), endcrop=(0.0, 0.0, #0, #0), endpos=(0.0, 0.0), topnew=True, old_widget=None, new_widget=None):   

ตัวอย่างโค๊ด:

1. label start:
   
2.     scene black
   
3.     scene bg_star with irisin
   
4. 
   
5.     e "ไง...สวัสดี!"
   
6. 
   
7. return

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์....



29. ImageDissolve

ถ้าใช้คำสั่ง show ภาพจะเริ่มจากฉากสีดำค่อยๆละลายกลายเป็นภาพฉากสี ถ้าใช้คำสั่ง hide ภาพพื้นฉากจะละลายกลายเป็นสีดำ
ฟังก์ชั่น Function: ImageDissolve(image, time, reverse=False, old_widget=None, new_widget=None):

ตัวอย่างโค๊ด:

1. init:
   
2.     $ old = ImageDissolve("cha/bg_star.jpg", 1.0 ,8, reverse =True)
   
3. 
   
4. label start:
   
5. 
   
6.     show bg_star with old
   
7.     e "ไง...สวัสดี!"
   
8.     hide bg_star with old
   
9. 
   
10. return
    
11. 
    

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์....


30. Revolve
ทำให้ภาพหมุนเป็นรูปวงกลม
Function:Revolve(start, end,time, around=(0.5, 0.5), cor=(0.5, 0.5), **kwargs):
ตัวอย่างโค๊ด:

1. init:
   
2.             $ e = Character('NOOKFUFU2', color="#c8ffc8")
   
3.             
   
4.         image bg_star = "cha/bg_star.jpg"
   
5.         image magic = "cha/magic.png"
   
6.         label start:
   
7.             scene bg_star
   
8.             show magic at Position(xpos=200, ypos=150), Revolve(0, 360, 2)
   
9.             e "ไง...สวัสดี!"
   
10.             hide bg_star     
    
11.         return

คัดลอกไปที่คลิปบอร์ด

ผลลัพธ์....ภาพวงแหวนสวัสดิกะจะหมุนวน


31. MultipleTransition เป็นการนำคำสั่งหลายๆตัวมาใช้ร่วมกัน
ฟังก์ชั่น Function:  Fade  (out_time,hold_time, in_time, old_widget=None, new_widget=None, color=None,widget=None):  
ตัวอย่างโค๊ด:

1. init:
   
2.             $ teleport = MultipleTransition([False, dissolve, "#fff", dissolve, False,
   
3.                                              dissolve, "#fff", dissolve,
   
4.                                              True, dissolve, "#fff", dissolve, True]) #<------
   
5.             $ e = Character('NOOKFUFU2', color="#c8ffc8")
   
6.             
   
7.         image bg_star = "cha/bg_star.jpg"
   
8.         image magic = "cha/magic.png"
   
9.         
   
10.         label start:
    
11.             scene bg_star with teleport #<------
    
12.         
    
13.             e "ไง...สวัสดี!"
    
14.             hide bg_star with old
    
15.             
    
16.         return
    
17. 
    

คัดลอกไปที่คลิปบอร์ด

ทำให้เกิดสีกระพริบเป็นสีต่างๆรัวๆก่อนจะเปลี่ยนเข้าสู่ภาพฉากจริง
ลองนำไปประยุกต์ดูนะค่ะ  

ดูตัวเต็มของทุกคำสั่งได้ที่นี่ค่ะ http://www.renpy.org/wiki/renpy/doc/reference/Transitions

บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)