[Renpy] 60. วิธีการทำ Imagemap หน้า Save & Load

nooknazha

[Renpy] 60. วิธีการทำ Imagemap หน้า Save & Load

ขั้นตอนที่ 1 : เตรียมภาพ map - สำหรับการทำหน้า Imagemap ของ Load และ Save เราต้องใช้ทั้งหมด 10 หน้าด้วยกัน คือ หน้า Load จำนวน 5 หน้า และหน้า Save จำนวน 5 หน้า ถ้าถามไว้ทำไมต้องอย่างละ 5 หน้า และแต่ละหน้ามีไว้ทำอะไรก็ขอให้กลับไปอ่านบทความ  - [renpy]57. วิธีทำ Imagemap หน้า Preferences ก่อนค่ะจะได้เข้าใจง่ายกว่า


- ภาพนี้เป็นภาพหน้า Load Save ที่โปรแกรม Renpy สร้างให้อัตโนมัตินะค่ะ เราจะเอาหน้านี้มาใช้เป็นตัวอย่างคร่าวๆ ในการออกแบบหน้า Imagemap Load Save ของเรา



- สำหรับภาพ Imagemap Load และ Save ที่เราออกแบบทั้ง 10 หน้าไว้ จะมีให้โหลดที่ลิงค์ด้านล่างของบทความนะค่ะ เผื่อจะลองทำตาม หรือลองเอาไปเทียบตำแหน่งพิกัดในโปรแกรม Photoshop ดูว่ากลุ่มพิกัดตัวเลขแต่ละชุด กำลังแทนค่าตำแหน่งไหนในภาพ



ขั้นตอนที่ 2 : ลบโค๊ดที่ไม่จำเป็น
2.1 ให้เปิดไฟล์ screens.rpy ขึ้นมา และเลื่อนลูกกลิ้งเม้าส์ลงไปล่างๆ หาโค๊ดหน้า Save และ Load ที่โปรแกรมทำไว้ในเรา ให้แดรกเม้าส์เลือกโค๊ดทั้งหมดตามในภาพ และกดปุ่ม "Delete"  เพื่อลบทิ้งให้หมดค่ะ

2.2 จากนั้นให้บันทึกไฟล์ (กดปุ่ม Ctrl+S) และปิดไฟล์นี้ไปซะ



ขั้นตอนที่ 3 : หาพิกัด X, Y, W, H undefined
3.1 เปิดโปแกรม Photoshop ขึ้นมาและหาพิกัดตัวเลขแต่ละกลุ่ม สำหรับคนที่ยังหาพิกัดตัวเลขในการ Map ไม่เป็นนะค่ะ ให้ย้อนกลับไปดูบทความ - [renpy] 53. วิธีทำ Imagemap ภายในเกมส์ก่อน


3.2 ให้ Copy โค๊ดด้านล่างทั้งหมดไปใส่ในไฟล์ options.rpy (หรือใส่ไว้ไฟล์ screens.rpy ก็ได้ มีค่าเท่ากันค่ะ เพราะโปรแกรมจะไม่สนใจชื่อไฟล์ มันจะสนใจแต่โค๊ดคำสั่งที่อยู่ภายในนั้นอย่างเดียว)

3.3 เมื่อนำโค๊ดที่ Copy ไปวางแล้ว อย่าลืมเปลี่ยนพิกัดตัวเลข X, Y, W, H เป็นตำแหน่งใหม่ ตามภาพImagemap ที่เราออกแบไว้ด้วยนะค่ะ (สำหรับคนที่โหลดภาพ Imagemap ทั้ง 10 ภาพ ที่เราทำไว้ให้ไปลองทำตามดู ก็ยังไม่จำเป็นต้องเปลี่ยนพิกัดใหม่นะค่ะ เพราะพิกัดในโค๊ดเราใส่ให้ถูกตำแหน่งกับภาพ Map หมดแล้ว)

(อันนี้เป็นภาพตัวอย่างโค๊ด ที่แยกสีไว้ให้ดูง่ายเฉยๆค่ะ โค๊ดตัวที่ให้ Copy ไปวางได้ จะอยู่อันล่าง)


