สมุดบันทึกของท่านวา~~~

กลับมาแล้วจ้าตอนนี้ต้องรีบเร่งที่จะขนย้ายเอาเนื้อหาจากเว็บเดิมมาลงที่นี่ให้หมดดูไปดูมาตอนแรกก็ว่ามีอยู่นิดเดียวอ่ะนะแต่พอเอาเข้าจริงๆ เออ...   ก็ว่าเยอะเหมือนกันนะนี่แล้วไหนจะต้องมา Update เนื้อหาใหม่ในแต่ละบทอีกล่ะโอย....
เพื่อไม่ให้เสียเวลาเรามาเริ่มกันเลยดีกว่า

· กลุ่มคำสั่งที่เกี่ยวกับการจัดการกรอบคำพูด

style.window.background = Frame("frame.png", 12, 12) เป็นการกำหนดค่าของกรอบคำพูดโดยใช้ฟังก์ชัน Frame เป็นตัวกำหนด. ฟังก์ชัน Frame นั้นจะมีพารามิเตอร์อยู่ 3 ตัวคือ 

ตัวที่1. จะเป็นตัวที่กำหนดรูป Background ของกรอบคำพูดว่าเป็นรูปไหนในที่นี้จะกำหนดให้ใช้รูปที่ชื่อว่า frame.png หากคุณต้องการที่จะใช้รูปอื่นก็สามารถเปลี่ยนชื่อตามที่คุณต้องการได้นะจ๊ะ 

ส่วนตัวที่2และ3 จะเป็นตัวที่จะกำหนดขนาดของกรอบ โดยที่ตัวที่ 2 จะกำหนดความหนาทางด้านซ้ายและขวาของกรอบคำพูดและตัวที่ 3 จะกำหนดความหนาทางด้านบนและล่างของกรอบคำพูด(กำหนดไว้ตามทีมันให้มาดีที่สุตแต่จะปรับแต่งเองก็อีกเรื่องนึง)

style.window.left_margin = 6 กำหนดตำแหน่งความห่างทางซ้ายระหว่างขอบwindowกับกรอบคำพูด

style.window.right_margin = 6 กำหนดตำแหน่งความห่างทางขวาระหว่างขอบwindowกับกรอบคำพูด

style.window.top_margin = 6 กำหนดตำแหน่งความห่างทางด้านบนระหว่างขอบwindowกับกรอบคำพูด

style.window.bottom_margin = 6 กำหนดตำแหน่งความห่างทางด้านล่างระหว่างขอบwindowกับกรอบคำพูด

style.window.left_padding = 6 กำหนดตำแหน่งความห่างทางซ้ายระหว่างกรอบคำพูดกับข้อความในกรอบคำพูด

style.window.right_padding = 6 กำหนดตำแหน่งความห่างทางขวาระหว่างกรอบคำพูดกับข้อความในกรอบคำพูด

style.window.top_padding = 6 กำหนดตำแหน่งความห่างทางด้านบนระหว่างกรอบคำพูดกับข้อความในกรอบคำพูด 

style.window.bottom_padding = 6 กำหนดตำแหน่งความห่างทางด้านล่างระหว่างกรอบคำพูดกับข้อความในกรอบคำพูด

style.window.yminimum = 250 กำหนดความสูงของกรอบคำพูด จากตัวอย่างจะกำหนดให้ความสูงของกรอบคำพูดอยู่ที่ 250 พิกเซล (เราจะเรียกใช้คำสั่งนี้หรือไม่ก็ได้)

· กลุ่มของคำสั่งที่เกี่ยวกับการกำหนดตำแหน่งการวางของหน้าจอ Menu ตอนไตเติ้ลเกมส์ 

คุณสามารถเลือกใช้ได้ 2 แบบ คือ 

1. แบบที่จะต้องเขียนเองในส่วนนี้นั้นคุณจำเป็นที่จะต้องไปเขียนเพิ่มเติมกันเอาเองนะครับโดยที่ จะต้องเพิ่มไว้ตรงท้ายนอกวงเล็บ ” ) ”ของฟังก์ชัน theme.roundrect ซึ่งเราได้เคยกล่าวไว้แล้วจากครั้งก่อน (อันที่จริงแล้วเราจะวางไว้ตรงไหนก็ได้อ่ะนะแต่ผมว่าวางไว้ตรงนี้มันมองเห็นง่ายดีไม่มั่วด้วยล่ะ เหอ...เหอ...เหอ...) 

