[Renpy] 31. วิธีเปลี่ยน Background - Choice Menu

nooknazha

[Renpy] 31. วิธีเปลี่ยน Background - Choice Menu

ภาพด้านล่าง คือภาพเมนู Choice  หรือเมนูทางเลือกที่โปรแกรมสร้างมาให้เรานะค่ะ จะเห็นว่ามันไม่ค่อยสวยเท่าไหร่ -*-เพราะแบบนี้แหล่ะถึงต้อง Modify มันใหม่ หุหุ

ขั้นตอนที่ 1
ให้เตรียมภาพปุ่มChoice ไว้ 2ภาพ คือภาพปุ่มแบบปกติ (background ) และภาพปุ่มที่จะเปลี่ยนแปลงเมื่อเลื่อนเม้าส์มาวางทับ(hover) ทั้ง 2 ภาพให้บันทึกสกุลเป็น .png


(ภาพที่ 1)


(ภาพที่ 2)

ขั้นตอนที่ 2
เมื่อสร้างปุ่มเสร็จแล้วขั้นต่อไปก็ให้นำโค๊ดด้านล่างนี้ไปใส่ไว้ที่ไฟล์ options.rpy ค่ะ (อย่าลืมเปลี่ยนชื่อภาพ ให้เป็นชื่อที่เราบันทึกไว้ด้วยนะค่ะ)

1. 
   
2. ###################::::   Menu Choice    ::::############################
   
3.     style.menu_choice_button.background = Frame("Image1.png",25,15)
   
4.     style.menu_choice_button.hover_background = Frame("Image2.png",25,15)
   
5.     style.menu_choice_button.yminimum = 50 #<----ความกว้างของกรอบ
   
6.     style.menu_choice_button.xminimum = 450 #<---ความยาวของกรอบ
   

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

(ตัวอย่างการใส่โค๊ด....)

- จากนั้นก็ให้จัดความกว้าง*ยาวของกรอบว่าจะให้เล็กหรือใหญ่แค่ไหน
- เสร็จแล้วก็ให้บันทึกไฟล์แล้วให้ลองรันโปรแกรมดูก็จะได้ผลลัพธ์ออกมาเป็นแบบนี้ค่ะ


ขั้นตอนที่ 3
จากตัวอย่างข้างต้นเราจะเห็นว่ากรอบเมนู Choiceมันวางพาดทับบนตัวละครของเราทำให้ดูไม่สวย

- ให้เปิดไฟล์ screens.rpyขึ้นมาแล้วเลื่อนลูกลิ้งเม้าส์ลงไปเรื่อยๆ หาชุดโค๊ดสำหรับปรับแต่งตำแหน่งหน้าเมนูChoice เพิ่มเติม ดังตัวอย่างภาพด้านล่างนี้ค่ะ

(แก้ตัวเลขใหม่ซะเมนูจะได้ไม่บังทับภาพตัวละครอีก)

ส่วนการจัดให้ภาพตัวละครเลื่อนไปอยู่ที่ตำแหน่งซ้าย หรือ ขวา ก็จะใช้คำสั่งนี้ที่ไฟล์ script.rpy นะค่ะ

1. 
   
2. show m at right
   

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

และ

1. 
   
2. show m at left
   

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

"m" คือชื่อของตัวแปร(ภาพ)นั้นๆที่เรากำหนดไว้ในไฟล์ script.rpyก่อน label start:

หลังจากจัดตำแหน่งใหม่แล้วดูดีขึ้นเยอะเลย

ขอให้สนุกกับการสร้างเกมส์นะค่ะ... ^^"

***************************************

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