[Renpy] 56. วิธีแทรกหน้า Bonus ไว้ที่ Main Menu แบบ Imagemap

nooknazha

[Renpy] 56. วิธีแทรกหน้า Bonus ไว้ที่ MainMenu แบบ Imagemap

พูดง่ายๆก็คือ เป็นการเพิ่มลูกเล่นพิเศษให้กับผู้เล่นโดยในการเล่นครั้งแรกผู้เล่นจะเห็นหน้าเกมส์เป็นแบบปกติค่ะแต่เมื่อผู้เล่นเล่นจบจน หรือเล่นจนสามารถเคลียร์เกมส์ได้แล้ว และกลับมาที่หน้าเมนูอีกครั้งหน้าหลักของเกมส์จะมีเมนูพิเศษแสดงให้เห็น

หน้าพิเศษมีไว้ทำอะไร?
แล้วแต่เราจะกำหนดค่ะ เช่น
1. เป็นหน้ารวมภาพ CG แกลอลรี่ลับ
2. เป็นหน้ารวมภาพฉากประทับใจที่ผู้เล่นทำถูกต้องตามเงื่อนไข
3. ข้อมูลลับของตัวละครในเกมส์ เช่น วันเดือนปีเกิด ส่วนสูงอาหารหรือสิ่งของที่ชอบ
4. ฟังเสียงพากษ์ตัวละคร
5. ฟังเสียงเพลงประกอบเกมส์
6. ดูภาพมูวี่เกมส์(อนิเมชั่น)  
7. บทสนทนาพิเศษระหว่างตัวละครที่ไม่มีอยู่ในเนื้อเรื่องหลัก
8. ฯลฯ


โค๊ดที่จำเป็นต้องใช้
-ที่ไฟล์ Options.rpy ให้ใส่โค๊ดลงไปดังนี้เค่ะ

Code:

1. 
   
2. screen main_menu:
   
3.     tag menu
   
4.     if not persistent.extra_unlocked: #หาก persistent.extra_unlocked: เป็นเท็จ(=False) ให้ทำตามเงื่อนไขดังนี้
   
5.         imagemap:
   
6.             ground 'menu/main_menu_first.jpg'
   
7.             hover  'menu/main_menu_first_hover.jpg'
   
8.         
   
9.             hotspot (314, 165, 251, 70) action Start() hover_sound "sound/click.wav"
   
10.             hotspot (314, 235, 251, 64) action ShowMenu('load') hover_sound "sound/click.wav"
    
11.             hotspot (314, 299, 251, 77) action ShowMenu('preferences') hover_sound "sound/click.wav"
    
12.             hotspot (314, 376, 251, 73) action Quit(confirm=False) hover_sound "sound/click.wav"
    
13. 
    
14.     else: #ถ้า persistent.extra_unlocked: เป็นจริง(=True) ให้ทำตามเงื่อนไขดังนี้
    
15.         imagemap:
    
16.             ground 'menu/main_manu_special.jpg'
    
17.             hover 'menu/main_manu_special_hover.jpg'
    
18. 
    
19.             hotspot (314, 155, 251, 66) action Start() hover_sound "sound/click.wav"
    
20.             hotspot (314, 221, 251, 62) action ShowMenu('load') hover_sound "sound/click.wav"
    
21.             hotspot (314, 283, 251, 72) action Start('special') hover_sound "sound/click.wav"
    
22.             hotspot (314, 355, 251, 75) action ShowMenu('preferences') hover_sound "sound/click.wav"
    
23.             hotspot (314, 430, 251, 67) action Quit(confirm=False) hover_sound "sound/click.wav"
    
24. 
    

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

อธิบายโค๊ด
....โค๊ดด้านล่างคือหน้าพิเศษที่เราสร้างเพิ่มขึ้นมา เมื่อทำการคลิกเข้าที่เมนูนี้โปรแกรมจะวิ่งไปที่ label ชื่อ special: ในไฟล์ script.rpy ทันที

1. 
   
2. hotspot (314, 283, 251, 72) action Start('special') hover_sound "sound/click.wav"
   
3. 
   

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

.....โค๊ดด้านล่างอีกตัวคือคำสั่งสำหรับให้เปิด "เสียงเฟคเอฟประกอบ" เวลาที่เรา"เลื่อนเม้าส์ผ่านปุ่มเมนูแต่ละปุ่ม"ค่ะ

1. 
   
2. hover_sound "sound/click.wav"
   

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

และที่ไฟล์ script.rpy ให้เราใส่สคริปว่า

1. 
   
2. $ persistent.extra_unlocked = True
   

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

ตำแหน่งท้ายสุดของเกมส์(จบเกมส์) เพื่อกำหนดให้ตัวแปรชื่อ "persistent.extra_unlocked" มีค่าเป็น"True"

และต่อจากนั้นก็ให้สร้าง label ชื่อ specialขึ้นมา ในส่วนของ label special นี้เราจะทำเป็นหน้าเมนูพิเศษ(Imagemap)  หรือจะทำเป็นบทสนทนาพิเศษโต้ตอบกันระหว่างตัวละครซึ่งไม่มีในเนื้อเรื่องหลักก็ได้เช่นกันค่ะ

ตัวอย่างการใส่โค๊ดที่ไฟล์ script.rpy
Code:

