บทความสอนกราฟิก

 ลืมรหัสผ่าน
 ลงทะเบียน
ค้นหา
ดู: 1824|ตอบกลับ: 0

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

[คัดลอกลิงก์]

272

กระทู้

272

โพสต์

979

เครดิต

ผู้ดูแลระบบ

Rank: 9Rank: 9Rank: 9

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

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

- หน้าหลัก 1 หน้า
yesno_prompt_02.jpg

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

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



ขั้นตอนที่ 1  ให้เตรียมภาพสำหรับทำ Imagemap ทั้งหมด 8 ภาพ ได้แก่


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


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


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

yesno_prompt_05.jpg

yesno_prompt_06.jpg

yesno_prompt_07.jpg

yesno_prompt_08.jpg

yesno_prompt_09.jpg

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

ขั้นตอนที่ 2
- ให้ทำการหาตำแหน่งพิกัดภาพ "ปุ่ม" ทั้ง 2 ปุ่ม (yes และ no) สำหรับคนที่หาพิกัดตำแหน่งภาพไม่เป็นให้ศึกษาจากบทความนี้ก่อนค่ะ
[renpy] วิธีทำ Imagemap ภายในเกมส์
yesno_prompt_11.jpg
ขั้นตอนที่ 3
- เปิดไฟล์ screen.rpy ขึ้นมา และเลื่อนเม้าส์ลงไปเรื่อยๆจนกว่าจะเจอตำแหน่งโค๊ดคำสั่งสำหรับจัดหน้า  yesno_prompt: (ดูภาพด้านล่างประกอบ)

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

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

Code:


  1. screen yesno_prompt:
  2.     #on "show" action With(dissolve)
  3.    
  4.     modal True

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

  11.     if message == layout.ARE_YOU_SURE:
  12.         add "menu/yesno_are_you_sure.png"
  13.     elif message == layout.DELETE_SAVE:
  14.         add "menu/yesno_delete_save.png"
  15.     elif message == layout.OVERWRITE_SAVE:
  16.         add "menu/yesno_overwrite_save.png"
  17.     elif message == layout.LOADING:
  18.         add "menu/yesno_loading.png"
  19.     elif message == layout.QUIT:
  20.         add "menu/yesno_quit.png"
  21.     elif message == layout.MAIN_MENU:
  22.         add "menu/yesno_main_menu.png"
คัดลอกไปที่คลิปบอร์ด
ดูที่โค๊ดคำสั่งที่พ่วงท้ายพิกัด hotspot ตัวนี้นะค่ะ



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

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

yesno_prompt_13.jpg
บทความโดย นุ้ก

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


ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | ลงทะเบียน

รายละเอียดเครดิต

ข้อความล้วน|อุปกรณ์พกพา|ประวัติการแบน|GraphicFUFU

GMT+7, 2024-3-28 22:24 , Processed in 0.123031 second(s), 21 queries .

Powered by Discuz! X3.4 R20180101, Rev.59

© 2001-2017 Comsenz Inc.

ตอบกระทู้ ขึ้นไปด้านบน ไปที่หน้ารายการกระทู้