style.mm_menu_window.yanchor = 0 กำหนดแกนYโดยใช้ตำแหน่งกึ่งกลางเมนูเป็นหลัก
style.mm_menu_window.ypos = 0.05 กำหนดแกนYโดยใช้มุมบนซ้ายเป็นหลัก
style.mm_menu_window.xanchor = 0 กำหนดแกนXโดยใช้ตำแหน่งกึ่งกลางเมนูเป็นหลัก
style.mm_menu_window.xpos = 0.05 กำหนดแกนXโดยใช้มุมบนซ้ายเป็นหลัก 

2. แก้ไขจากตัวโค๊ดที่มีให้อยู่แล้ว ดังรูป

style.mm_menu_frame.xpos = 0.5 กำหนดแกนXโดยใช้มุมบนซ้ายเป็นหลัก 
style.mm_menu_frame.xanchor = 0.5 กำหนดแกนXโดยใช้ตำแหน่งกึ่งกลางเมนูเป็นหลัก
style.mm_menu_frame.ypos = 0.75 กำหนดแกนYโดยใช้มุมบนซ้ายเป็นหลัก
style.mm_menu_frame.yanchor = 0.5 กำหนดแกนYโดยใช้ตำแหน่งกึ่งกลางเมนูเป็นหลัก





ปล. ทั้ง 2 คำสั่งนี้ทำงานเหมือนกันแล้วแต่ว่าใครอยากจะเรียกใช้ตัวไหนละกัน หากเรากำหนดเอา 2 ค่านี้ไว้พร้อมกัน เช่น 
style.mm_menu_frame.xpos = 40 style.mm_menu_frame.xanchor = 100

ผลที่ได้ออกมาก็คือมุมซ้ายบนของ Menu จะไปหรากฎอยู่บนแนวแกน x ที่ -60เนื่องจากจะเกิดการหักล้างค่ากันนั่นเองโดยมีสูตรการคิดดังนี้ 

ตำแหน่งแกนXหรือyบนมุมซ้ายบนที่แสดงจริงๆ = ตำแหน่งแกนxหรือyที่มุมซ้ายบน - ตำแหน่งแกนxหรือyในตำแหน่งกึ่งกลางเมนูเป็นหลัก 

ค่าของตัวเลขที่เราจะต้องกำหนดในส่วนนี้สามารถกำหนดได้ 2 แบบคือ ถ้ากำหนดเป็นตัวเลขจำนวนเต็มมันจะกำหนดค่าตำแหน่งที่แสดงผลออกมาเป็นหน่วยพิกเซล แต่ถ้าใส่เป็นค่าทศนิยมมันจะแสดงผลตำแหน่งออกมาเป็นหน่วย นิ้ว (int) 

· กลุ่มคำสั่งที่กำหนด Font และขนาดของตัวอักษร(ถ้าคิดจะเปิดใช้งานคำสั่งนี้ต้องเปิดใช้งานพร้อมกันทั้งคู่นะจ๊ะ)

style.default.font = "DejaVuSans.ttf" กำหนดชนิดของ Font ที่จะใช้งาน
fontstyle.default.size = 30 กำหนดขนาดของตัวอักษร 



· ต่อมาก็จะเป็นส่วนของการกำหนดค่าเกี่ยวกับเสียง
config.has_sound = True/ False อนุญาตให้ใช้
sound effectsconfig.has_music = True/ False อนุญาตให้ใช้เพลงประกอบ
config.has_voice = True/ False อนุญาตให้ใช้เสียงต่างๆ เช่นเสียงพูด
style.button.activate_sound = "click.wav" เสียงปุ่มกดทั่วไป
style.imagemap.activate_sound = "click.wav" เสียงปุ่มกดของimage map(รูปภาพที่กดได้)
config.enter_sound = "click.wav" เสียงปุ่มกดตอนเข้าเกมส์ 
config.exit_sound = "click.wav" เสียงปุ่มกดตอนออกจากเกมส์
config.sample_sound = "click.wav" เสียงปุ่มกดเพื่อทดลองเสียงในส่วน option
optionconfig.main_menu_music = "main_menu_theme.ogg" เพลงไตเติ้ลตอนหน้า menu เกมส์ 




Tip เล็กน้อย สำหรับการกำหนดค่า 

