[Renpy] 59. วิธีทำ Imagemap Quick Menu

nooknazha

[Renpy] 59.วิธีทำ Imagemap Quick Menu
ในบทความนี้จะแนะนำแค่วิธีทำ Imagemap หน้า Quick Menu  เท่านั้นนะค่ะ สำหรับวิธีเปลี่ยนกรอบคำสนทนาให้ดูจากบทความนี้ค่ะ [renpy] 40. วิธีเปลี่ยนพื้นกรอบ คำสนทนา

(ภาพ Before ตอนยังไม่ได้ใส่ Map Quick Menu จะเห็นว่าด้านขวาของกรอบคำพูดมันจะโล่งๆ ไม่มีปุ่มสักปุ่ม แต่เดี๋ยวเราจะมาใส่ปุ่มกดทีหลังต่อจากนี้กันค่ะ)



ขั้นตอนที่ 1
- ให้ออกแบบปุ่ม Quick Menu ในโปรแกรม PS หรือ AI ก็ได้ค่ะ ถ้าพอจะใช้โปรแกรม AI เป็นอยู่บ้าง ก็ขอแนะนำให้ทำในโปรแกรม AI จะดีกว่าเพราะขอบกรอบ background จะคมสวย

- ให้ออกแบบเตรียมไว้ 2 ภาพค่ะ คือ 1. ภาพปุ่มแบบปกติ  และ 2. ภาพปุ่มที่จะแสดงเมื่อเลื่อนเม้าส์มาวางทับ


- เวลาบันทึกภาพ ก็ให้ปิดตาเลเยอร์ "พื้นกรอบ" ทั้งหมดไว้ "เหลือแต่ภาพปุ่ม Ground" บันทึกชื่อไว้อะไรก็ได้ค่ะ แต่สกุลจะต้องเป็น .png


- ต่อไปก็ปิดตาเลเยอร์ทุกตัวให้เหลือแต่ภาพปุ่ม hover (ภาพที่จะให้แสดงเมื่อเลื่อนเม้าส์มาวางทับ)  บันทึกชื่อไว้อะไรก็ได้ค่ะ แต่สกุลจะต้องเป็น .png เหมือนกับภาพแรก


Note: ความกว้าง*ความสูงของภาพปุ่ม และภาพกรอบคำสนทนาจะต้องมีขนาดเท่ากันทุกภาพนะคะ
ขั้นตอนที่ 2
-ให้หาพิกัดตำแหน่งที่ตั้งของปุ่มแต่ละปุ่มในโปรแกรม PS จะใช่หน้า "ground" หรือหน้า "hover" ก็ได้ สำหรับคนที่หาพิกัดตำแหน่งภาพไม่เป็น ให้ศึกษาจากบทความนี้ก่อนะค่ะ [renpy] 53. วิธีทำ Imagemap ภายในเกมส์



ขั้นตอนที่ 3
- ให้เปิดโปรแกรม renpy ขึ้นมาและเปิดไฟล์ชื่อ screen.rpy
- เลื่อนเม้าส์มาตรงล่างสุดจะเห็นชุดโค๊ดคำสั่งของหน้า Quick Menu แสดงอยู่
- ให้แดรกเม้าส์เลือกทั้งหมด (ดูภาพประกอบ) และกดปุ่ม Delete ลบทิ้งไปเลยค่ะ
- แล้วก็บันทึกไฟล์(Ctrl+S)

ขั้นตอนที่ 4
ต่อเลยนะค่ะให้เปิดไฟล์ Options.rpy ขึ้นมา และนำโค๊ดนี้ไปใส่ไว้ที่ตำแหน่งล่างสุดค่ะ
Code:

1. 
   
2. screen quick_menu:
   
3.     imagemap:
   
4.         xalign 1.0 yalign 1.0
   
5.         
   
6.         ground 'ชื่อภาพและสกุล'
   
7.         hover 'ชื่อภาพและสกุล'
   
8.         
   
9.         hotspot (716, 60, 62, 30) action Skip()
   
10.         hotspot (716, 90, 62, 28) action ShowMenu('load')
    
11.         hotspot (716, 120, 62, 29) action ShowMenu('save')
    
12.         hotspot (716, 149, 62, 29) action ShowMenu('preferences')
    
13.     # turned off by default.
    
14. init -2 python:
    
15.     config.default_afm_time = 10
    
16.     config.default_afm_enable = False
    

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

(ตัวอย่างการใส่โค๊ด)
(เปลี่ยนชื่อภาพ/ตำแหน่งที่เก็บภาพ และนำพิกัดตัวเลขที่จดไว้ มากรอกใส่ในช่องกลุ่มตัวเลขทั้ง 4 กลุ่ม ซึ่งมี 4 ชุด(บรรทัด)ด้วยกัน)


- บันทึกไฟล์และTest รันโปรแกรมดูค่ะ

(ภาพ After หลังจากใส่ Map Quick Menu เรียบร้อยแล้ว)


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