[Renpy] 40. วิธีเปลี่ยนพื้นกรอบ คำสนทนา

nooknazha

[Renpy] 40. วิธีเปลี่ยนพื้นกรอบ คำสนทนา

แต่เดิมโปรแกรมเราจะเห็นกรอปคำสนทนาของตัวละคร เป็นแถบสีดๆโปร่งแสงแบบภาพด้านล่างนะค่ะถ้าเกิดว่าเราอยากจะเปลี่ยนล่ะ จะทำยังไง?

มาดูกันเลยค่ะ
สำหรับกรอปคำสนทนาในเกมส์หากเป็นไปได้ข้าพเจ้าอยากแนะนำให้ทำในโปรแกรม Adobe Illustrator นะค่ะ เหตุเพราะเมื่อบันทึกไฟล์เป็นสกุล .png ส่วนขอบของกรอบคำพูดจะมีความคมชัดกว่าไม่เกิดรอยยักสีขาว ถ้าเกิดว่าทำในโปรแกรม Adobe Photoshop ก็ทำได้เช่นกันแต่จะต้องใช้เส้นไกด์มาล้อมกรอบไว้ กันเทสีเกิน ไม่เช่นนั้นเวลาบันทึกไฟล์เป็นสกุล.png บริเวณขอบภาพของเกิดรอยยักสีขาวเต็มไปหมด มองแล้วไม่สวย(แถมไฟล์ก็มีขนาดใหญ่กว่า) สรุปว่าทำให้โปรแกรม Illustrator เวิร์คกว่าสำหรับงานทำภาพ Vector ประกอบเกมส์

แต่ในกรณีที่คุณใช้ถนัดโปรแกรม Photoshop มากกว่าก็ให้ทำภาพในโปรแกรม Photoshop เมื่อทำเสร็จแล้วก็ให้เซฟเป็นสกุล.png
-----------------------------------------------------

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


เวลาบันทึกภาพเป็นสกุล .png ข้าพเจ้าจะใช้วิธีปิดตาเลเยอร์ที่ไม่ต้องการให้แสดงและบันทึกแยกเป็น 2 ภาพ (ดูภาพด้านล่างประกอบ)

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



ให้บันทึกภาพทั้ง Foreground และ Background ลงในไฟล์งานเกมส์ของเรา

------------------------------------------------

ใส่ภาพ Backgroundแบบทึบ
เมื่อเปิดโปรแกรม Renpy ขึ้นมาแล้วก็ให้เข้าไปแก้ไขโค๊ดที่ไฟล์ Options.rpy

ประมาณบรรทัดที่ 100 เราจะเห็นคำสั่งสำหรับใส่ภาพกรอบคำสนทนาถูกปิดไว้(ดูที่กรอบสีแดงภาพด้านล่าง)

ให้เอา # หน้าคำสั่งออก เพื่อเปิดใช้งานหรือจะเก็บไว้เป็นตัวอย่างไว้แล้วพิมพ์ในบรรทัดใหม่ก็ได้

1. 
   
2. style.window.background = Frame("transparent.png", 12,12)
   

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

เซฟภาพ Backgroundไว้ชื่ออะไรก็เอาชื่อภาพนั้นมาใส่ อย่าลืมใส่สกุลให้ถูกต้องด้วยที่ตัวเลข 12 , 12 ต่อท้ายชื่อภาพอันนั้นหมายถึงความกว้าง*ยาวของ"มุม"แต่ละ "มุม" (12*12หน่วยเป็นพิกเซล) เพื่อกันไม่ให้คำสนทนาของตัวละครแสดงผลเกินออกไปนอกกรอบ

เมื่อบันทึกไฟล์ที่แก้ไขเสร็จแล้วก็ให้บันทึกไฟล์ที่ทำการแกไข้แล้วก็ลองรันโปรแกรมดู

จะเห็นว่า Backgroundกรอบสนทนาเปลี่ยนเป็นภาพที่เราสร้างแล้ว  แต่ไซต์มันเพี้ยนไป อันนี้ไม่ต้องตกใจว่าโปรแกรมรวนนะค่ะคือความจริงกรอบสนทนาเราไม่จำเป็นต้องสร้างมาให้มีขนาดพอดีกับหน้าจอเป๊ะๆก็ได้อาจจะเป็นภาพสี่เหลียมจัตุรัสที่มีขนาดสัก 300*300 พิกเซลก็เอามาทำเป็นกรอบ Background ได้แล้วเพราะยังไงเราก็ต้องมากำหนด Size ที่ต้องการจริงๆภายในตัวโปรแกรมRenpy อีกที


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