โค๊ดข้างล่างทั้งหมดนี่แหล่ะ Copy ไปวางต่อท้ายที่ไฟล์  options.rpy เลยค่ะ
Code:

1. 
   
2. #-----------------------------------------------------------------------------
   
3. #-----------------   IMAGEMAP SAVE / LOAD SCREEN  ---------------
   
4. #-----------------------------------------------------------------------------
   
5. 
   
6. screen load_save_slot:
   
7.     $ file_text = "% s\n  %s" % (FileTime(number, empty="Empty Slot."), FileSaveName(number))
   
8. 
   
9.     add FileScreenshot(number) xpos 5 ypos 15 #<---- ตำแหน่งวางภาพหน้า ScreenShot ปัจจุบันที่บันทึก
   
10.     text file_text xpos 100 ypos 11 #<---- ตำแหน่งแสดง Text ที่บันทึก
    
11.     key "save_delete" action FileDelete(number)
    
12. 
    
13. screen load:
    
14.     tag menu
    
15.    
    
16.     imagemap:
    
17.         #หน้า Load ใช้ทั้งหมด 5 ภาพ
    
18.         ground 'menu/load_ground.png'
    
19.         idle 'menu/load_idle.png'
    
20.         hover 'menu/load_hover.png'
    
21.         selected_idle 'menu/load_selected_idle.png'
    
22.         selected_hover 'menu/load_selected_hover.png'
    
23. 
    
24.         #หน้าสำหรับ Load มีทั้งหมด 5 หน้า ให้กดคลิกเพื่อเปลี่ยนไปแต่ละหน้า
    
25.         hotspot (-1, -1, -1, -1) action FilePage('auto')
    
26.         hotspot (315, 106, 92, 86) action FilePage(1) hover_sound "sound/click.wav"
    
27.         hotspot (407, 106, 92, 86) action FilePage(2) hover_sound "sound/click.wav"
    
28.         hotspot (500, 106, 92, 86) action FilePage(3) hover_sound "sound/click.wav"
    
29.         hotspot (596, 106, 92, 86) action FilePage(4) hover_sound "sound/click.wav"
    
30.         hotspot (688, 106, 92, 86) action FilePage(5) hover_sound "sound/click.wav"
    
31.         
    
32.         #แทนตำแหน่งช่องสำหรับ  Load ทั้ง 8 ช่อง
    
33.         hotspot (279, 215, 249, 81) action FileAction(0):
    
34.             use load_save_slot(number=0)
    
35.         hotspot (279, 307, 249, 81) action FileAction(1):
    
36.             use load_save_slot(number=1)
    
37.         hotspot (279, 399, 249, 81) action FileAction(2):
    
38.             use load_save_slot(number=2)
    
39.         hotspot (279, 499, 249, 81) action FileAction(3):
    
40.             use load_save_slot(number=3)
    
41.             
    
42.         hotspot (540, 215, 249, 81) action FileAction(4):
    
43.             use load_save_slot(number=4)
    
44.         hotspot (540, 307, 249, 81) action FileAction(5):
    
45.             use load_save_slot(number=5)
    
46.         hotspot (540, 399, 249, 81) action FileAction(6):
    
47.             use load_save_slot(number=6)
    
48.         hotspot (540, 499, 249, 81) action FileAction(7):
    
49.             use load_save_slot(number=7)
    
50.             
    
51.         hotspot (43, 260, 193, 50) action Return() hover_sound "sound/click.wav"
    
52.         hotspot (43, 310, 193, 50) action ShowMenu('save') hover_sound "ssound/click.wav"
    
53.         hotspot (43, 362, 193, 50) action ShowMenu('load') hover_sound "sound/click.wav"
    
54.         hotspot (43, 412, 193, 50) action ShowMenu('preferences') hover_sound "sound/click.wav"
    
55.         hotspot (43, 464, 193, 50) action MainMenu() hover_sound "sound/click.wav"
    
56.         hotspot (43, 516, 193, 50) action Quit() hover_sound "sound/click.wav"
    
57. 
    
58. screen save:
    
59.    
    
60.     tag menu
    
61.    
    
62.     imagemap:
    
63.         #หน้า Save ใช้ทั้งหมด 5 ภาพ
    
64.         ground 'menu/save_ground.png'
    
