|
|
แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2019-11-30 19:33
[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:
- screen quick_menu:
- imagemap:
- xalign 1.0 yalign 1.0
-
- ground 'ชื่อภาพและสกุล'
- hover 'ชื่อภาพและสกุล'
-
- hotspot (716, 60, 62, 30) action Skip()
- hotspot (716, 90, 62, 28) action ShowMenu('load')
- hotspot (716, 120, 62, 29) action ShowMenu('save')
- hotspot (716, 149, 62, 29) action ShowMenu('preferences')
- # turned off by default.
- init -2 python:
- config.default_afm_time = 10
- config.default_afm_enable = False
(ตัวอย่างการใส่โค๊ด)
(เปลี่ยนชื่อภาพ/ตำแหน่งที่เก็บภาพ และนำพิกัดตัวเลขที่จดไว้ มากรอกใส่ในช่องกลุ่มตัวเลขทั้ง 4 กลุ่ม ซึ่งมี 4 ชุด(บรรทัด)ด้วยกัน)
- บันทึกไฟล์และTest รันโปรแกรมดูค่ะ
(ภาพ After หลังจากใส่ Map Quick Menu เรียบร้อยแล้ว)
******************************
บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)
|
|
โพสต์ 2019-11-30 19:15:22