Thaigraph

 

   

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

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

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 18-4-2013 19:32 |แสดงโพสต์ทั้งหมด

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

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

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

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

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


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


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

  1.     $ result = renpy.imagemap("cha/bg_select_cha.jpg", "cha/bg_select_cha_hover.jpg", [
  2.                            (0, 0, 0, 0, "man"),
  3.                            (0, 0, 0, 0, "women")
  4.                           ])
  5.     if result == "man":
  6.         jump select_man
  7.     elif result == "women":
  8.        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. ######### Image map (เลือกตัวละคร) ############

  2. screen select_character: #หน้าเลือกตัวละคร
  3.     imagemap:
  4.         ground "Ground.jpg"
  5.         hover "Hover.jpg"

  6.         hotspot (0, 0, 400, 600) clicked Return("man")  #สั่งให้ส่งค่าคำตอบกลับไปที่ label example ว่าเลือก"man"
  7.         hotspot (204, 50, 78, 78) clicked Return("women")  #สั่งให้ส่งค่าคำตอบกลับไปที่ label example ว่าเลือก"women"

  8. ############# หน้า example ################
  9. label example:
  10.    
  11.     call screen select_character #สั่งให้หน้าเลือกตัวละครแสดงขึ้นมา
  12.    
  13.     $ result = _return
  14.    
  15.     if result == "man":
  16.         jump select_man

  17.     elif result == "women":
  18.         jump select_women

  19.     return
  20. ############## Game Start ###############

  21. label start: #เริ่มเกมส์

  22.     call screen example #สั่งให้หน้า example แสดงขึ้นมา
  23.         

  24. return

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


สงสัยขั้นตอนไหนถามได้นะค่ะ บ๊ายยย

บทความโดย NOOKFUFU2

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


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


Thaigraph

GMT+7, 21-7-2019 00:01 , Processed in 0.047630 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