[Renpy] 18. วิธีทำแสงแดดในเกมส์ และที่หน้า Main Menu

nooknazha

[Renpy] 18. วิธีทำแสงแดดในเกมส์ และที่หน้า Main Menu
แสงแดดที่ว่านี้ก็คือการสร้างภาพแสงแดดแต่ละภาพขึ้นมา ประมาณ 3-4 ภาพให้มีความแตกต่างกันแล้วก็สั่งให้ภาพนั้นแสดงเป็นเข้ม - จาง เล่นวนสลับกันไปเรื่อยๆ นะค่ะโดยมีการกำหนดระยะที่จะแสดง และซ่อนภาพไว้ด้วยค่ะ

ขั้นตอนที่1 (มีภาพสำเร็จให้ด้านล่างบทความ)
- แต่ก่อนที่จะมาลุยตัวโค๊ดเรามาดูวิธีการทำภาพแสงแดดกันก่อนดีกว่า โปรแกรมที่ทำแสงแดดนั้นเราสามารถทำได้ทั้งในโปรแกรม AI และ PS นะค่ะ เครื่องมือหลักที่ใช้ก็มีแค่ Gradient Tool ตัวเดียว

- สีหลักที่ใช้ทำแสงแดดก็คือ "สีขาว"หรือบางคนอาจจะให้มีสีฟ้าจางๆ หรือสีส้มจางๆ ผสมบ้างก็ได้แต่ก่อนที่จะเริ่มไล่เฉดสีแสงแดด ขอแนะนำให้กำหนดเลเยอร์ล่างสุดเป็นพื้นสีดำค่ะเพื่อที่เราจะได้มองเห็นทิศทางของแสงแดด ได้ง่ายขึ้น (เวลาจะเซฟเป็นสกุล . pngค่อย ปิดตาเลเยอร์พื้นสีดำ )



- เพื่อให้การไล่เฉดออกมาดูเหมือนแสงแดดของจริงมากที่สุดเราไม่ควรกำหนดให้ความเข้มของสีขาวมีค่าเป็น 100% เพราะเวลาที่แสดงภาพมันจะพาดทับภาพฉากและภาพตัวละครเป็นสีขาวทึบ ไม่โปรงใสเหมือนแสงแดดของจริง  เพราะฉะนั้นส่วนที่เข้มที่สุดในแสง เราควรกำหนดค่าความเข้ม (Opacity)ไว้ที่ประมาณ 30% แค่นั้นพอ


- และเพื่อให้ขอบของลำแสงดูซอฟจางหายไปกับภาพพื้นหลังเราควรกำหนดค่าความเข้ม(Opacity)ตรงบริเวณที่จางมากที่สุดให้เป็น0% ค่ะ

- ให้สร้างแสงแดด แบ่งออกมาเป็นแต่ละเลเยอร์ ใน 1 เลเยอร์อาจมีลำแสงสัก 2-3 เส้นวางไว้ในตำแหน่งที่ไม่ซ้ำที่กัน (เลเยอร์ดวงอาทิตย์ ("sun") ไว้เลเยอร์บนสุด) แล้วก็ให้ปิดตาเลเยอร์พื้นที่เป็นสีดำไปซะจากนั้นทยอยเซฟภาพทีละเลเยอร์ เท่านี้ก็เรียบร้อยแล้วค่ะสำหรับการทำภพแสดงแดด ^^

ขั้นตอนที่ 2
-  ให้นำโค๊ดด้านล่างนี้มาประยุกต์ใช้ค่ะเราสามารถกำหนดระยะเวลาในการแสดงภาพ และระยเวลาในภาพซ่อนภาพได้ที่ตัวเลขหลังคำสั่ง "linear" (หน่วยเวลาเป็น 1.0 วินาที)

- คำสั่ง "alpha" คือคำสั่งสำหรับให้กำหนดความเข้ม-จางในการแสดงภาพโดยกำหนดได้ตั้งแต่ 0.0 - 1.0 ค่ะ ถ้ากำหนดเป็น 0.0 หมายถึงภาพจะหายไปทั้งหมด (ความเข้มภาพ = 0% )และถ้ากำหนดเป็น1.0 จะหมายถึงให้แสดงภาพเต็มที่ (ความเข้มภาพ = 100%)