ในบางครั้งเมื่อเราทำการลบ เครื่องหมาย # ออกไปเพื่อที่จะทำการกำหนดค่านั้น เมื่อลบไปแล้วจึงทำการรันเกมส์ใหม่แต่ไหง มันขึ้นว่า “ SyntaxError: invalid syntax (line XXX) ” ได้ล่ะนี่ คุณอาจจะนึกในใจว่า อีตาคนสอนมันมั่ว หรือว่าโปรแกรมมันยังไม่สมบูรณ์กันแน่วะ (5555ผมได้ยินนะ) ใจเย็นๆครับอับดุนแก้ได้(5555) เนื่องจากว่ารูปแบบของไวยากรณ์ภาษานี้อาจจะออกบ๊องๆหน่อย คือว่าเมื่อคุณทำการลบเครื่องหมาย # ออกแล้วให้คุณทำการล่นย่อหน้าเข้ามา ก็คือล่นย่อหน้าเข้ามาให้อยู่ในคอลัมน์ที่9เท่านั้นเองน่ะครับ เท่านี้เองการปรับแต่งค่าของพวกคุณก็ผ่านฉลุยไม่มีคำเตือน Error โผล่ขึ้นมาให้คุณหงุดหงิดใจอีกต่อไป............

config.enter_transition = None รูปแบบ(ประมาณว่าเอฟเฟ็กน่ะแหล่ะ)ในการตัดฉากจากหน้าจอเกมส์เข้าสู่หน้าจอ Menu ภายในเกมส์ถ้าไม่มี(None) ก็แสดงว่าเข้าสู่ Menu ภายในเกมส์เลย ไม่มีอะไรที่วุบวับวืบวาบหวือหวา...... เป็นต้น 

config.window_show_transition = None เป็นเอฟเฟ็กในการปรากฏกรอบคำพูดขึ้นมา (คำสั้งในการสั่งให้กรอบรูปปรากฏขึ้นมาใช้ window show นะครับ)

config.window_hide_transition = None เป็นเอฟเฟ็กการตักฉากซ่อนกรอบคำพูดออกไปจากหน้าจอครับ (คำสั่งในการซ่อนกรอบรูปใช้ คำสั่ง window hide ครับ)

เอาล่ะก็จบลงไปแล้วสำหรับบทแรกของเรา.....หลังจากที่ท่านทั้งหลายได้ลองอ่านบทความนี้แล้วหลายท่านก็คงนึกอยู่ในใจว่ายังไม่เห็นจะมีการใส่ภาพหรืออะไรลงไปเลย ใจเย็นๆครับพี่น้องบทแรกที่ผมจะกล่าวนำก็คือการกำหนดค่าต่างๆก่อนที่จะสร้างเกมส์ครับ ประมาณว่า การ Config ค่าอะไรประมาณนั้นแหล่ะ ครั้งต่อไปในบทหลังๆก็จะเป็นการแนะนำในการใช้งานคำสั่งต่างๆที่จำเป็นในการสร้างเกมส์ครับ แล้วพบกันใหม่ในครั้งต่อไปครับบ๊ายบาย.........อ๊า.......

มาแล้วจ้า.............ตามที่ได้เคยสัญญาไว้กับคู่มือการใช้งานโปรแกรม ren'py นะจ๊ะ อาจจะทำออกมาช้าหน่อยเพราะว่าไม่ค่อยมีเวลา แต่จะพยายามแปลมาลงครับจริงๆแล้วเรื่องแปลไม่ค่อยยากหรอกแต่เวลาจะจัดเรียงคำพูดให้เข้าใจง่ายๆนี่สิที่น่าปวดหัว สำหรับบางคนที่ยังคงมีเรื่องสงสัยบางประการเกี่ยวกับการใช้งานโปรแกรมตัวนี้สามารถเข้ามาสอบถามหรือแลกเปลี่ยนข้อคิดเห็นได้ที่กล่องได้เลยครับ (ฝากข้อความไว้แล้วจะส่งใจกลับไปหา อ๊าาาา......)

