 |
บุคคลทั่วไป: 3
ไม่มีสมาชิกขณะนี้
สมาชิกทั้งหมด: 43
ยังไม่ยืนยัน: 0
สมาชิกล่าสุด: anyka
|
|
|
|
Renpy Programming การปรับแต่ง Layout หน้าจอของเกมส์ ตอนที่ 1 (main menu และ navigation)
|
|
|
สวัสดีทุกท่าน เป็นยังไงกันบ้างจ๊ะ...... หลังจากหายหน้าหายตาไปนานเกือบปีสำหรัวเนื้อบทความการสอนการใช้งานโ ปรแกรม Renpy อันที่จริงแล้วช่วงี้ผมผมตัดสินใจที่จะรียนต่อน่ะ นึกไม่ถึงว่ามันจะนำพาความทุกข์ยากมาสู่ชีวิตได้อย่างแสนสาหัสมากขนาดนี้แทบจะไม่มีเวลาทำอะไรเลยพอทำงานเสร็จห็จะต้องรีบเคลียงานที่มหาลัยต่อ ปวดหัวมั่กๆ
เอาล่ะหลังจากบ่นเสร็จแล้วเรามาดูเนื้อหาของเรากันก่อนดีกว่านะ สำหรับเนื้อหาในคราวนี้นั้นจะขอเอ่ยกล่าวในเรื่องเนื้อหาเกี่ยวกับการปรับแต่ง Layout หน้าจอของเกมส์กันนะครับ ซึ่งโดยเนื้อหาแล้วไม่มีอะไรยาก แต่ก็เยอะพอสมควร ผมเลยขอค่อยๆทะยอยออกมาเป็นตอนๆละกันครับ
Layout นั้นก็คือส่วนหน้าตาของเมนูต่างๆที่ไว้ใช้กำหนดการทำงานหรือทางเลือกต่างๆของระบบเกมส์ ซึ่งแบ่งเป็น 6 ชนิดด้วยกันคือ
1) main_menu เป็น Layout ส่วนเมนูหลักของเกมส์
2) navigation เป็น Layout หน้าจอในส่วนของปุม Menu ต่างๆ ในหย้า Load - Save Game เช่น ปุ่ม return หรือ ปุ่มQuit เป็นต้น
3) load_save หน้าจอ Save - Load เกมส์เหมือนกัน แต่จะเป็นในลักษณะองค์ประกอบต่างของหน้า Save เช่น ช่อง Save หรือ หน้า save
4) yesno_prompt หน้าจอ Menu yes-no ตอนที่เราจะออกจากเกมส์
5) preferences หน้าจอ Menu ในส่วน Option
6) joystick_preferences หน้าจอ Config ในส่วนของ JoyStick
ส่วนสำหรับการกำหนดค่าการทำงานต่างๆของ Layout นั้น เราจะเขียน Script ต ัวนี้อยู่่ในไฟล์ Option.rpy นะครับ ให้เขียนอยู่ที่บนสุดของไฟล์เลย
โดยที่เราจะเขียน function เพื่อกำหนดคุณลักษณะต่างๆของ Layout ไว้ภายใต้คำสั่ง inti -2 : ครับ
init -2 :
<--- คำสั่งต่างๆ -->
รายละเอียดฟังก์ชั่นต่างๆของ Layout แต่ละชนิด
main_menu layouts ประกอบไปด้วยกลุ่มฟังก์ชั่นต่างๆ ดังนี้
layout.classic_main_menu ()
เป็นการกำหนดให้ Layout ของ Menu แสดงอยู่ในรูปแบบมาตรฐานเดิมๆ หลายคนคงนึกในใจว่า"ตอนแรกไม่ต้องกำหนดอะไรก็เป็นรูปแบบอย่างงี้อยู่แล้วแล้วจะมีฟังก์ชั่นให้ประกาศอีกทีเ_ยอะไร" อย่าคิดดังครับใจเย็นๆ ส่วนใหญ่ฟังก์ชันอย่างงี้จะมีประโยชน์สำหรับเกมส์ในลักษะที่มีหลายๆโหมดในการเล่นน่ะครับเช่น เล่นจบ1รอบ ก็จะมีโหมดใหม่มาเพิ่มอีกหนึ่งโหมด เป็นต้นครับ ดังนั้นจึงต้องมีการตรวจสอบว่าเล่นจบไปแล้วรึยัง ถ้าจบแล้ว1รอบก็ขึ้นอีกหน้า menu นึงที่เราทำเองขึ้นมาแต่ถ้าถ้ายังเล่ไม่จบก็ให้ข้นเป็นหน้า Classic อย่างงี้ไปก่อน
โดยมีหลักการใช้งานดังนี้
init -2 python:
layout.classic_main_menu ()
layout.grouped_main_menu ()
เป็นฟังก์ชั่นที่ใช้กำหนดการเรียงตัวของตัวเลือกภายใน Main Menu โดยเราต้องเรียกใช้งานค่าตัวแปรออกมา ตัวนึงเพื่อกำหนดลักษณะการเรียงตัวกันของปุ่ม Menu ตัวแปรที่เราใช้งานตัวนี้มีชื่อว่า config.main_menu_per_group โดยมีหลักการใช้งานดังนี้
init -2 python:
layout.grouped_main_menu ()
config.main_menu_per_group = 3 <---- นอนเรียงกัน 3 ปุ่ม
โดยที่เลข 3 หมายถึงจำนวนแถที่จะแสดงในแนวนอน
layout.imagemap_main_menu (ground, selected, hotspots)
เป็น Function ที่ใช้ในการกำหนดพื้นหลังและตำแหน่งของปุ่มใน Main Menu โดยจะมี Parameter ต่างๆที่ใช้งาน ดังนี้
ground - รูปพื้นหลังของ Main Menu.
selected - ตัวนี้จะเป็นLayer ที่ซ่อนอยู่หลัง ground อีกทีครับ (ตอนสร้างก็ออกแบบกะให้แม่นๆหน่อยละกัน). ซึ่งจะเป็นรูปของปุ่มตอนเอาเมาส์วางไว้บนพื้นที่ที่เรากำหนด(ก็ปุ่มนั่นแหล่ะ)
hotspots - เป็นชุดเซ็ตของข้อมูลในการกำหนดคุณสมบัติเกี่ยวกับพื้นที่ที่เป็นปุ่มกด(จะกำหนดมีกี่ชุดกได้แล้วแต่ความต้องการ) ดังนี้:
(จุดซ้ายสุด,จุดบนสุด,จุดขวาสุด,จุดล่างสุด,"ชื่อปลายทางที่จะลิงค์ไป")
หมายเหตุ จุดที่กำหนดตำแหน่งที่เป็นปุ่มนั้น มีค่าเป็น Pixcel โดยเริ่มค่า 0,0 ที่จุดซ้ายบนของหน้าจอ
หมายเหตุ ชื่อปลายทางที่จะลิงค์ไป นั้นอาจจะเป็นชื่อของ Label ของโปรแกรมหน้าไหนก็ได้ที่ เราต้องการให้ Menu ของเรา Jump ไปยังจุดนั้นๆ เมื่อมีการคลิ๊กปุ่มตำแหน่งที่เรากำหนด
ข้อควรรู้เล็กน้อย จุดหมายปลายทางที่เราจะวิ่งไปหานั้นจะมีค่ามาตรฐานอยู่ หมายถึง ปลายทางทั่วไปที่ทางเกมส์กำหนดมาให้ตั้งแต่ต้นอยู่แล้ว อันได้แก่
Start Game ---> จะวิ่งไปยัง Label Start ของเกมส์
Load Game ---> จะวิ่งไปยังหน้า Menu โหลดเกมส์
Preferences ---> จะวิ่งไปยังหน้า Option ของเกมส์
Quit ---> ออกจากเกมส์
โดยมีหลักการใช้งาน ดังนี้ (เราจะประกาศอยู่ในหน้า Option.rpy นะคร้าบบบบบ)
init -2 python:
layout.imagemap_main_menu("menu2.jpg", "menu1.jpg", [
(111, 248, 392 ,313, "Start Game"),
(111, 313, 392, 378, "Load Game"),
(48, 432, 237, 529, "Preferences"),
(48,529,237,576, "Quit")
])
ซึ่งเราจะใช้เทคนิคนี้ประยุกต์การใช้งานในเรื่องการสร้าง Gallary ต่อไป
navigation layouts ประกอบไปด้วยกลุ่มฟังก์ชั่นต่างๆ ดังนี้
layout.classic_navigation ()
เป็นการกำหนดให้ Layout ของ navigation ซึ่งจะแสดงอยู่ในรูปแบบมาตรฐานเดิมๆ รายละเอียดก็จะคล้ายๆของ layout.classic_main_menu () ้อนกลับไปดูเอง
layout.grouped_navigation ()
เป็นฟังก์ชั่นที่ใช้กำหนดการเรียงตัวของตัวเลือกภายใน Main Menu โดยเราต้องเรียกใช้งานค่าตัวแปรออกมา ตัวนึงเพื่อกำหนดลักษณะการเรียงตัวกันของปุ่ม Menu ตัวแปรที่เราใช้งานตัวนี้มีชื่อว่า config.navigation_per_group โดยมีหลักการใช้งานดังนี้
init -2 python:
layout.grouped_main_menu ()
config.navigation_per_group = 3 <---- นอนเรียงกัน 3 ปุ่ม
โดยที่เลข 3 หมายถึงจำนวนแถที่จะแสดงในแนวนอน
layout.imagemap_navigation (ground, idle, hover, selected_idle, selected_hover, hotspots)
เป็น Function ที่ใช้ในการกำหนดพื้นหลังและตำแหน่งของปุ่มใน navigation โดยจะมี Parameter ต่างๆที่ใช้งาน ดังนี้
ground - รูปพื้นหลังของหน้า navigation.
idle - รูปปุ่มตอนที่ยังไม่ได้เอาเมาส์ไปวางข้างบนปุ่ม ในกรณีที่
hover - รูปปุ่มตอนที่เอาเมาส์ไปวางข้างบนปุ่ม
selected_idle - รูปปุ่มตอนที่ยังไม่ได้เอาเมาส์ไปวางข้างบนปุ่ม (ในกรณีที่ปุ่มนี้กำลังอ้างถึงหน้านี้อยู่)
selected_hover - รูปปุ่มตอนที่เอาเมาส์ไปวางข้างบนปุ่ม (ในกรณีที่ปุ่มนี้กำลังอ้างถึงหน้านี้อยู่)
หมายเหตุ selected_hover,selected_idle ไม่ค่อยจำเป็นถ้าไม่ได้ทำ option หรือ gallary อยู่ในหน้าเดียวกัน ดังนั้นในบางครั้งก็ประกาศให้ ตัวแปร selected_idle ใช้ภาพเดียวกับ idle และตัวแปร selected_hover ใช้ภาพเดียวกับ hover ไปได้เลยก็ได้
hotspots - เป็นชุดเซ็ตของข้อมูลในการกำหนดคุณสมบัติเกี่ยวกับพื้นที่ที่เป็นปุ่มกด(จะกำหนดมีกี่ชุดก็ได้แล้วแต่ความต้องการ) ดังนี้:
(จุดซ้ายสุด,จุดบนสุด,จุดขวาสุด,จุดล่างสุด,"ชื่อปลายทางที่จะลิงค์ไป")
หมายเหตุ จุดที่กำหนดตำแหน่งที่เป็นปุ่มนั้น มีค่าเป็น Pixcel โดยเริ่มค่า 0,0 ที่จุดซ้ายบนของหน้าจอ
หมายเหตุ ชื่อปลายทางที่จะลิงค์ไป นั้นอาจจะเป็นชื่อของ Label ของโปรแกรมหน้าไหนก็ได้ที่ เราต้องการให้ Menu ของเรา Jump ไปยังจุดนั้นๆ เมื่อมีการคลิ๊กปุ่มตำแหน่งที่เรากำหนด
ข้อควรรู้เล็กน้อย จุดหมายปลายทางที่เราจะวิ่งไปหานั้นในส่วนนี้จำเป็นที่จะต้องอ้างอิงตามชื่อของปุ่มที่เราจำจะอ้างถึง ซึ่งจำเป็นต้องกำหนดคุณสมบัติของปุ่มเองครับ ในส่วนนี้ผมขอยังไม่แจงรายละเอียดอะไรมากครับ(เพราะไม่รู้ 5555)เพราะมันเป็นเรื่องของ UI Function ครับยังศึกษาไม่หมดเลย - -"
โดยปกติปุ่มที่เกมส์กำหนดมาให้ในส่วนนี้นั้นก็จะมี
Return ---> จะวิ่งไปยัง Mainmenu ของเกมส์
Load Game ---> จะวิ่งไปยังหน้า Menu โหลดเกมส์
Preferences ---> จะวิ่งไปยังหน้า Option ของเกมส์
Quit ---> ออกจากเกมส์
โดยมีหลักการใช้งาน ดังนี้ (เราจะประกาศอยู่ในหน้า Option.rpy นะคร้าบบบบบ)
init -2 python:
layout.imagemap_navigation ("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", [
(26, 485, 168, 535, "Return"),
(245, 485, 410, 535, "Load Game"),
(104, 535, 286, 589, "Preferences"),
(675, 535, 790, 589, "Quit")]
)
สำหรับในส่วนแรกผมขอจบแต่เพียงเท่านี้ก่อนนะครับเพราะคิดว่าถ้ากั๊กไว้นานกว่านี้จนเสร็จทั้งบทผมคงโดนมิใช่น้อยแน่ๆ แล้วจะค่อยๆทะยอยมาลงเรื่อยๆครับ ใครยังติดปัญหาอะไรก็เข้ามาถามได้เรื่อยๆนะครับ ถ้าเป็นเรื่อที่ไม่ใหญ่มากผมก็จะอธิบายในกระทู้ให้ครับ แต่ถ้ามันใหญ่มากจริงๆผมก็จะขอติดไว้เป็นบทความในเรื่องต่อไปนะครับ
|
|
|
โดย vashiya
เมื่อ June 15 2009 22:08:35
(280) อ่าน พิมพ์
|
|
|
|
© 2007 - 2010 thaiaat.com
|
|
|
|
Powered by  v6.00.109 ฉ 2003-2005
Theme Elephant v1.00 
|
|
|