- คำสั่ง"repeat" คือคำสั่งสำหรับให้เล่นวนซ้ำไปเรื่อยๆ

1. transform light1:
   
2.     alpha 0.0
   
3.     linear 3.0 alpha 1.0
   
4.     linear 7.0 alpha 0.0
   
5.     repeat
   

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

ตัวอย่างการนำโค๊ดมาใช้ ในไฟล์ "script.rpy" :--- สร้างโค๊ดสำหรับกำหนดการแสดงลำแสงออกเป็น3 แบบด้วยกันตามจำนวนภาพแสงแดดที่เราสร้างไว้

1. 
   
2. 
   
3. #-----------------------------[ Character ]--------------------------------
   
4. init:
   
5.     $ v = Character("วิชชา", color="#00ff2a")
   
6.    
   
7. #-----------------------[ Image Light Sun ]--------------------------------
   
8. 
   
9.     image sun = "cha/sun.png"
   
10.     image light_1 = "cha/light_01.png"
    
11.     image light_2 = "cha/light_02.png"
    
12.     image light_3 = "cha/light_03.png"
    
13.    
    
14. #--------------------------[Image  Character ]------------------------------
    
15.     image viccha_02 = "cha/viccha_02.png"
    
16.    
    
17. #--------------------------[ Time Light Sun]------------------------------
    
18.     transform light1:
    
19.         alpha 0.0
    
20.         linear 3.0 alpha 1.0
    
21.         linear 7.0 alpha 0.0
    
22.         repeat
    
23.             
    
24.     transform light2:
    
25.         alpha 1.0
    
26.         linear 7.0 alpha 0.0
    
27.         linear 3.0 alpha 1.0
    
28.         repeat
    
29.             
    
30.     transform light3:
    
31.         alpha 0.0
    
32.         linear 15.0 alpha 0.0 #<----0.0 คือไม่แสดงภาพ/ 1.0 คือให้แสดงภาพ
    
33.         linear 15.0 alpha 1.0 #<----- linear ใช้กำหนดระยะเวลาแสดงภาพและซ่อนภาพต่อวินาที)
    
34.         repeat
    
35. #---------------------------------[ Intro Start ]-----------------------------------------
    
36. label start:
    
37.     scene black
    
38.     show viccha_02
    
39.    
    
40.     show sun
    
41.     show light_1 at light1
    
42.     show light_2 at light2
    
43.     show light_3 at light3
    
44.    
    
45.     v "สวัสดีครับ....^^ "
    
46. return

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

(ตัวอย่าง.......... )


- บันทึกไฟล์และลองรันโปรแกรมดูผลลัพธ์.....แสงแดดจะเล่นวนสลับกันไปเรื่อยๆ ถ้าเห็นว่ามัน วิว-วับๆๆเร็วเกินไปก็ปรับเวลาใหม่ให้ช้าลงกว่านี้ก็ได้

----------------------------------------------------------------

วิธีใส่ภาพแสดงแดดไว้ที่หน้าMain Menu
แล้วในกรณีที่เราอยากให้ภาพแสงแดดนี้มาแสดงที่หน้าMain Menu ด้วย ก็ทำได้ไม่ยากค่ะ แค่ใช้คำสั่ง "add" เพิ่มเข้าไปที่หน้าโค๊ดของ Main Menu เหมือนกับที่เคยอธิบายไว้ที่บทความตามลิงค์ข้างบน

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

1. add "sun"
   
2.     add "light_1" at light1
   
3.     add "light_2" at light2
   
4.     add "light_3" at light3
   

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

(ตัวอย่าง...... วิธีแทรกโค๊ดคำสั่ง "add" เพิ่มภาพแสงแดดไว้ที่หน้า Main Menu)

- บันทึกไฟล์และลองรันโปรแกรมดูค่ะ .........  จะเห็นว่ามีแสงแดดมาแสดงที่หน้า Main Menu ด้วย

*** ด้านล่างนี้เป็นภาพแสงแดด สำหรับใครที่ยังไม่ได้ทำไว้นะค่ะ(กดโหลดไปได้เลย) ที่เห็นเป็นสีขาวโล่งๆ เพราะแสงมันเป็นสีขาวจางๆเลยดูกลืนไปกับสีพื้นหลังเว็บบอร์ด









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