nooknazha โพสต์ 2019-11-30 18:59:45

[renpy] 58.วิธีทำ Imagemap หน้า yes/no - prompt

แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2019-11-30 19:13


58.วิธีทำ Imagemap หน้า yes/no - prompt
ขั้นตอนที่ 1ให้เตรียมภาพสำหรับทำ Imagemap ทั้งหมด 8 ภาพ ได้แก่


- หน้าหลัก 1 หน้า


- "ปุ่ม" ที่จะเปลี่ยนแปลงเมื่อเลื่อนเม้าส์มาทับ (hover)1หน้า



วิธีทำ Imagemap หน้า yes/no - prompt

http://www.thaigraph.com/data/attachment/forum/201302/13/030054frici2vbjrb856ri.jpg

ขั้นตอนที่ 1ให้เตรียมภาพสำหรับทำ Imagemap ทั้งหมด 8 ภาพ ได้แก่
http://www.thaigraph.com/data/attachment/forum/201302/13/035912rhd4gyoffz7dd7zh.jpg

- หน้าหลัก 1 หน้า
http://www.thaigraph.com/data/attachment/forum/201302/13/035901ijwiih6q62pj6i6j.jpg

- "ปุ่ม" ที่จะเปลี่ยนแปลงเมื่อเลื่อนเม้าส์มาทับ (hover)1หน้า
http://www.thaigraph.com/data/attachment/forum/201302/13/035902xo2kp2wfpggzfv3o.jpg

- และหน้าประโยคคำถามต่างๆ แต่ละสถานะ ซึ่งมี 6 สถานะด้วยกันค่ะ (จริงๆต้นฉบับมันเป็นตัวหนังสือสีขาว แต่ข้าพเจ้าเปลี่ยนให้เป็นสีดำ เพื่อจะได้มองเห็นง่ายๆ)












(***ตัวหนังสือทุกประโยคคำถาม จะต้องจัดวางให้อยู่ภายในกรอบพอดี (กรอบสำหรับแสดงคำพูดที่หน้าหลัก ภาพแรก))

ขั้นตอนที่ 2
- ให้ทำการหาตำแหน่งพิกัดภาพ "ปุ่ม" ทั้ง 2 ปุ่ม (yes และ no) สำหรับคนที่หาพิกัดตำแหน่งภาพไม่เป็นให้ศึกษาจากบทความนี้ก่อนค่ะ วิธีทำ Imagemap ภายในเกมส์

ขั้นตอนที่ 3
- เปิดไฟล์ screen.rpy ขึ้นมา และเลื่อนเม้าส์ลงไปเรื่อยๆจนกว่าจะเจอตำแหน่งโค๊ดคำสั่งสำหรับจัดหน้าyesno_prompt: (ดูภาพด้านล่างประกอบ)

- ให้แดรกเม้าส์เลือกโค๊ดคำลั่งทั้งชุด และกดปุ่ม Delete ลบทิ้งไปเลยค่ะ ไม่งั้นมันจะมากวนกับโค๊ดคำสั่งตัวใหม่ที่เราจะใส่ซ้อนลงไป


- จากนั้นให้เปิดไฟล์ options.rpy ค่ะ และใส่โค๊ดคำสั่งสำหรับจัดหน้า Yes/No Promp ลงไปตามนี้

Code:


screen yesno_prompt:
    #on "show" action With(dissolve)
   
    modal True

    imagemap:
      ground 'menu/yesno_prompt.png'
      hover 'menu/yesno_prompt_hover.png'
      
      hotspot (310, 275, 141, 56) action yes_action hover_sound "sound/click.wav"
      hotspot (523, 275, 141, 56) action no_action hover_sound "sound/click.wav"

    if message == layout.ARE_YOU_SURE:
      add "menu/yesno_are_you_sure.png"
    elif message == layout.DELETE_SAVE:
      add "menu/yesno_delete_save.png"
    elif message == layout.OVERWRITE_SAVE:
      add "menu/yesno_overwrite_save.png"
    elif message == layout.LOADING:
      add "menu/yesno_loading.png"
    elif message == layout.QUIT:
      add "menu/yesno_quit.png"
    elif message == layout.MAIN_MENU:
      add "menu/yesno_main_menu.png"
ดูที่โค๊ดคำสั่งที่พ่วงท้ายพิกัด hotspot ตัวนี้นะค่ะ


hover_sound "sound/click.wav
มันคือโค๊ดสำหรับสั่งให้โปรแกรมให้เล่นเสียงเวลาเราเลื่อนเม้าส์ไปวางทับบนปุ่ม ถ้าในแฟ้มเกมส์เราไม่มีซับแฟ้มชื่อ "sound" และภายในมีแฟ้ม soundไฟล์เสียง ชื่อ "click.wav" อยู่ โปรแกรมจะเกิด Error วิธีแก้คือให้ลบโค๊ดตัวนี้ทิ้งไป หรือไม่ก็สร้างแฟ้มใหม่ชื่อ sound (ชื่ออะไรก็ได้แล้วแต่เราจะกำหนด) และหาไฟล์เสียงชื่อ "click.wav" (ชื่ออะไรก็ได้แล้วแต่เราจะกำหนด) มาใส่ โปรแกรมก็จะรันได้ตามปกติค่ะ
ตัวอย่างการใส่โค๊ด....


- จากนั้นให้บันทึกไฟล์และรันโปรแกรมค่ะ



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



หน้า: [1]
ดูในรูปแบบกติ: [renpy] 58.วิธีทำ Imagemap หน้า yes/no - prompt