อีกตำแหน่งหนึ่งที่เราจะใช้กำหนดความสูงให้กับกรอบคำสนทนาก็คือตรงนี้ค่ะ

1. 
   
2. style.window.yminimum = 250
   

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

คำสั่งนี้เราจะใช้หรือไม่ใช้ก็ได้

(ตัวอย่าง..)


------------------------------------------------------------------

แต่ที่เราให้สร้างพื้น Background มาให้มีขนาด 100% พอดีกับกรอบนอกForeground ตั้งแต่แรกนั้นเพราะเราจะใช้คำสั่งในการแสดงกรอปแบบโปร่งใส Alpha  ซึ่งต้องใช้อีกคำสั่ง และจำเป็นต้องสร้างภาพทั้ง Foreground และ Background ให้มีขนาดพอดีที่ 100%


จัดตำแหน่งแสดงคำสนทนาในกรอบ
แต่ก่อนที่เราจะใช้คำสั่งสร้างBackground แบบโปร่งใสนั้นเราต้องมาย้ายตำแหน่งแสดงผลของคำสนทนากันก่อนเพราะจากภาพข้างบนเราจะเป็นว่ามันเยื้องไปมากพอสมควร

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

1. 
   
2. style.window.left_padding = 35
   
3. # style.window.right_padding = 6
   
4. style.window.top_padding = 50
   
5. # style.window.bottom_padding = 6
   

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

(ตัวอย่าง...)

เพิ่มลดตัวเลขตำแหน่งจนให้คำสทนา แสดงอยู่ภายในกรอบ Background พอดี(ดูภาพด้านล่าง)
----------------------------------------------------------

วิธีทำภาพ Background ให้โปร่งใส
หากกรอบสอนทนาของเรามีแค่ภาพ Background ภาพเดียว ไม่มีภาพขอบ ก็ใช้คำสั่งตามนี้ค่ะ

1. 
   
2. style.window.background = im.Alpha("transparent.png", 0.7)
   

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

ตัวเลข 0.7 ต้อท้ายคือค่าความโปร่งใส ถ้าเซ้ตให้เป็น 1.0 ภาพจะทึบ100% ตั้งแต่ 0.9 ลงมาภาพจะโปร่งใสเพิ่มขึ้นเรื่อยๆ ที่ 0.0 คือโปร่งใสจนมองไม่เห็นพื้นกรอบเลย-*-

เสร็จแล้วก็จะไปเพิ่มลดขนาดของกรอบทีหลังตามที่ข้าพเจ้าบอกไว้ในตอนต้นนะค่ะ

----------------------------------------------------------

วิธีใส่ Backgroundสนทนาแบบโปร่งใสและใส่ขอบ Foreground

ในกรณีที่เราสร้างภาพขอบนอกไว้ด้วย ก็จะเพิ่มมาอีกคำสั่งด้านล่างค่ะคือ

1. <font size="4">
   
2. style.window.foreground = Image("outlines.png")
   
3. </font>

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

ดูตัวอย่างการเพิ่มคำสั่ง

เมื่อบันทึกไฟล์แล้วก็ให้ลองรันโปรแกรมดู (ดูภาพประกอบด้านล่าง)จะเห็นว่าภาพขอบ Foreground วางทับพอดีกับภาพพื้น Background (ถ้ามันวางเยื้องกันแสดงว่า ตอนที่เซฟภาพ เราจะไปเผลอจับเคลื่อนย้าย ให้กลับไปเลื่อนภาพให้เข้าที่แล้วเซฟทับชื่อเดิม)

แต่ถึง ภาพขอบ Foreground วางทับพอดีกับภาพพื้น Backgroundแล้ว แต่ตำแหน่ง center ของมันก็ยังไม่ใช่ตำแหน่งที่ถูกต้องให้ทำการแก้ไขตำแหน่ง ศูนย์กลางของกรอบสนทนาใหม่ค่ะ

ให้แก้ไขตำแหน่งของกรอบทั้งสองใหม่ที่คำสั่งนี้ค่ะ

1. 
   
2. style.window.left_margin = 20
   
3. # style.window.right_margin = 6
   
4. style.window.top_margin = -80
   
5. # style.window.bottom_margin = 6
   

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

(ให้สังเกตว่า ภาพ Background และ Foregroundจะเคลื่อนตามกัน ไม่ใช่เคลื่อนแต่ภาพใดภาพหนึ่ง)
ตัวอย่างการแก้ไขตำแหน่งกรอบสนทนา

รู้สึกว่าจะเบี้ยวไปทางขวานิดหน่อย แต่ช่างเถอะแค่นี้พอใจล่ะ ^^"

ขอให้สนุกกับทุกชิ้นงานนะค่ะ


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

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