[Renpy] 54. วิธีการทำImagemap ภายใน Label
แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2018-6-29 23:34(ยืมภาพเกมส์โปรดมาใส่ ขี้เกียจวาดเอง หุหุ )
54. วิธีการทำImagemap ภายใน Label
จากบทความก่อนๆที่ผ่านมาทั้งหมดข้าพเจ้าจะแนะนำเฉพาะวิธีทำ Imagemap ในหน้า screen ต่างๆนะค่ะ แต่ในบทความนี้เราจะมาเรียนรู้วิธี Imagemap ภายใน label ย่อยๆต่างๆกันบ้างค่ะ
การทำ Imagemap ภายใน Label นั้นจะมีวิธีการเขียนโค๊ดแตกต่างกัน และวิธีในการหาพิกัดตำแหน่งแกน Xและ Y ของภาพก็จะต่างกันออกไปด้วยเรามาดูกันค่ะว่ามันทำยังไง ^^
ขั้นตอนที่1
ให้เตรียมภาพที่จะนำมาทำImagemap จำนวน 2ภาพด้วยกัน คือ
1. ภาพปกติ เมื่อไม่มีเม้าส์เลื่อนมาวางทับ
2. ภาพที่จะแสดงเมื่อเลื่อนเม้าส์มาวางทับ
ขั้นตอนที่ 2
- ให้นำโค๊ดด้านล่างนี้ไปวางแทรกในlabel ที่ต้องการค่ะ
$ result = renpy.imagemap("cha/bg_select_cha.jpg", "cha/bg_select_cha_hover.jpg", [
(0, 0, 0, 0, "man"),
(0, 0, 0, 0, "women")
])
if result == "man":
jump select_man
elif result == "women":
jump select_women
*** ที่ตัวเลขทั้ง 4 กลุ่มของแต่ละบรรทัดในโค๊ดด้านบน เช่น
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 เวอร์ชั่นใหม่คำสั่งข้างต้นจะใช้ไม่ได้นะค่ะต้องใช้คำสั่งใหม่แทนค่ะ จากโจทย์แบบเดิม แต่จะเขียนเป็น
######### Image map (เลือกตัวละคร) ############
screen select_character: #หน้าเลือกตัวละคร
imagemap:
ground "Ground.jpg"
hover "Hover.jpg"
hotspot (0, 0, 400, 600) clicked Return("man") #สั่งให้ส่งค่าคำตอบกลับไปที่ label example ว่าเลือก"man"
hotspot (204, 50, 78, 78) clicked Return("women") #สั่งให้ส่งค่าคำตอบกลับไปที่ label example ว่าเลือก"women"
############# หน้า example ################
label example:
call screen select_character #สั่งให้หน้าเลือกตัวละครแสดงขึ้นมา
$ result = _return
if result == "man":
jump select_man
elif result == "women":
jump select_women
return
############## Game Start ###############
label start: #เริ่มเกมส์
call screen example #สั่งให้หน้า example แสดงขึ้นมา
return
#############################
ขอให้สนุกกับการสร้างเกมส์นะค่ะ^^"******************************
บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)
หน้า:
[1]