|
|
แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2019-11-30 19:13
[renpy] 57. วิธีทำ Imagemap หน้า Preferences
ในบทความนี้จะแนะนำวิธีการทำ Imagemap หรือการ Modify ที่หน้า Preferences ซึ่งถือเป็นรวมหน้าเมนูสำหรับแต่ง Options ต่างๆ ภายในเกมส์ โดยเราสามารถออกแบบหน้าตาของเมนูให้เป็นอย่างไร หรือวางที่ตำแหน่งใด ก็ได้ตามความชอบค่ะ
ที่ภาพด้านล่าง.... จากหน้ากากของเดิมที่โปรแกรม Renpy สร้างให้หน้าตาเมนูต่างๆจะออกมาประมาณนี้นะค่ะ เราจะทำการ modify(แก้ไข) หน้ากากของมันใหม่ทั้งหมด โดยยังคงเมนู Option ต่างๆไว้เหมือนเดิม (แต่ถ้าบางคนเห็นว่ามันเยอะเกินไป จะตัดตัวใดที่ไม่จำเป็นต้องใช้ออกไปก็ได้ค่ะ) |
ขั้นตอนที่ 1 ให้เตรียมภาพทั้งหมด 5 ภาพด้วยกัน คือ...
1. ภาพปกติที่ "ไม่" สามารถคลิกเลือกได้ (ถูก block ไว้ / เงื่อนไขไม่ถูกต้อง)
2. ภาพปกติที่สามารถคลิกเลือกได้ (เงื่อนไขถูกต้อง)
3. ภาพปกติที่สามารถคลิกเลือกได้ โดยจะเปลี่ยนแปลงเมื่อเลื่อนเม้าส์มาวางทับ
4. ภาพปกติที่คลิกเลือกอยู่ในตอนนี้
5. ภาพที่เลือกอยู่ในตอนนี้ โดยจะปลี่ยนแปลงเมื่อเลื่อนเม้าส์มาวางทับ
ขั้นตอนที่ 2
- ให้หาตำแหน่งพิกัดของภาพที่จะใช้เป็นเมนูทั้งหมด โดยจดตัวเลขพิกัดทั้งหมดไว้ที่โปรแกรม notepad หรือโปรแกรมอะไรก็ได้ หรือจะจดลงกระดาษไว้ก่อนก็ได้ค่ะ เวลาวางโค๊ดตัวใหม่แล้วทำการแก้ไข จะได้ไม่เสียเวลานานมากดหน้า Photoshop กับ JEdit สลับกันไปมาให้ตาลาย
(สำหรับน้องๆที่หาพิกัดภาพไม่เป็นให้ศึกษาจากบทความนี้ก่อนค่ะ [Renpy] 53. วิธีทำ Imagemap ภายในเกมส์
ขั้นตอนที่ 3
-ให้เปิดไฟล์ Screen.rpy ขึ้นมา และเลื่อนลูกลิ้งเม้าส์ลงล่างไปเรื่อยๆ จนกว่าจะพบกับ ชุดกลุ่มโค๊ดปรับแต่งหน้า Preferences
- ให้แดรกเม้าส์ครอบเลือกโค๊ดคำสั่งสำหรับปรับแต่งหน้า Preferences (แบบเดียวกับโค๊ดตัวอย่างด้านล่างนี้)ทั้งหมด และให้กดปุ่ม Delete เพื่อลบทิ้งค่ะ
- ####################################################################### Preferences
- #
- # Screen that allows the user to change the preferences.
- # http://www.renpy.org/doc/html/screen_special.html#prefereces
-
- screen preferences:
- tag menu
- # Include the navigation.
- use navigation
- # Put the navigation columns in a three-wide grid.
- grid 3 1:
- style_group "prefs"
- xfill True
- # The left column.
- vbox:
- frame:
- style_group "pref"
- has vbox
- label _("Display")
- textbutton _("Window") action Preference("display", "window")
- textbutton _("Fullscreen") action Preference("display", "fullscreen")
- frame:
- style_group "pref"
- has vbox
- label _("Transitions")
- textbutton _("All") action Preference("transitions", "all")
- textbutton _("None") action Preference("transitions", "none")
- frame:
- style_group "pref"
- has vbox
- label _("Text Speed")
- bar value Preference("text speed")
- frame:
- style_group "pref"
- has vbox
- textbutton _("Joystick...") action Preference("joystick")
- vbox:
- frame:
- style_group "pref"
- has vbox
- label _("Skip")
- textbutton _("Seen Messages") action Preference("skip", "seen")
- textbutton _("All Messages") action Preference("skip", "all")
- frame:
- style_group "pref"
- has vbox
- textbutton _("Begin Skipping") action Skip()
- frame:
- style_group "pref"
- has vbox
- label _("After Choices")
- textbutton _("Stop Skipping") action Preference("after choices", "stop")
- textbutton _("Keep Skipping") action Preference("after choices", "skip")
- frame:
- style_group "pref"
- has vbox
- label _("Auto-Forward Time")
- bar value Preference("auto-forward time")
- vbox:
- frame:
- style_group "pref"
- has vbox
- label _("Music Volume")
- bar value Preference("music volume")
- frame:
- style_group "pref"
- has vbox
- label _("Sound Volume")
- bar value Preference("sound volume")
- if config.sample_sound:
- textbutton "Test":
- action Play("sound", config.sample_sound)
- style "soundtest_button"
- frame:
- style_group "pref"
- has vbox
- label _("Voice Volume")
- bar value Preference("voice volume")
- if config.sample_voice:
- textbutton "Test":
- action Play("voice", config.sample_voice)
- style "soundtest_button"
- init -2 python:
- style.pref_frame.xfill = True
- style.pref_frame.xmargin = 5
- style.pref_frame.top_margin = 5
- style.pref_vbox.xfill = True
- style.pref_button.size_group = "pref"
- style.pref_button.xalign = 1.0
- style.pref_slider.xmaximum = 192
- style.pref_slider.xalign = 1.0
- style.soundtest_button.xalign = 1.0
- #####################################################################
(ลบโค๊ดด้านบนทิ้งให้หมดนะค่ะ)
ขั้นตอนที่ 4
- เปิดไฟล์ Options.rpy
- นำโค๊ดด้านล่างนี้ ไปวางไว้ที่ตำแหน่งล่างสุด
- แล้วก็ให้นำตัวเลขพิกัดตำแหน่งของเมนูปรับแต่งทุกตัว ที่จดไว้ในขั้นตอนที่ 2 มากรอกใส่ ลงโค๊ดใหม่
- ############### IMAGEMAP PREFERENCES ##########################
- #This block is responsible for the Imagemap based main menu
- screen preferences:
- tag menu
-
- imagemap:
- ground 'menu/preferences_ground.png'
- idle 'menu/preferences_idle.png'
- hover 'menu/preferences_hover.png'
- selected_idle 'menu/preferences_selected_idle.png'
- selected_hover 'menu/preferences_selected_hover.png'
- hotspot (54, 264, 190, 47) action Return() hover_sound "sound/click.wav"
- hotspot (54, 314, 190, 47) action ShowMenu('save') hover_sound "sound/click.wav"
- hotspot (54, 366, 190, 47) action ShowMenu('load') hover_sound "sound/click.wav"
- hotspot (54, 417, 190, 47) action ShowMenu('preferences') hover_sound "sound/click.wav"
- hotspot (54, 466, 190, 47) action MainMenu() hover_sound "sound/click.wav"
- hotspot (54, 519, 190, 47) action Quit() hover_sound "sound/click.wav"
- hotspot (356, 129, 174, 35) action Preference('display', 'window') hover_sound "sound/click.wav"
- hotspot (356, 172, 174, 35) action Preference('display', 'fullscreen') hover_sound "sound/click.wav"
- hotspot (356, 264, 174, 35) action Preference('transitions', 'none') hover_sound "sound/click.wav"
- hotspot (356, 310, 174, 35) action Preference('transitions', 'all') hover_sound "sound/click.wav"
- hotspot (-1, -1, -1, -1) action Preference('joystick') hover_sound "sound/click.wav"
- hotspot (356, 376, 174, 35) action Preference('begin skipping') hover_sound "sound/click.wav"
- hotbar (351, 505, 187, 23) value Preference('text speed')
- hotbar (351, 550, 187, 23) value Preference('auto-forward time')
- hotbar (567, 70, 199, 23) value Preference('music volume')
- hotbar (567, 132, 199, 23) value Preference('sound volume')
- hotbar (567, 199, 199, 23) value Preference('voice volume')
- hotspot (567, 305, 199, 39) action Preference('skip', 'seen') hover_sound "sound/click.wav"
- hotspot (567, 359, 199, 49) action Preference('skip', 'all') hover_sound "sound/click.wav"
- hotspot (567, 473, 199, 39) action Preference('after choices', 'stop') hover_sound "sound/click.wav"
- hotspot (567, 527, 199, 39) action Preference('after choices', 'skip') hover_sound "sound/click.wav"
ตัวอย่างการใส่โค๊ด....(คลิกที่ภาพเพื่อดูขนาดเต็ม)
- เมื่อใส่โค๊ดพิกัดตัวเลขของแต่ละเมนูเสร็จ ก็ให้บันทึกไฟล์ และทดสอบรันโปรแกรมดูค่ะ (เมื่อรันเกมส์แล้ว ที่หน้า Main menu ให้คลิกเลือกเมนู Preferneces เพื่อดูผลลัพธ์ที่ได้ค่ะ
บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น) |
|
โพสต์ 2019-11-30 18:00:36