เอาล่ะขอเกรินก่อนละกันนะครับเกี่ยวกับการใช้โปรแกรมตัวนี้ สำหรับโปรแกรมสร้างเกมส์ 2D แบบซิมูเลชั่น ตัวนี้เป็น freeware นะครับซึ่งสามารถรองรับได้ทั้งในระบบปฏิบัติการของ Window,Max,Linux และรวมไปถึง Android ด้วย(จิงอ่า....)   ซึ่งโดยพิ้นฐานของภาษาที่ใช้ในการเขียนกับเอนจิ้นตัวนี้นั้นจะใช้ภาษา Python ครับ  (ออกจะดังนะเธอว์ สำหรับภาษาตัวนี้ที่ต่างประเทศน่ะ แต่ในเมืองไทย JAVA มันดังกว่า แต่ที่ Office ผมใช้ . NET อ่ะ)  ดังนั้นเนี่ยะหากว่าอยากจะเชี่ยวเกี่ยวกับตัวนี้จริงๆขอให้ไปศึกษาภาษา Python ควบคู่ดูครับสำหรับหนังสือที่สอนเกี่ยวกับภาษา Python ที่เป็นภาษาไทยเนี่ยะตอนนี้ผมเห็นมีออกมาแค่เล่มเดียวเองมั้ง จำไม่ได้ 
ท่านทั้งหลายสารถดาวน์โหลดได้ที่http://www.renpy.org/wiki/renpy/Download_Ren%27Py สำหรับตัวที่ผมนำมาใช้ในการสอนนั้นผมใช้ตัวเวอร์ชั่น 6.11 นะครับ 

เพื่อไม่ให้เสียเวลามามะมาดูกันเลย เมื่อเราเปิดโปรแกรมมาเราจะเข้าสู่หน้า menu ให้เราเลือก Newproject  จากนั้นจึงทำการตั้งชื่อเกมส์โปรเจคของเราซะ กดปุ่ม Enter จากนั้นหากวันหลังเวลาที่เราอยากที่จะกลับมาพัฒนาโปรแกรมตัวนี้ใหม่ ก็ค่อยเลือกที่menu select project -> โปรเจคเรา ในที่นี้ผมขอตั้งชื่อโปรเจกของผมว่า test ละกัน 

โอเค..........หลังจากที่เราเลือกโปรเจคเราแล้วก็เข้าไปลุยกันเลย เมื่อเรากดปุ่ม Launch แล้วทำการ Run เกมส์ของเรา มันจะบอกว่าให้เขียนเกมส์ใส่ภาพและเสียงของเราก่อน (แล้วจะบอกทำไม) กลับไปที่หน้าmenu ใหม่ครับแล้วเลือกปุ่ม Edit Script ขึ้นมาซะ เอาล่ะจะเริ่มเขียนแล้วล่ะนะ เมื่อเราเข้ามาในหน้าของการเขียน Script นั้นจะมี Tab อยู่ 2 ตัว (ไอที่อยู่ข้างบนน่ะ) Tab 2 ตัวนั้นมันก็คือชื่อไฟล์ที่จำเป็นต่อการเขียนซึ่งมันจะทำการกำหนดค่าต่างๆในการสร้างให้เรานะครับ เรามาเริ่มดูกันก่อนดีกว่าว่าภายในไฟล์นั้นมีอะไรบ้างและใช้งานกันยังไง

ไฟล์ options.rpy

ไฟล์ตัวนี้เป็นไฟล์เริ่มต้นที่ทุกโปรเจคจะต้องมี นั่นก็เพราะว่ามันเป็นไฟล์ที่กำหนดค่า option ต่างๆซึ่งจำเป็นต่อการทำงานของเกมส์ ไม่ว่าจะเป็นการกำหนดขนาดหน้าจอ กำหนดพื้นสีBackground เสียง ปุ่มกด ฯลฯ บางบรรทัดโดยส่วนใหญ่จะเห็นว่ามี เครื่องหมาย “ # “ อยู่ที่หน้าประโยคตลอด เครื่องหมายนี้มันหมายความว่าบรรทัดนั้นมันเป็น Comment ครับ ไม่มีการใช้งานไม่ต้องไปใส่ใจมันนะครับ 

คำสั่ง(function , property) ที่จำเป็นในไฟล์นี้แบ่งเป็นกลุ่มหลักๆได้ดังนี้ ( ผมคงไม่ต้องบอกหรอกนะว่าคำสั่งพวกนี้มันอยู่บรรทัดไหนไปหาเอาเองละกัน )
· กลุ่มคำสั่งที่เกี่ยวกับการแสดงผลของ window และการทำงานต่างๆของเกมส์

 - config.developer = true / false ตั้งค่าเป็น True จะทำให้สามารถเรียกใช้งานด้วย developer tools ได้(โดยการกด Shift + D)ซึ่งผมมักจะใช้เครื่องมือนี้ในการตรวจสอบค่าตัวแปรมากกว่าอ่ะนะ แต่ถ้าตั้งเป็น false จะทำให้ไม่สามารถเรียกใช้งานตัว developer tools ได้โดยปกติแล้วเรามักจะปิดการใช้งานตัวนี้ในตอนที่เราสร้างเกมส์เสร็จแล้วแจกจ่ายหรือส่งต่อ ให้คนอื่นเล่น เพื่อป้องกันไม่ให้คนอื่นเข้ามาดูค่าต่างในเกมส์ของเรา (ส่วนตัวดีเนอะว่าปะ)