65.         idle 'menu/save_idle.png'
    
66.         hover 'menu/save_hover.png'
    
67.         selected_idle 'menu/save_selected_idle.png'
    
68.         selected_hover 'menu/save_selected_hover.png'
    
69. 
    
70.         #หน้าสำหรับ Save มีทั้งหมด 5 หน้า ให้กดคลิกเพื่อเปลี่ยนไปแต่ละหน้า
    
71.         hotspot (-1, -1, -1, -1) action FilePage('auto')
    
72.         hotspot (315, 106, 92, 86) action FilePage(1) hover_sound "sound/click.wav"
    
73.         hotspot (407, 106, 92, 86) action FilePage(2) hover_sound "sound/click.wav"
    
74.         hotspot (500, 106, 92, 86) action FilePage(3) hover_sound "sound/click.wav"
    
75.         hotspot (596, 106, 92, 86) action FilePage(4) hover_sound "sound/click.wav"
    
76.         hotspot (688, 106, 92, 86) action FilePage(5) hover_sound "sound/click.wav"
    
77.         
    
78.         #แทนตำแหน่งช่องสำหรับ Save ทั้ง 8 ช่อง
    
79.         hotspot (279, 215, 249, 81) action FileAction(0):
    
80.             use load_save_slot(number=0)
    
81.         hotspot (279, 307, 249, 81) action FileAction(1):
    
82.             use load_save_slot(number=1)
    
83.         hotspot (279, 399, 249, 81) action FileAction(2):
    
84.             use load_save_slot(number=2)
    
85.         hotspot (279, 499, 249, 81) action FileAction(3):
    
86.             use load_save_slot(number=3)
    
87.             
    
88.         hotspot (540, 215, 249, 81) action FileAction(4):
    
89.             use load_save_slot(number=4)
    
90.         hotspot (540, 307, 249, 81) action FileAction(5):
    
91.             use load_save_slot(number=5)
    
92.         hotspot (540, 399, 249, 81) action FileAction(6):
    
93.             use load_save_slot(number=6)
    
94.         hotspot (540, 499, 249, 81) action FileAction(7):
    
95.             use load_save_slot(number=7)
    
96.             
    
97.         hotspot (43, 260, 193, 50) action Return() hover_sound "sound/click.wav"
    
98.         hotspot (43, 310, 193, 50) action ShowMenu('save') hover_sound "sound/click.wav"
    
99.         hotspot (43, 362, 193, 50) action ShowMenu('load') hover_sound "sound/click.wav"
    
100.         hotspot (43, 412, 193, 50) action ShowMenu('preferences') hover_sound "sound/click.wav"
     
101.         hotspot (43, 464, 193, 50) action MainMenu() hover_sound "sound/click.wav"
     
102.         hotspot (43, 516, 193, 50) action Quit() hover_sound "sound/click.wav"
     

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

3.4 อย่าลืมลบคำสั่ง  "sound/click.wav" ออกด้วยนะค่ะ สำหรับคนที่ไม่มีไฟล์เสียงประกอบ
3.5 จากนั้นให้บันทึกไฟล์ (กดปุ่ม Ctrl+S) และปิดไฟล์นี้ไปซะ

ขั้นตอนที่ 4 : ตรวจสอบผลลัพธ์ที่ได้
- ทดสอบรันเกมส์เลยค่ะ ในภาพด้านล่างคือหน้า Load ที่ทำ Imagemap ใหม่แล้ว


- ลองเปิดหน้า Save ดูบ้าง


สำหรับหน้า Save และหน้า Load ซึ่งเรากำหนดไว้ให้มี 5 หน้าด้วยกัน ในภาพคือหน้า Save ที่ 2 ถ้าใครต้องการมากกว่านี้ก็ไปเพิ่มโค๊ดเอาเองนะค่ะ มองโค๊ดแล้วน่าจะเพิ่มเองได้ไม่ยาก
undefined



( โหลดภาพ Imagemap ที่เราทำไว้ทั้งหมด 10 ภาพตรงนี้ค่ะ )
menu.rar (1.68 MB, ดาวน์โหลดแล้ว: 422)

2019-11-30 19:44 อัปโหลด

คลิกชื่อไฟล์เพื่อดาวน์โหลด

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