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

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

[Renpy] 57. วิธีทำ Imagemap หน้า Preferences

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

272

กระทู้

272

โพสต์

979

เครดิต

ผู้ดูแลระบบ

Rank: 9Rank: 9Rank: 9

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

imagemap_preferences_10.png



[renpy] 57. วิธีทำ Imagemap หน้า Preferences

ในบทความนี้จะแนะนำวิธีการทำ Imagemap หรือการ Modify ที่หน้า Preferences ซึ่งถือเป็นรวมหน้าเมนูสำหรับแต่ง Options ต่างๆ ภายในเกมส์ โดยเราสามารถออกแบบหน้าตาของเมนูให้เป็นอย่างไร หรือวางที่ตำแหน่งใด ก็ได้ตามความชอบค่ะ

ที่ภาพด้านล่าง.... จากหน้ากากของเดิมที่โปรแกรม Renpy สร้างให้หน้าตาเมนูต่างๆจะออกมาประมาณนี้นะค่ะ เราจะทำการ modify(แก้ไข) หน้ากากของมันใหม่ทั้งหมด โดยยังคงเมนู Option ต่างๆไว้เหมือนเดิม (แต่ถ้าบางคนเห็นว่ามันเยอะเกินไป จะตัดตัวใดที่ไม่จำเป็นต้องใช้ออกไปก็ได้ค่ะ)
imagemap_preferences_02.png
ขั้นตอนที่ 1 ให้เตรียมภาพทั้งหมด 5 ภาพด้วยกัน คือ...
1. ภาพปกติที่ "ไม่" สามารถคลิกเลือกได้ (ถูก block ไว้ / เงื่อนไขไม่ถูกต้อง)
imagemap_preferences_04.png
2. ภาพปกติที่สามารถคลิกเลือกได้ (เงื่อนไขถูกต้อง)
imagemap_preferences_06.png

3. ภาพปกติที่สามารถคลิกเลือกได้ โดยจะเปลี่ยนแปลงเมื่อเลื่อนเม้าส์มาวางทับ
imagemap_preferences_05.png

4. ภาพปกติที่คลิกเลือกอยู่ในตอนนี้
imagemap_preferences_08.png
5. ภาพที่เลือกอยู่ในตอนนี้ โดยจะปลี่ยนแปลงเมื่อเลื่อนเม้าส์มาวางทับ
imagemap_preferences_07.png


ขั้นตอนที่ 2
- ให้หาตำแหน่งพิกัดของภาพที่จะใช้เป็นเมนูทั้งหมด โดยจดตัวเลขพิกัดทั้งหมดไว้ที่โปรแกรม notepad หรือโปรแกรมอะไรก็ได้  หรือจะจดลงกระดาษไว้ก่อนก็ได้ค่ะ เวลาวางโค๊ดตัวใหม่แล้วทำการแก้ไข จะได้ไม่เสียเวลานานมากดหน้า Photoshop กับ JEdit สลับกันไปมาให้ตาลาย