- config.screen_width = 800 กำหนดความกว้างของwindowเมื่อแสดงผล มีหน่วยเป็นพิกเซล
- config.screen_height = 600 กำหนดความยาวของwindowเมื่อแสดงผล มีหน่วยเป็นพิกเซล
- config.window_title = u"Game Name" กำหนดชื่อเกมส์ไว้ที่หัวwindow
- layour.botton_menu() ตรงนี้มันเป็นส่วนการตั้งค่า Layout ปุ่มกด Menu ภายในเกมส์ครับซึ่งยังไม่ขอกล่าวในบทแรก แต่จะขอกล่าวคร่าวๆว่ามันคือการตกแต่ง Layout ปุ่มกด Menu ภายในเกมส์นั่นเองถ้าเขียนมาอย่างงี้แสดงว่าเป็นการตั้งค่าให้ Layout ปุ่มกด Menu นั้นใช้ Layout เดียวกับ Menu ตอนเริ่มต้น แต่ถ้าเอาตัวนี้ออกก็จะไม่แสดงปุ่มต่างๆภายในเกมส์เลย มันจะขึ้นเป็นลิสอยู่ในกรอบคำพูดแทน

 

· ฟังก์ชั่น theme.roundrect เป็นฟังก์ชันที่คอยกำหนดการแสดงผลต่างของหน้าจอเกมส์ ส่วนใหญ่จะเป็นการใส่รูปใส่สี โดยรูปแบบการกำหนดสีจะให้เราใส่ค่าสีในรูปแบบเลขฐาน16 มีพารามิเตอร์ที่สำคัญๆดังนี้(หากเราไม่ทราบว่าสีที่เราต้องการนั้นมีค่าในเลขฐาน16เป็นเท่าไหร่นั้นสามารถเปิดอ้างอิงดูได้ในPhotoshop) 

widget = "#003c78", กำหนดสีของปุ่มว่าจะเป็นสีไหน 
widget_hover = "#0050a0", กำหนดว่าเมื่อนำเมาส์ไปวางไว้เหนือปุ่มแล้วจะให้เปลี่ยนไปเป็นสีไหน 
widget_text = "#c8ffff", กำหนดสีของตัวหนังสือบนปุ่ม 
widget_selected = "#ffffc8", กำหนดสีของตัวหนังสือในปุ่มต่างๆที่ได้มีการเลือกค่าไว้ก่อนแล้ว 
disabled = "#404040" กำหนดสีของปุ่มที่ไม่ได้ใช้งาน 
disabled_text = "#c8c8c8" กำหนดสีของตัวหนังสือบนปุ่มที่ไม่ได้ใช้งาน 
label = "#ffffff" กำหนดสีของตัวหนังสือบนหัวข้อmenu 
frame = "#6496c8" กำหนดพื้นหลังของพื้นที่ๆปุ่มmenuแสดงอยู่ 
button_menu = True/ False ถ้าเป็น False เวลาที่มีหน้าจอให้เลือกตอบคำถามตัวเลือกจะอยู่รวมกันในกรอบคำพูดเลยแต่ถ้าเป็น True มันจะแยกออกไปเป็นกรอบคำถามให้เลือกอยู่กลางจอ 
mm_root = "#dcebff" กำหนดรูป/สีพื้นหลังของไตเติ้ลเมนู 
gm_root = "#dcebff" กำหนดรูป/สีพื้นหลังของoptionฯลฯที่เกี่ยวกับการกำหนดค่าเกมส์เมนู
less_rounded = True/False เป็น True ถ้าท่านต้องการให้ปุ่มกด Menu ภายในเกมส์ของท่านมีเหลี่ยมมุมน่าหลงไหลในขณะที่ False จะเป็นการทำให้ปุ่มกด Menu ภายในเกมส์ของท่านโค้งมนจนน่าสัมผัส...อร๊ายยยย.....