[Renpy] 53. วิธีทำ Imagemap ภายในเกมส์
แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2018-6-29 23:1353. วิธีทำ Imagemap ภายในเกมส์
Imagemap ก็คือการนำภาพสกุล .gif.png หรือ .jpgมากำหนดพิกัดตามตำแหน่งต่างๆภายใน เพื่อให้เกิดเงื่อนไขผลลัพธ์ต่างๆ เมื่อเอาเม้าส์ไปวาง หรือคลิก
การทำ Imagemap ของโปรแกรม Renpy จะมีหลายส่วนด้วยกัน ตัวอย่างเช่น ทำกรอบสนทนา ทำเมนู ปุ่มต่างๆรวมไปถึงหน้าจอสำหรับปรับแต่งค่า options ต่างๆภายในเกมส์ฯลฯ
สำหรับบทความนี้ข้าพเจ้าแนะนำวิธีทำ Imagemap สำหรับสร้างเงื่อนไขต่างขณะดำเนินเกมส์ซึ่งจะทำหน้าที่คล้ายๆ "เมนูทางเลือก" ที่ข้าพเจ้าเคยแนะนำวิธีทำไปแล้วในบทความ การสร้างเมนูทางเลือกแต่การ Imagemapจะเพิ่มความน่าสนใจได้มากกว่าการถาม-ตอบแบบทั่วไปค่ะเพราะนอกจากเราจะได้เห็นภาพตัวเลือกแล้ว เรายังออกแบบหน้าจอของทางเลือกนั้นๆได้อย่างอิสระตามต้องการ
ขั้นตอนที่1 เตรียมภาพปกติและภาพเมื่อนำภาพมาวางทับ ขนาด 800*600 pt หรือตามขนาดหน้าจอเกมส์ที่เรากำหนดไว้
ด้านล่างนี้เป็นภาพแบบปกติซึ่งก็คือภาพในขณะที่ยังไม่มีการนำเม้าส์มาวางทับข้าพเจ้าบันทึกภาพนี้ชื่อว่าGround.jpg
และให้สร้างอีกภาพ สำหรับเป็นภาพเหตุการณ์เมื่อมีเม้าส์เลื่อนมาวางทับข้าพเจ้าบันทึกภาพนี้ชื่อว่าHover.jpg
ขั้นตอนที่ 2 โค๊ดคำสั่ง
ขณะทำการกำหนดพิกัดภาพเพื่อไม่ให้โปรแกรมดึงไฟล์ที่จับไว้ของใหม่มาปะปนกับไฟล์ใหม่เมื่อทำการแก้ไขให้เปิดไฟล์ Options.rpyขึ้นมาและแก้ให้config.developer = False เพื่อไม่ให้โปรแกรมสร้างแฟ้มชื่อ"cache" ขึ้นมาเพื่อบันทึกพิกัดของภาพเก่าไว้และนำมาประมวลผลร่วมกับพิกัดใหม่ (ตรงนี้ข้าพเจ้าจะอธิบายไว้ในตอนท้ายๆนะค่ะเอาเป็นว่ากำหนดให้ config.developer = False ไปก่อน )
สำหรับคนที่ไม่รู้ว่า config.developer = False คือคำสั่งอะไรให้ศึกษาจากบทความนี้ก่อนค่ะ การพับลิชไฟล์และซ่อนไฟล์หลังพับลิช
ขั้นตอนที่ 3 โค๊ดคำสั่งสำหรับ map ภาพ
วิธีพิมพ์โค๊ดคำสั่งในไฟล์ Script.rpy มันมีหลายแบบแล้วแต่จะพลิกแพลง ถ้าเป็นแบบมาตรฐานทั่วไป คำสั่งแบบแรก
Code:
$ result = renpy.imagemap("ground.jpg", "hover.jpg", [
(8, 200, 86, 278, "swim"),
(204, 50, 282, 128, "science"),
(452, 79, 530, 157, "art"),
(602, 316, 680, 394, "go home"),
], focus="imagemap")
if result == "swim":
e "You picked swimming!"
elif result == "science":
e "You picked science!"
elif result == "art":
e "You picked art!"
และ คำสั่งแบบที่สอง
Code:
screen example_imagemap:
imagemap:
ground "Ground.jpg"#ชื่อภาพแบบปกติ
hover "Hover.jpg" #ชื่อภาพเมื่อเอาเม้าส์วางทับ
#คำสั่งเซ็ตพิกัด hotspot (x(แนวตั้ง), y(แนวนอน), w(ความกว้่าง), h(ความสูง)) clicked Return("วิ่งไปที่...")
hotspot (8, 200, 78, 78) clicked Return("swim")
hotspot (204, 50, 78, 78) clicked Return("science")
hotspot (452, 79, 78, 78) clicked Return("art")
hotspot (602, 316, 78, 78) clicked Return("go home")
label example:
call screen example_imagemap
$ result = _return
if result == "swim":
e "You picked swimming!"
elif result == "science":
e "You picked science!"
elif result == "art":
e "You picked art!"
elif result == "go home":
e "You went home!"
return
เอาเป็นว่าแล้วแต่ความชอบนะค่ะ
ขั้นตอนที่ 4 หาพิกัดให้ภาพ map (ใช้โปรแกรมPhotoshop)
เมื่อรู้โค๊ดคำสั่งแล้ว สิ่งที่ต้องทำต่อไปคือหาพิกัดของ Imagemapแต่ละตำแหน่ง
ที่โค๊ดคำสั่งข้างต้น เราจะเห็นตัวเลขเรียงกัน 4 กลุ่มhotspot (8, 200, 78, 78)ซึ่งก็แปลได้ว่า พิกัดที่ แกน (X), แกน(Y), ความกว้างของตำแหน่งนั้นๆ(W),ความสูงของตำแหน่งนั้นๆ(H)
เมื่อเข้าใจความหมายแล้ว ก็ให้นำภาพ Hover.jpg มาเปิดในโปรแกรม Adobe Photoshop
หลังจากได้ภาพทั้งสองมาแล้ว ให้เปิดโปรแกรม Photoshop ขึ้นมาค่ะ
คลิกที่เครื่องมือ Slice Tool (เป็นเครื่องมือที่ใช้ในการตัดภาพออกเป็นชิ้นๆ เพื่อนำไปใช้ในงานเว็บ หรืองานวางโครงสร้างภาพ)
ใช้เครื่องมือ Slice Toolคลิกไปที่มุมใดมุมหนึ่งแล้วแดรกเม้าส์กำหนดอาณาเขต "ภาคเหนือ" ที่จะให้แสดงเมื่อเม้าส์วางทับ
จากนั้นให้ ดับเบิ้ลคลิกภาพที่ตัด หรือคลิกขวาที่ภาพ และเลือกคำสั่ง "Edit Slice Options..."
เมื่อหน้าต่างป๊อบอัพ "Slice Options" แสดงขึ้นมาแล้ว ให้ดูตรงกลุ่มของ "Dimensions"และดูที่ช่องภายในกรอบสีแดงชั้นในเราก็จะได้พิกัดที่แน่นนอนของภาพนั่นคือ แกน (X), แกน(Y),ความกว้างของตำแหน่งนั้นๆ(W),และความสูงของตำแหน่งนั้นๆ(H)
นำค่าที่ได้ไปใส่ในโค๊ดเลยค่ะ :p
แล้วก็กลับมาที่โปรแกรม Photoshop อีกครั้งและให้ใช้ Slice Tool ตัดภาพที่ตำแหน่งต่อไป "ภาคอีสาน"
แล้วก็ดับเบิ้ลคลิกที่ภาพที่ตัด เพื่อให้หน้าต่าง "Slice Options" เด้งขึ้นมา
แล้วก็ให้นำค่าที่ได้ไปใส่ในโค๊ด บรรทัดต่อมา
ภาพไหนที่เราต้องการให้แสดงเมื่อเม้าส์วางทับ ก็ตัดให้ครบเลยนะค่ะ
แล้วก็นำตัวเลขที่ได้จาก "Slice Options" มาใส่ให้หมดทุกตำแหน่ง
ขั้นตอนที่ 5 ตั้งเงื่อนไขเมื่อคลิกแต่ละทางเลือก
ในขั้นตอนนี้ เราสามารถแทรกคำสั่งต่างๆ ลงไปได้หลายแบบ เช่นการให้คะแนน มินิเกมส์ หรือเพิ่มโอกาสที่จะทำให้เกิดเหตุการณ์พิเศษต่างๆ ในเกมส์สิ่งต่างๆเหล่านี้ ถ้าขยันก็จะทยอยทำบทความสอนให้ค่ะแต่ตอนนี้เอาเป็นเหตุการณ์ง่ายๆอย่างการสนทนาทั่วไปก่อน
ตัวอย่าง การเขียนโค๊ด และเขียนผลลัพธ์ของแต่ละทางเลือก
เสร็จแล้วก็บันทึกไฟล์ Script.rpy และ รันโปรแกรมเลยค่ะ
หลังจาก Start Game โผล่มาหน้าแรก ขึ้น Imagemapก่อนเลย ให้สังเกตว่าเมื่อเลื่อนเม้าส์ไปวางทับบนตำแหน่งที่เรากำหนดพิกัดไว้ภาพตรงบริเวณนั้นก็จะแสดงเป็นภาพสี (Hover.jpg )และมีคำอธิบายโชว์ขึ้นมา
สมมุติว่าลองคลิกเลือก "ภาคใต้" โปรแกรมก็จะแสดงมาตามนี้ค่ะ
จบคำสั่ง โปรแกรมก็จะ Jump มาที่ label next ตามที่เรากำหนดไว้ดังภาพด้านล่าง
การ Imagemap สามารถนำมาประยุกต์ใช้ได้กับหลากหลายลูกเล่นนะค่ะสมมุติว่า เป็นเกมส์ที่ตัวละครต่างๆมีกิจกรรมร่วมกันภายในโรงเรียนImagemapก็อาจจะออกแบบให้สอดคล้องกับกิจกรรมต่างๆที่เกิดขึ้นภายในโรงเรียน..
จบแล้วนะค่ะ สำหรับการทำภาพ Imagemap เพื่อสร้างความน่าสนใจให้กับเกมส์ต่อไปที่ติดไว้เรื่อง config.developer = False ถ้าเรากำหนดให้เป็นTrue หลังจากเราทำการรันเกมส์ โปรแกรมrenpyจะทำการสร้างแฟ้มไฟล์ชื่อ "cache" (ดูภาพประกอบด้านล่าง)เพื่อบันทึกตำแหน่งพิกัดและความกว้างยาวของ Imagemap เป็นสกุล.png เพื่อใช้ในการรันโปรแกรมในครั้งต่อๆไปแน่นอนว่าถ้าเราบันทึกพิกัดครั้งแรกผิดมันก็จะเอาอันผิดครั้งแรกมารันในครั้งต่อๆไปด้วย
ข้อดีคือ หากพิกัดทุกอย่างถูกต้อง ในการรันโปรแกรมครั้งแรกเมื่อเราทำการรันโปรแกรมครั้งต่อๆไปจะประมวลผลได้อย่างรวดเร็ว
ข้อเสียคือ หากครั้งแรกเราเซ็ตพิกัดไว้ผิด และต้องการแก้ไขเพิ่มเติมมันจะทำให้ตำแหน่งพิกัดเพี้ยนไปจากความเป็นจริง
เพื่อให้การทำงานเป็นไปอย่างราบรื่น เราควรกำหนดให้เป็น False ก่อนและเมื่อหลังจากเซ็ตตำแหน่งพิกัดที่แน่นอนเสร็จแล้ว ไม่มีอะไรผิดพลาดก็ค่อยมากำหนดให้เป็น True ในตอนหลัง (ถ้าต้องการ)
ขอให้สนุกกับการสร้างเกมส์นะค่ะ^^"******************************
บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)
หน้า:
[1]