1. 
   
2. label start:
   
3. 
   
4.     scene p7
   
5.     show m with dissolve
   
6.     p "สวัสดีชาวไทยกราฟทุกท่าน ฉันชื่อ "ปกิณกะ" ยินดีที่ได้รู้จักค่ะ!"
   
7.     "...ดำเนินเนื้อเรื่องเกมส์ไปตามปกติ......."
   
8.     "....................จบเกมส์แล้วจ๊ะ..............."
   
9.     $ persistent.extra_unlocked = True #สั่งให้ persistent.extra_unlocked = True (เป็นจริง)
   
10.                                                              #ใส่โค๊ดนี้ไว้ที่บรรทัดสุดท้าย
    
11.                                                              #ต่อจากบทสนทนาสุดท้ายของเกมส์(ก่อนจบเกมส์)
    
12.     return
    
13. 
    

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

.........................................................................

ดูแต่โค๊ดอย่างเดียวน้องๆอาจจะยังงงๆ งั้นมาดูวิธีทำกันดีกว่าค่ะ
วิธีทำ
ขั้นตอนที่1 หลักๆเราจะต้องเตรียมภาพสำหรับทำหน้าMain Menu ไว้ 4 ภาพค่ะ  คือ
1. หน้าเมนูหลัก(ground)


2. หน้าเมนูหลัก จะเปลี่ยนแปลงเมื่อมีเม้าส์เลื่อนมาวางทับบนเมนู(hover)

3. หน้าเมนูหลักพิเศษปกติ(ground)


4. หน้าเมนูหลักพิเศษจะเปลี่ยนแปลงเมื่อมีเม้าส์เลื่อนมาวางทับบนเมนู (hover)


ภาพที่ 5 เป็นภาพที่ออกไว้เป็นหน้าพืเศษ เมื่อผู้เล่นทำการคลิกเมนู "special"ก็จะเจอกับหน้า Imagemap หน้านี้ค่ะ(หรือจะไม่ทำก็ได้เช่นเมื่อคลิกเข้ามาก็จะพบกับบทสทนาพิเศษโต้ตอบกันระหว่างตัวละครแทน)

ขั้นตอนที่ 2 เมื่อภาพพร้อมแล้ว เราจะต้องหาพิกัดแต่ละตำแหน่งของ Imagemap ทั้งหน้าเมนูแบบปกติ และหน้าเมนูแบบพิเศษค่ะ
(หากยังหาพิกัดภาพไม่เป็นให้ศึกษาจากบทความนี้ก่อนค่ะ [renpy] 53. วิธีทำImagemap ภายในเกมส์)


ขั้นตอนที่ 3
เปิดไฟล์ screen.rpy ดูประมาณบรรทัดที่170-200เราจะเจอโค๊ดเมนูหลักที่โปรแกรมสร้างมาให้ ให้แดรกเม้าส์เลือกโค๊ดทั้งชุดและกดปุ่มDelete ลบทิ้งไปเลยค่ะ(ไม่งั้นมันจะไปกวนกับโค๊ดหน้าเมนูหลักที่เราจะใส่ลงไป)

ขั้นตอนที่ 4
เปิดไฟล์ options.rpy ให้นำโค๊ดหน้าmainmenu ที่เราทำเป็น Imagemap ไว้มาใส่ไว้ที่บรรทัดล่างสุดค่ะ


ขั้นตอนที่ 5
เปิดไฟล์ script.rpy ใส่โค๊ด$ persistent.extra_unlocked = True เพิ่มลงไปที่ตำแหน่งก่อนจบเกมส์และสร้างหน้า label special เตรียมไว้


ขั้นตอนที่ 6
- บันทึกไฟล์ทั้งหมดและรันเกมส์ค่ะ
- เมื่อเข้าเกมส์ครั้งแรกหรือถ้าผู้เล่นยังเล่นเกมส์ไม่จบจริง หน้าเมนูหลักจะแสดงเป็นหน้าปกติตามตัวอย่างข้างล่างค่ะ

- เราจะต้องเล่นเกมส์ให้จบก่อน

- เมื่อเราเล่นเกมส์จนเคลียร์เกมส์จบแล้วโปรแกรมจะวิ่งกลับไปที่หน้าเมูหลักอีกครั้ง และจะแสดงหน้าเมนูพิเศษขึ้นมา(ดูภาพด้านล่างประกอบ)


- แล้วเมื่อผู้เล่นคลิกเลือกที่เมนู "Special"โปรแกรมก็จะวิ่งไปที่ไฟล์ script.rpy ตรง labelชื่อ special ค่ะ
- และภายใน labelspecial: ข้าพเจ้าได้ใส่โค๊ดคำสั่งไว้ว่า call screenexample_imagemap ซึ่งเป็นการสั่งให้โปรแกรมแสดงหน้า Imagemap ชื่อ "example_imagemap" ขึ้นมา ผลลัพธ์ก็จะออกมาเป็นดังภาพด้านล่างค่ะ


สามารถดูต่อความเนื่องได้ที่นี่ค่ะ [renpy] 25. วิธีทำCG Gallery แบบ Imagemap

ขอให้สนุกกับการสร้างเกมส์นะค่ะ^^"

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