[Renpy] 54. วิธีการทำImagemap ภายใน Label

nooknazha

(ยืมภาพเกมส์โปรดมาใส่ ขี้เกียจวาดเอง หุหุ )

[Renpy] 54. วิธีการทำImagemap ภายใน Label
จากบทความก่อนๆที่ผ่านมาทั้งหมดข้าพเจ้าจะแนะนำเฉพาะวิธีทำ Imagemap ในหน้า screen ต่างๆนะค่ะ แต่ในบทความนี้เราจะมาเรียนรู้วิธี Imagemap ภายใน label ย่อยๆต่างๆกันบ้างค่ะ

การทำ Imagemap ภายใน Label นั้นจะมีวิธีการเขียนโค๊ดแตกต่างกัน และวิธีในการหาพิกัดตำแหน่งแกน Xและ Y ของภาพก็จะต่างกันออกไปด้วยเรามาดูกันค่ะ  ว่ามันทำยังไง ^^

ขั้นตอนที่1
ให้เตรียมภาพที่จะนำมาทำImagemap จำนวน 2ภาพด้วยกัน คือ

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


ขั้นตอนที่ 2
- ให้นำโค๊ดด้านล่างนี้ไปวางแทรกในlabel ที่ต้องการค่ะ

1. 
   
2.     $ result = renpy.imagemap("cha/bg_select_cha.jpg", "cha/bg_select_cha_hover.jpg", [
   
3.                            (0, 0, 0, 0, "man"),
   
4.                            (0, 0, 0, 0, "women")
   
5.                           ])
   
6.     if result == "man":
   
7.         jump select_man
   
8.     elif result == "women":
   
9.        jump select_women
   

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

*** ที่ตัวเลขทั้ง 4 กลุ่มของแต่ละบรรทัดในโค๊ดด้านบน เช่น

1. 0, 0, 0, 0

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

- ชุดตัวเลข 2 กลุ่มแรก จะมีค่าเท่ากับ (x0,y0) ซึ่งก็คือพิกัดของมุมบนซ้ายของ hotspot และ...

- ชุดตัวเลข 2 กลุ่มหลัง จะมีค่าเท่ากับ (x1,y1) นั่นคือ พิกัดที่มุมล่างทางขวา

ขั้นตอนที่3
- เมื่อเข้าใจค่าของแต่ละกลุ่มตัวเลขแล้วต่อไปเราก็จะมาหาพิกัดตัวเลขแต่ละกลุ่มที่จะนำไปใส่ในโค๊ดกันค่ะโดยข้าพเจ้าแนะนำวิธีหาพิกัดตัวเลข 2 วิธีด้วยกันคือ......^^

3.1 ในกรณีที่ใช้โปรแกรม Paint หาพิกัดภาพ
1. ให้เปิดโปรแกรมPaint ขึ้นมาค่ะ  (สำหรับวินโดว์7 ให้คลิกที่ปุ่ม Start > All Programs >Accessories > Paint ดูตามภาพด้านล่าง)(โปรแกรมนี้จะมีแถมฟรีมาให้กับวินโดว์ทุกรุ่น ส่วนของวินโดว์เวอร์ชั่นอื่นก็จะมีวิธีการเรียกใช้โปรแกรมคล้ายๆกันค่ะ)


- เมื่อเปิดโปรแกรม Paint ขึ้นมาแล้วให้กดปุ่มCtrl+O เพื่อเปิดไฟล์ภาพของเราขึ้นมาค่ะ


- เราจะเริ่มจากหาพิกัดตัวเลข (x0, y0) ของตัวละครผู้ชายกันก่อนโดยให้เราเลื่อนเม้าส์ไปที่ตำแหน่งซ้ายบนสุดของภาพ (ที่ข้าพเจ้าวาดกรอบสีแดงไว้ก็เพื่อให้มองเห็นขอบเขตพื้นที่ของตัวละครชายง่ายขึ้นถ้าทำจริงเราก็แค่เลื่อนเม้าส์กะประมาณตัวเลขคร่าวๆเอาไม่ต้องวาดเส้นสีแดงไว้ก็ได้)

- เมื่อเลื่อนเม้าส์ไปที่ตำแหน่ง"มุมบนซ้ายสุดของขอบเขตตัวละคร"  ให้สังเกตที่ด้านมุมซ้ายล่างของโปรแกรมจะมีตัวเลขบอกพิกัดแกน X,Y ตามการเคลื่อนเม้าส์ของเราให้จดตัวเลขนั้นไว้เลยค่ะ มันคือพิกัด x0, y0 ที่เรากำลังค้นหาอยู่นั่นเองเลขพิกัด

ตำแหน่งที่มุมซ้ายบนคือ  "0,0"


