แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2018-6-29 23:54
[Renpy] 55. วิธีทำ Imagemap สำหรับหน้า MainMenu
ขั้นตอนที่ 1
วิธีทำนะค่ะให้เตรียมภาพสำหรับหน้าเมนูมา 2 ภาพคือภาพปกติ
(ภาพปกติ Ground)
และภาพที่จะเปลี่ยนแปลงไปเหมือนเม้าส์เลื่อนมาวางทับ(Hover)
ขั้นตอนที่ 2
เปิดโปรแกรม Photoshop ขึ้นมาและหาพิกัดตำแหน่งโดยใช้เครื่องมือ Slice Tool ถ้าทำไม่เป็นให้ดูวิธีทำได้จากบทความนี้ค่ะ [renpy] 53. วิธีทำImagemap ภายในเกมส์
ขั้นตอนที่ 3
- เมื่อได้พิกัดแต่ละจุดมาแล้วคราวนี้ให้เปิดโปรแกรม Renpy ขึ้นมา และเปิดไฟล์ screen.rpyเลื่อนเม้าส์ลงมาเรื่อยๆเราจะพบกับโค๊ดคำสั่งที่ใช้ปรับแต่งหน้า Mainmanu ดังภาพด้านล่าง
- แล้วก็ให้คลิกเลือกโค๊ดทั้งชุดและกดปุ่ม Delete ลบทิ้งไปเลย
จากนั้นก็ให้พิมพ์โค๊ดตัวใหม่ใส่ไปแทนค่ะ(ดูด้านล่าง)
CODE:
- screen main_menu:
- tag menu
- imagemap:
- ground 'map_screen_menu.jpg' ##ชื่อภาพแบบปกติ
- hover 'map_screen_menu_hover.jpg' ##ชื่อภาพที่จะเปลี่ยนแปลงเมื่อเลื่อนเม้าส์มาวางทับ
-
- hotspot (314, 165, 251, 70) action Start()
- hotspot (314, 235, 251, 64) action ShowMenu('load')
- hotspot (314, 299, 251, 77) action ShowMenu('preferences')
- hotspot (314, 376, 251, 73) action Quit(confirm=False)
ตัวอย่างใส่โค๊ดในไฟล์ screen.rpy ....
- แต่ที่เห็นๆส่วนใหญ่เขาจะนิยมเอาโค๊ดนี้ไปแปะต่อท้ายไว้ที่ไฟล์Options.rpy มากกว่า(ใส่ไว้บรรทัดล่างสุดเลย) เพราะถ้าเราทำ Imagemapภาพจนครบทุกหน้าในเกมส์แล้ว ไฟล์ screen.rpy ที่พ่วงแถมมาให้ตอนสร้างเกมส์ก็ไม่จำเป็นต้องใช้อีก ลบทิ้งไปเลยก็ได้ (แต่ถ้ายังทำ ImageMap ไม่ครบทุกหน้า เราก็ยังจำเป็นต้องใช้มันอยู่ค่ะ ถ้าเพิ่งลบไฟล์ทิ้งนะ)
ตัวอย่างใส่โค๊ดในไฟล์ Options.rpy ....
- บันทึกไฟล์ และรันโปรแกรม
เมื่อเอาเม้าส์เลื่อนมาวางทับ ภาพ Hover ก็จะแสดงเฉพาะส่วนที่กำหนดพิกัดไว้แล้วก็สามารถคลิกเพื่อเริ่มเล่นเกมส์ หรือโหลดเกมส์ได้ตามปกติค่ะ
ขอให้สนุกกับการสร้างเกมส์นะค่ะ^^" ******************************
บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)
| 
โพสต์ 2018-6-29 23:50:48