(สำหรับน้องๆที่หาพิกัดภาพไม่เป็นให้ศึกษาจากบทความนี้ก่อนค่ะ
[Renpy] 53. วิธีทำ Imagemap ภายในเกมส์
imagemap_preferences_01.jpg


ขั้นตอนที่ 3
-ให้เปิดไฟล์ Screen.rpy ขึ้นมา และเลื่อนลูกลิ้งเม้าส์ลงล่างไปเรื่อยๆ จนกว่าจะพบกับ ชุดกลุ่มโค๊ดปรับแต่งหน้า Preferences
imagemap_preferences_03.png

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

  1. ####################################################################### Preferences
  2. #
  3. # Screen that allows the user to change the preferences.
  4. # http://www.renpy.org/doc/html/screen_special.html#prefereces
  5.    
  6. screen preferences:

  7.     tag menu

  8.     # Include the navigation.
  9.     use navigation

  10.     # Put the navigation columns in a three-wide grid.
  11.     grid 3 1:
  12.         style_group "prefs"
  13.         xfill True

  14.         # The left column.
  15.         vbox:
  16.             frame:
  17.                 style_group "pref"
  18.                 has vbox

  19.                 label _("Display")
  20.                 textbutton _("Window") action Preference("display", "window")
  21.                 textbutton _("Fullscreen") action Preference("display", "fullscreen")

  22.             frame:
  23.                 style_group "pref"
  24.                 has vbox

  25.                 label _("Transitions")
  26.                 textbutton _("All") action Preference("transitions", "all")
  27.                 textbutton _("None") action Preference("transitions", "none")

  28.             frame:
  29.                 style_group "pref"
  30.                 has vbox

  31.                 label _("Text Speed")
  32.                 bar value Preference("text speed")

  33.             frame:
  34.                 style_group "pref"
  35.                 has vbox

  36.                 textbutton _("Joystick...") action Preference("joystick")

  37.         vbox:
  38.             frame:
  39.                 style_group "pref"
  40.                 has vbox

  41.                 label _("Skip")
  42.                 textbutton _("Seen Messages") action Preference("skip", "seen")
  43.                 textbutton _("All Messages") action Preference("skip", "all")

  44.             frame:
  45.                 style_group "pref"
  46.                 has vbox

  47.                 textbutton _("Begin Skipping") action Skip()

  48.             frame:
  49.                 style_group "pref"
  50.                 has vbox

  51.                 label _("After Choices")
  52.                 textbutton _("Stop Skipping") action Preference("after choices", "stop")
  53.                 textbutton _("Keep Skipping") action Preference("after choices", "skip")

  54.             frame:
  55.                 style_group "pref"
  56.                 has vbox

  57.                 label _("Auto-Forward Time")
  58.                 bar value Preference("auto-forward time")

  59.         vbox:
  60.             frame:
  61.                 style_group "pref"
  62.                 has vbox

  63.                 label _("Music Volume")
  64.                 bar value Preference("music volume")

  65.             frame:
  66.                 style_group "pref"
  67.                 has vbox

  68.                 label _("Sound Volume")
  69.                 bar value Preference("sound volume")

  70.                 if config.sample_sound:
  71.                     textbutton "Test":
  72.                         action Play("sound", config.sample_sound)
  73.                         style "soundtest_button"

  74.             frame:
  75.                 style_group "pref"
  76.                 has vbox

  77.                 label _("Voice Volume")
  78.                 bar value Preference("voice volume")

  79.                 if config.sample_voice:
  80.                     textbutton "Test":
  81.                         action Play("voice", config.sample_voice)
  82.                         style "soundtest_button"

  83. init -2 python:
  84.     style.pref_frame.xfill = True
  85.     style.pref_frame.xmargin = 5
  86.     style.pref_frame.top_margin = 5

  87.     style.pref_vbox.xfill = True

  88.     style.pref_button.size_group = "pref"
  89.     style.pref_button.xalign = 1.0

  90.     style.pref_slider.xmaximum = 192
  91.     style.pref_slider.xalign = 1.0

  92.     style.soundtest_button.xalign = 1.0


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

(ลบโค๊ดด้านบนทิ้งให้หมดนะค่ะ)


ขั้นตอนที่ 4
- เปิดไฟล์ Options.rpy
- นำโค๊ดด้านล่างนี้ ไปวางไว้ที่ตำแหน่งล่างสุด
- แล้วก็ให้นำตัวเลขพิกัดตำแหน่งของเมนูปรับแต่งทุกตัว ที่จดไว้ในขั้นตอนที่ 2 มากรอกใส่ ลงโค๊ดใหม่

  1. ############### IMAGEMAP PREFERENCES ##########################
  2. #This block is responsible for the Imagemap based main menu

  3. screen preferences:
  4.     tag menu
  5.    
  6.     imagemap:
  7.         ground 'menu/preferences_ground.png'
  8.         idle 'menu/preferences_idle.png'
  9.         hover 'menu/preferences_hover.png'
  10.         selected_idle 'menu/preferences_selected_idle.png'
  11.         selected_hover 'menu/preferences_selected_hover.png'

  12.         hotspot (54, 264, 190, 47) action Return() hover_sound "sound/click.wav"
  13.         hotspot (54, 314, 190, 47) action ShowMenu('save') hover_sound "sound/click.wav"
  14.         hotspot (54, 366, 190, 47) action ShowMenu('load') hover_sound "sound/click.wav"
  15.         hotspot (54, 417, 190, 47) action ShowMenu('preferences') hover_sound "sound/click.wav"
  16.         hotspot (54, 466, 190, 47) action MainMenu() hover_sound "sound/click.wav"
  17.         hotspot (54, 519, 190, 47) action Quit() hover_sound "sound/click.wav"

  18.         hotspot (356, 129, 174, 35) action Preference('display', 'window') hover_sound "sound/click.wav"
  19.         hotspot (356, 172, 174, 35) action Preference('display', 'fullscreen') hover_sound "sound/click.wav"

  20.         hotspot (356, 264, 174, 35) action Preference('transitions', 'none') hover_sound "sound/click.wav"
  21.         hotspot (356, 310, 174, 35) action Preference('transitions', 'all') hover_sound "sound/click.wav"

  22.         hotspot (-1, -1, -1, -1) action Preference('joystick') hover_sound "sound/click.wav"
  23.         hotspot (356, 376, 174, 35) action Preference('begin skipping') hover_sound "sound/click.wav"

  24.         hotbar (351, 505, 187, 23) value Preference('text speed')
  25.         hotbar (351, 550, 187, 23) value Preference('auto-forward time')

  26.         hotbar (567, 70, 199, 23) value Preference('music volume')
  27.         hotbar (567, 132, 199, 23) value Preference('sound volume')
  28.         hotbar (567, 199, 199, 23) value Preference('voice volume')

  29.         hotspot (567, 305, 199, 39) action Preference('skip', 'seen') hover_sound "sound/click.wav"
  30.         hotspot (567, 359, 199, 49) action Preference('skip', 'all') hover_sound "sound/click.wav"

  31.         hotspot (567, 473, 199, 39) action Preference('after choices', 'stop') hover_sound "sound/click.wav"
  32.         hotspot (567, 527, 199, 39) action Preference('after choices', 'skip') hover_sound "sound/click.wav"
คัดลอกไปที่คลิปบอร์ด


ตัวอย่างการใส่โค๊ด....(คลิกที่ภาพเพื่อดูขนาดเต็ม)
imagemap_preferences_09.png

- เมื่อใส่โค๊ดพิกัดตัวเลขของแต่ละเมนูเสร็จ ก็ให้บันทึกไฟล์ และทดสอบรันโปรแกรมดูค่ะ (เมื่อรันเกมส์แล้ว ที่หน้า Main menu ให้คลิกเลือกเมนู Preferneces เพื่อดูผลลัพธ์ที่ได้ค่ะ
imagemap_preferences_10.png
บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)
ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | ลงทะเบียน

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

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

GMT+7, 2024-3-29 04:29 , Processed in 0.125119 second(s), 29 queries .

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

© 2001-2017 Comsenz Inc.

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