- เมื่อได้พิกัด x0, y0 (มุมซ้ายบน) แล้วต่อไป เราก็มาหาพิกัดของ x1, y1 (มุมขวาล่าง)ของตัวละครชายกันบ้าง
- ให้เคลื่อนเม้าส์มาที่มุมขวาล่างสุดขอบเขตภาพตัวละครชายและจดตัวเลขที่แสดงอยู่ที่ มุมล่างซ้ายของหน้าจอโปรแกรม จะได้เลข "400,599"ให้ปัดขึ้นไปเลยค่ะ เป็น "400,600"  แทน


- ต่อไปเราจะหาพิกัดตัวเลข ฝั่งของตัวละครหญิงกันบ้างโดยใช้วิธีเดิมค่ะ  ให้หาพิกัด  x0,y0 (มุมซ้ายบนของขอบเขตตัวละครหญิงก่อน)โดยการเลื่อนเม้าส์ไปวางใกล้ๆมุมกรอบสีแดง และจดตัวเลขที่มุมซ้ายล่างหน้าจอโปรแกรมได้เลข "470,0"

- เสร็จแล้วก็หาพิกัด  x1, y1 (มุมขวาล่างของตัวละครหญิง)ต่อเลยค่ะ จะได้เลข "799,599" ให้ปัดเศษขึ้นเป็น 800,600แทน

(***คุณจะปัดเศษเลขขึ้นหรือไม่ก็ได้แต่ข้าพเจ้าไม่ชอบเลขเศษยัวะเยี๊ยะด้านหลัง เลยให้ปัดขึ้นดีกว่าจะได้พิมพ์ตัวเลขลงไปในโค๊ดง่ายด้วย)


เมื่อได้ตัวเลขพิกัดครบทุกตัวแล้วก็ไปขั้นตอนที่ 4 เลยค่ะ

3.2 ในกรณีที่ใช้โปรแกรม Photoshop หาพิกัดภาพ
- เมื่อเปิดโปรแกรมPhotoshop แล้ว ให้เปิดภาพของเราขึ้นมา และไปที่คำสั่ง Window> Info (หรือกดปุ่มคีย์ F8)


- พาแนล Info จะแสดงออกมาดังภาพด้านล่างให้เราทำการปรับค่าหน่วยการวัดค่าแกน x,y ใหม่(ในกรณีที่เซ็ตค่าเป็นหน่วยอื่นไว้)โดยให้คลิกที่ภาพกากบาท เลือกเป็นชนิด "Pixels"


- แล้วก็ให้เคลื่อนเม้าส์ไปที่ตำแหน่งมุมซ้ายบน(x0 , y0)และมุมขวาล่าง(x1 , y1) และสังเกตุตัวเลขในกรอบสีแดงที่จะเปลี่ยนไปค่ะวิธีการหาพิกัดแต่ละตำแหน่ง จะเหมือนกับขั้นตอนที่ 3.1


เมื่อได้ตำแหน่งต่างๆครบแล้ว ก็ทำขั้นตอนต่อไปเลยค่ะ

ขั้นตอนที่ 4
- ให้นำตัวเลขที่ได้จากขั้นตอนที่3  มาพิมพ์แก้ไขตัวเลขใหม่ให้ถูกต้องในตัวโค๊ด(อย่าลืมเปลี่ยนชื่อภาพและสกุลให้ถูกต้องด้วย)

(ตัวอย่าง...ข้าพเจ้าเอาโค๊ดมาวางไว้ที่ label start: )


ลองรันโปรแกรมดูค่ะ ^^

สำหรับโปรแกรม Renpy เวอร์ชั่นใหม่คำสั่งข้างต้นจะใช้ไม่ได้นะค่ะต้องใช้คำสั่งใหม่แทนค่ะ จากโจทย์แบบเดิม แต่จะเขียนเป็น

1. 
   
2. ######### Image map (เลือกตัวละคร) ############
   
3. 
   
4. screen select_character: #หน้าเลือกตัวละคร
   
5. imagemap:
   
6. ground "Ground.jpg"
   
7. hover "Hover.jpg"
   
8. 
   
9. hotspot (0, 0, 400, 600) clicked Return("man") #สั่งให้ส่งค่าคำตอบกลับไปที่ label example ว่าเลือก"man"
   
10. hotspot (204, 50, 78, 78) clicked Return("women") #สั่งให้ส่งค่าคำตอบกลับไปที่ label example ว่าเลือก"women"
    
11. 
    
12. ############# หน้า example ################
    
13. label example:
    
14. 
    
15. call screen select_character #สั่งให้หน้าเลือกตัวละครแสดงขึ้นมา
    
16. 
    
17. $ result = _return
    
18. 
    
19. if result == "man":
    
20. jump select_man
    
21. 
    
22. elif result == "women":
    
23. jump select_women
    
24. 
    
25. return
    
26. ############## Game Start ###############
    
27. 
    
28. label start: #เริ่มเกมส์
    
29. 
    
30. call screen example #สั่งให้หน้า example แสดงขึ้นมา
    
31. 
    
32. 
    
33. return
    
34. 
    
35. #############################
    

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

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

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