Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Ren'Py [renpy] วิธีทำ Imagemap ภายในเกมส์ ...
ดู: 2883|ตอบ: 4
go

[renpy] วิธีทำ Imagemap ภายในเกมส์

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 25-1-2013 20:17 |แสดงโพสต์ทั้งหมด
[renpy] วิธีทำ Imagemap ภายในเกมส์


Imagemap ก็คือการนำภาพสกุล .gif  .png หรือ .jpg  มากำหนดพิกัดตามตำแหน่งต่างๆ ภายใน เพื่อให้เกิดเงื่อนไขผลลัพธ์ต่างๆ เมื่อเอาเม้าส์ไปวาง หรือคลิก

การทำ Imagemap ของโปรแกรม Renpy จะมีหลายส่วนด้วยกัน ตัวอย่างเช่น ทำกรอบสนทนา ทำเมนู ปุ่มต่างๆ รวมไปถึงหน้าจอสำหรับปรับแต่งค่า options ต่างๆภายในเกมส์ ฯลฯ

สำหรับบทความนี้ข้าพเจ้าแนะนำวิธีทำ Imagemap สำหรับสร้างเงื่อนไขต่างขณะดำเนินเกมส์ ซึ่งจะทำหน้าที่คล้ายๆ "เมนูทางเลือก" ที่ข้าพเจ้าเคยแนะนำวิธีทำไปแล้วในบทความ
[renpy] การสร้างเมนูทางเลือก แต่การ Imagemap  จะเพิ่มความน่าสนใจได้มากกว่าการถาม-ตอบแบบทั่วไปค่ะ เพราะนอกจากเราจะได้เห็นภาพตัวเลือกแล้ว เรายังออกแบบหน้าจอของทางเลือกนั้นๆได้อย่างอิสระตามต้องการ

ขั้นตอนที่ 1 เตรียมภาพปกติ และภาพเมื่อนำภาพมาวางทับ ขนาด 800*600 pt หรือตามขนาดหน้าจอเกมส์ที่เรากำหนดไว้

ด้านล่างนี้เป็นภาพแบบปกติ ซึ่งก็คือภาพในขณะที่ยังไม่มีการนำเม้าส์มาวางทับ  ข้าพเจ้าบันทึกภาพนี้ชื่อว่า
Ground.jpg



และให้สร้างอีกภาพ สำหรับเป็นภาพเหตุการณ์เมื่อมีเม้าส์เลื่อนมาวางทับ ข้าพเจ้าบันทึกภาพนี้ชื่อว่า
Hover.jpg




ขั้นตอนที่ 2 โค๊ดคำสั่ง
ขณะทำการกำหนดพิกัดภาพ เพื่อไม่ให้โปรแกรมดึงไฟล์ที่จับไว้ของใหม่มาปะปนกับไฟล์ใหม่เมื่อทำการแก้ไข ให้เปิดไฟล์ Options.rpy  ขึ้นมาและแก้ให้   config.developer = False เพื่อไม่ให้โปรแกรมสร้างแฟ้มชื่อ "cache" ขึ้นมาเพื่อบันทึกพิกัดของภาพเก่าไว้ และนำมาประมวลผลร่วมกับพิกัดใหม่ (ตรงนี้ข้าพเจ้าจะอธิบายไว้ในตอนท้ายๆนะค่ะ เอาเป็นว่ากำหนดให้ config.developer = False ไปก่อน )

สำหรับคนที่ไม่รู้ว่า config.developer = False คือคำสั่งอะไรให้ศึกษาจากบทความนี้ก่อนค่ะ  
[renpy] การพับลิชไฟล์ และซ่อนไฟล์หลังพับลิช




ขั้นตอนที่ 3 โค๊ดคำสั่งสำหรับ map ภาพ

วิธีพิมพ์โค๊ดคำสั่งในไฟล์ Script.rpy มันมีหลายแบบ แล้วแต่จะพลิกแพลง ถ้าเป็นแบบมาตรฐานทั่วไป คำสั่งแบบแรก
Code:


  1. $ result = renpy.imagemap("ground.jpg", "hover.jpg", [
  2.         (8, 200, 86, 278, "swim"),
  3.         (204, 50, 282, 128, "science"),
  4.         (452, 79, 530, 157, "art"),
  5.         (602, 316, 680, 394, "go home"),
  6.         ], focus="imagemap")

  7. if result == "swim":
  8.     e "You picked swimming!"
  9. elif result == "science":
  10.     e "You picked science!"
  11. elif result == "art":
  12.     e "You picked art!"
  13. elif result == "go home":
  14.     e "You went home!"
คัดลอกไปที่คลิปบอร์ด
และ คำสั่งแบบที่สอง

Code:
  1. screen example_imagemap:
  2.     imagemap:
  3.         ground "Ground.jpg"  #ชื่อภาพแบบปกติ
  4.         hover "Hover.jpg" #ชื่อภาพเมื่อเอาเม้าส์วางทับ


  5.         #คำสั่งเซ็ตพิกัด hotspot (x(แนวตั้ง), y(แนวนอน), w(ความกว้่าง), h(ความสูง)) clicked Return("ค่าที่ส่งกลับไป")
  6.         hotspot (8, 200, 78, 78) clicked Return("swim")
  7.         hotspot (204, 50, 78, 78) clicked Return("science")
  8.         hotspot (452, 79, 78, 78) clicked Return("art")
  9.         hotspot (602, 316, 78, 78) clicked Return("go home")
  10.         
  11. label example:
  12.    
  13.     call screen example_imagemap
  14.    
  15.     $ result = _return
  16.    
  17.     if result == "swim":
  18.         e "You picked swimming!"
  19.     elif result == "science":
  20.         e "You picked science!"
  21.     elif result == "art":
  22.         e "You picked art!"
  23.     elif result == "go home":
  24.         e "You went home!"

  25.     return
คัดลอกไปที่คลิปบอร์ด
เอาเป็นว่าแล้วแต่ความชอบนะค่ะ


ขั้นตอนที่ 4 หาพิกัดให้ภาพ map (ใช้โปรแกรม Photoshop)
เมื่อรู้โค๊ดคำสั่งแล้ว สิ่งที่ต้องทำต่อไปคือหาพิกัดของ Imagemap แต่ละตำแหน่ง

ที่โค๊ดคำสั่งข้างต้น เราจะเห็นตัวเลขเรียงกัน 4 กลุ่ม
  1. 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 ในตอนหลัง (ถ้าต้องการ)



ขอให้สนุกกับทุกชิ้นงานนะค่ะ

บทความโดย NOOKFUFU2
(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะเว็บไทยกราฟเท่านั้น!!!)



ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 1

โพสต์เมื่อ 9-10-2014 17:46 |แสดงโพสต์ทั้งหมด
ทำถ้าทำให้ Imagemap เป็น animetion จะทำได้ไม ไม่กล้าลองเดียวเกมเน่า 555

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 10-10-2014 06:48 |แสดงโพสต์ทั้งหมด

Rank: 1

โพสต์เมื่อ 10-10-2014 12:56 |แสดงโพสต์ทั้งหมด
ありがとうございます

Rank: 1

โพสต์เมื่อ 27-10-2015 01:19 |แสดงโพสต์ทั้งหมด
ขอบคุณค่า
คุณต้องเข้าสู่ระบบก่อนจึงจะสามารถตอบกลับ เข้าสู่ระบบ | สมัครสมาชิก


Thaigraph

GMT+7, 16-9-2019 13:43 , Processed in 0.088447 second(s), 20 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books