[เทคนิค] วิธีตกแต่งเมนูแสนง่าย + งามตามสไตล์คุณ

CREDIT : วอราม่อน~^ ^
========================
วิธีตกแต่งเมนูแสนง่าย + งามตามสไตล์คุณ
P.s. เหมาะสำหรับคนที่อ่านไหว + ชอบทำอะไรด้วยตัวเอง (เพราะงั้นไม่มี Demo สคริปที่เสร็จแล้วน้อ = =~ ทำตามขั้นตอนกันเอางิ)

Requirement สิ่งที่ต้องการ
- RPG Maker XP (คงมีกันอยู่แล้ว = =")
- โปรแกรมตกแต่งภาพ + ฝีมือการแต่งภาพนิดหน่อย
- ความคิดสร้างสรรค์ *O* ไม่มีก็หา ๆ เอา = =~

Result ผลงานที่จะทำได้หลังอ่านจบ
บทที่ 1

บทที่ 1: พื้นฐานการทำ Step by Step
1. หา/ทำรูปแบ็คกราวด์ขนาด 640*480 pixel มา 1 รูป~ ผมทำใน Photoshop ได้ออกมาเป็นรูปนี้~^^

2. Import เข้าไปในโฟลเดอร์ Picture ของเกม
จริง ๆ Import เข้าไปในโฟลเดอร์ไหนใน Graphic ก็ได้ แต่เพื่อความสะดวกของผม (เหว = =") + จัดรูปตรงตามหมวดหมู่ ก็ใส่ไปใน Picture ดีกว่านะครับ
3. กด F11 ในโปรแกรมเพื่อเรียก Script Editor ขึ้นมา (ที่ ๆ คุณเอาสคริปไปแปะกันนั่นแล~) มองทางลิสต์สคริปด้านซ้าย เลื่อนลงมาเรื่อย ๆ จนเจอส่วนที่ชื่อสคริปต์นำหน้าด้วย Scene_บลาๆ เยอะๆ

เลือกหน้าจอที่คุณต้องการใส่แบ็คกราวด์เข้าไป โดยผมจะอธิบาย Scene_... เฉพาะบางอันที่น่าใส่นะครับ~^^ (อันที่ไม่อธิบายไม่ได้หมายถึงไม่น่าใส่ แต่อาจใส่ไม่ได้/ไม่ควรใส่ อะไรประมาณนั้น)

Scene_Menu - หน้าเมนูหลัก (เหมือนในรูปตัวอย่างผลงานที่เสร็จแล้วด้านบน)
Scene_Item - หน้าจอเลือกดู/ใช้ไอเทม
Scene_Skill - หน้าจอเลือกดู/ใช้สกิล
Scene_Equip - หน้าจอเลือกสวมใส่ชุด
Scene_Status - หน้าจอบอกค่าสเตตัสของตัวละคร
Scene_File - หน้าจอเซฟ/โหลดเกม
Scene_End - หน้าจอตอนเลือก End Game (คำสั่งสุดท้ายในเมนูหลัก)
Scene_Shop - หน้าจอตอนเลือกซื้อของ/ขายของ
Scene_Name - หน้าจอตั้งชื่อตัวละคร

4. ไปที่สคริป Scene_ ที่คุณเลือก เช่น ผมจะใส่แบ็คกราวด์ในหน้าเมนูหลัก ผมก็ไปที่ Scene_Menu
จากนั้นหาบรรทัดที่เขียนว่า def main ปกติจะอยู่บน ๆ เลย
สำหรับกรณีที่จะใส่ในเมนูหลักเหมือนของผม ใน Scene_Menu (ใน RGSS ที่ไม่ได้แก้อะไรเลยนะ) อยู่บรรทัดที่ 18

Tip!: คุณสามารถกด Ctrl+F เพื่อค้นหาคำที่ต้องการในสคริปต์อันที่เลือกอยู่ได้ (Ctrl + Shift + F เพื่อค้นหาในสคริปต์ทั้งเกม) และสามารถกด Ctrl+G เพื่อโดดข้ามไปยังเลขบรรทัดในสคริปที่ต้องการได้

ใส่สคริปด้านล่างนี้ลงไปใต้บรรทัด def main เลยครับผม~^^

# **Add Background
viewport = Viewport.new(0,0,640,480)
@bg = Sprite.new(viewport)
@bg.bitmap = RPG::Cache.picture("ชื่อไฟล์รูป")

บรรทัดแรกเป็นคอมเม้นท์ (มี # นำหน้า ถ้าใส่ไว้ตรงไหน ทุกอย่างในบรรทัดนั้นที่อยู่ด้านหลัง # จะถือเป็นคอมเม้นท์หมด) ไม่ต้องใส่ก็ได้ แต่ผมใส่ไว้เพื่อจะได้รู้น่ะครับ
ส่วนบรรทัดที่ 2 ตรง (0,0,640,480) คือ (พิกัด x, พิกัด y, ความกว้างรูป, ความยาวรูป) ครับ ในที่นี้ผมใช้รูปขนาด 640*480 และต้องการให้มุมซ้ายบนของรูปอยู่ที่ตำแหน่งซ้ายบนสุด
(พิกัด x,y นี่เค้านับ 0,0 ที่มุมซ้ายบนสุดครับ และเวลาวางภาพ มันจะวางจากมุมซ้ายบนสุดของภาพในพิกัดที่เรากำหนด <= อาจงงนิด เอาเป็นว่าลองทดสอบเปลี่ยนเลขพิกัด x,y ด้วยตัวเองอาจจะเข้าใจง่ายกว่าครับ)
สำหรับบรรทัดสุดท้าย ตรงชื่อ "ไฟล์รูป" ให้ใส่ชื่อรูปโดยไม่ต้องมีนามสกุลไฟล์ เข้าไปครับ รูปต้องเก็บไว้ในโฟลเดอร์ Picture ของเกมด้วยน้อ เช่น รูปที่ผมใช้ชื่อ bj1.png ก็ใส่ไปแบบนี้:

@bg.bitmap = RPG::Cache.picture("bj1")

5. ด้านบนเราได้ประกาศเรียกแบ็คกราวด์มาแล้ว ทีนี้เราต้องไปทำให้มันปรากฏขึ้นก่อนครับ~^^
ให้ไปหาบรรทัดที่เขียนว่า

Graphics.freeze

บรรทัดนี้ ตามปกติจะอยู่ก่อนถึงบรรทัด def update นิดหน่อยครับ
ตัวอย่างเช่นใน Scene_Menu ที่ผมใส่สคริปประกาศแบ็คกราวด์ในข้อ 4 ไปแล้ว Graphics.freeze จะอยู่ในบรรทัดที่ 83 ครับ
ใส่บรรทัดนี้เข้าไปใต้ Graphics.freeze เลยครับ

@bg.dispose

@บลา ๆ.dispose เป็นคำสั่งสำหรับ แสดง/ซ่อน วินโดว์นั้น ๆ ครับ^^ ตอนเราประกาศมันจะยังไม่แสดง เพราะงั้นต้องทำให้แสดงก่อน~
6. ถ้าเทสเกมตอนนี้เราจะยังไม่เห็นรูปแบ็คกราวด์ครับ เพราะหน้าต่างบังไว้หมด = =" เพราะงั้นขั้นตอนนี้เราจะไปปรับให้หน้าต่างโปร่งใสครับ~ จะได้มองเห็นแบ็คกราวด์ด้านหลัง^^

[hide]

#==============================================================================
# * Scene_Menu
#------------------------------------------------------------------------------
# 　It is the class which processes the menu screen.
#==============================================================================
class Scene_Menu
#--------------------------------------------------------------------------
# - Object initialization
# menu_index : Cursor initial position of command
#--------------------------------------------------------------------------
def initialize(menu_index = 0)
@menu_index = menu_index
end
#--------------------------------------------------------------------------
# - Main processing
#--------------------------------------------------------------------------
def main
# **Add Background
viewport = Viewport.new(0,0,640,480)
@bg = Sprite.new(viewport)
@bg.bitmap = RPG::Cache.picture("bj1")
# Drawing up the command window
s1 = $data_system.words.item
s2 = $data_system.words.skill
s3 = $data_system.words.equip
s4 = "Status"
s5 = "Save"
s6 = "End Game"
@command_window = Window_Command.new(160, [s1, s2, s3, s4, s5, s6])
@command_window.index = @menu_index
# When party number of people 0 is
if $game_party.actors.size == 0
# Nullifying the item, skill, equipment and status
@command_window.disable_item(0)
@command_window.disable_item(1)
@command_window.disable_item(2)
@command_window.disable_item(3)
end
# In case of saving prohibition
if $game_system.save_disabled
# Saving is made invalid
@command_window.disable_item(4)
end
# Drawing up the play time window
@playtime_window = Window_PlayTime.new
@playtime_window.x = 0
@playtime_window.y = 224
# Drawing up step several windows
@steps_window = Window_Steps.new
@steps_window.x = 0
@steps_window.y = 320
# Drawing up the Goldwyn dough
@gold_window = Window_Gold.new
@gold_window.x = 0
@gold_window.y = 416
# Drawing up the status window
@status_window = Window_MenuStatus.new
@status_window.x = 160
@status_window.y = 0
#**Add Opacity
@command_window.opacity = 160
@playtime_window.opacity = 160
@steps_window.opacity = 160
@gold_window.opacity = 160
@status_window.opacity = 160
# Execute transition
# Transition execution
Graphics.transition
# Main loop
loop do
# Renewing the game picture
Graphics.update
# Updating the information of input
Input.update
# フレーム更新
update
# When the picture changes, discontinuing the loop
if $scene != self
break
end
end
# Transition preparation
Graphics.freeze
# Dispose of windows
@bg.dispose
# Releasing the window
@command_window.dispose
@playtime_window.dispose
@steps_window.dispose
@gold_window.dispose
@status_window.dispose
end
#--------------------------------------------------------------------------
# - Frame renewal
#--------------------------------------------------------------------------
def update
# Renewing the window
@command_window.update
@playtime_window.update
@steps_window.update
@gold_window.update
@status_window.update
# When the command window is active,: Update_command is called
if @command_window.active
update_command
return
end
# When the status window is active,: Update_status is called
if @status_window.active
update_status
return
end
end
#--------------------------------------------------------------------------
# - When frame renewal (the command window is active)
#--------------------------------------------------------------------------
def update_command
# The B when button is pushed
if Input.trigger?(Input::B)
# Performing cancellation SE
$game_system.se_play($data_system.cancel_se)
# Change to map picture
$scene = Scene_Map.new
return
end
# When C button is pushed
if Input.trigger?(Input::C)
# When party number of people with 0, it is command other than saving and game end
if $game_party.actors.size == 0 and @command_window.index < 4
# Performing buzzer SE
$game_system.se_play($data_system.buzzer_se)
return
end
# It diverges at cursor position of the command window
case @command_window.index
when 0 # Item
# Performing decision SE
$game_system.se_play($data_system.decision_se)
# Change to item picture
$scene = Scene_Item.new
when 1 # Skill
# Performing decision SE
$game_system.se_play($data_system.decision_se)
# The status window is made active
@command_window.active = false
@status_window.active = true
@status_window.index = 0
when 2 # Equipment
# Performing decision SE
$game_system.se_play($data_system.decision_se)
# The status window is made active
@command_window.active = false
@status_window.active = true
@status_window.index = 0
when 3 # Status
# Performing decision SE
$game_system.se_play($data_system.decision_se)
# The status window is made active
@command_window.active = false
@status_window.active = true
@status_window.index = 0
when 4 # Saving
# In case of saving prohibition
if $game_system.save_disabled
# Performing buzzer SE
$game_system.se_play($data_system.buzzer_se)
return
end
# Performing decision SE
$game_system.se_play($data_system.decision_se)
# Change to saving picture
$scene = Scene_Save.new
when 5 # Game end
# Performing decision SE
$game_system.se_play($data_system.decision_se)
# Change to game end picture
$scene = Scene_End.new
end
return
end
end
#--------------------------------------------------------------------------
# - When frame renewal (the status window is active)
#--------------------------------------------------------------------------
def update_status
# The B when button is pushed
if Input.trigger?(Input::B)
# Performing cancellation SE
$game_system.se_play($data_system.cancel_se)
# The command window is made active
@command_window.active = true
@status_window.active = false
@status_window.index = -1
return
end
# When C button is pushed
if Input.trigger?(Input::C)
# It diverges at cursor position of the command window
case @command_window.index
when 1 # Skill
# When conduct restriction of this actor is 2 or more
if $game_party.actors[@status_window.index].restriction >= 2
# Performing buzzer SE
$game_system.se_play($data_system.buzzer_se)
return
end
# Performing decision SE
$game_system.se_play($data_system.decision_se)
# Change to skill picture
$scene = Scene_Skill.new(@status_window.index)
when 2 # Equipment
# Performing decision SE
$game_system.se_play($data_system.decision_se)
# Change to equipment picture
$scene = Scene_Equip.new(@status_window.index)
when 3 # Status
# Performing decision SE
$game_system.se_play($data_system.decision_se)
# Change to status picture
$scene = Scene_Status.new(@status_window.index)
end
return
end
end
end

[/hide]
ข้อสังเกตุ
ในเมื่อทำสคริปสำเร็จรูปมาให้คุณแล้ว สิ่งที่คุณต้องทำมีเพียง
1.สคริปนี้ให้เอาไปวางใต้ Scene_Menu ตัวเก่า(หรือลบแล้ววางทับไปเลยก็ได้)
2.จำไว้ว่าเปลี่ยนรูปบรรทัดที่21 จาก "bj1" เป็น "ชื่อรูป" ในโฟลเดอร์ Pictures
3.อย่าลืมทำGraphicงามๆ มิฉะนั้นถ้าไม่งามก็อย่าทำเลย-3-