[Renpy] 40. วิธีเปลี่ยนพื้นกรอบ คำสนทนา
แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2018-6-22 19:3240. วิธีเปลี่ยนพื้นกรอบ คำสนทนา
แต่เดิมโปรแกรมเราจะเห็นกรอปคำสนทนาของตัวละคร เป็นแถบสีดๆโปร่งแสงแบบภาพด้านล่างนะค่ะถ้าเกิดว่าเราอยากจะเปลี่ยนล่ะ จะทำยังไง?
มาดูกันเลยค่ะ
สำหรับกรอปคำสนทนาในเกมส์หากเป็นไปได้ข้าพเจ้าอยากแนะนำให้ทำในโปรแกรม Adobe Illustrator นะค่ะ เหตุเพราะเมื่อบันทึกไฟล์เป็นสกุล .png ส่วนขอบของกรอบคำพูดจะมีความคมชัดกว่าไม่เกิดรอยยักสีขาว ถ้าเกิดว่าทำในโปรแกรม Adobe Photoshop ก็ทำได้เช่นกันแต่จะต้องใช้เส้นไกด์มาล้อมกรอบไว้ กันเทสีเกิน ไม่เช่นนั้นเวลาบันทึกไฟล์เป็นสกุล.png บริเวณขอบภาพของเกิดรอยยักสีขาวเต็มไปหมด มองแล้วไม่สวย(แถมไฟล์ก็มีขนาดใหญ่กว่า) สรุปว่าทำให้โปรแกรม Illustrator เวิร์คกว่าสำหรับงานทำภาพ Vector ประกอบเกมส์
แต่ในกรณีที่คุณใช้ถนัดโปรแกรม Photoshop มากกว่าก็ให้ทำภาพในโปรแกรม Photoshop เมื่อทำเสร็จแล้วก็ให้เซฟเป็นสกุล.png
-----------------------------------------------------
เตรียมภาพ
ข้าพเจ้าจะทำเป็น2 ภาพนั้นก็คือส่วนที่เป็นกรอปนอก (Foreground) และส่วนที่เป็นพื้นที่สำหรับแสดงคำสนทนา(Background) โดยจะแยกเป็นคยละเยเลอร์เพื่อความสะดวกในการแก้ไขและบันทึก
เวลาบันทึกภาพเป็นสกุล .png ข้าพเจ้าจะใช้วิธีปิดตาเลเยอร์ที่ไม่ต้องการให้แสดงและบันทึกแยกเป็น 2 ภาพ (ดูภาพด้านล่างประกอบ)
ขณะบันทึกภาพ ระวังอย่าให้ภาพใดภาพหนึ่งเคลื่อนออกจากตำแหน่งที่วางไว้ ไม่เช่นนั้น!!! หากสั่งให้แสดงกรอบภาพในตัวเกมส์กรอบภาพมันจะเคลื่อนตาม
ให้บันทึกภาพทั้ง Foreground และ Background ลงในไฟล์งานเกมส์ของเรา
------------------------------------------------
ใส่ภาพ Backgroundแบบทึบ
เมื่อเปิดโปรแกรม Renpy ขึ้นมาแล้วก็ให้เข้าไปแก้ไขโค๊ดที่ไฟล์ Options.rpy
ประมาณบรรทัดที่ 100 เราจะเห็นคำสั่งสำหรับใส่ภาพกรอบคำสนทนาถูกปิดไว้(ดูที่กรอบสีแดงภาพด้านล่าง)
ให้เอา # หน้าคำสั่งออก เพื่อเปิดใช้งานหรือจะเก็บไว้เป็นตัวอย่างไว้แล้วพิมพ์ในบรรทัดใหม่ก็ได้
style.window.background = Frame("transparent.png", 12,12)
เซฟภาพ Backgroundไว้ชื่ออะไรก็เอาชื่อภาพนั้นมาใส่ อย่าลืมใส่สกุลให้ถูกต้องด้วยที่ตัวเลข 12 , 12 ต่อท้ายชื่อภาพอันนั้นหมายถึงความกว้าง*ยาวของ"มุม"แต่ละ "มุม" (12*12หน่วยเป็นพิกเซล) เพื่อกันไม่ให้คำสนทนาของตัวละครแสดงผลเกินออกไปนอกกรอบ
เมื่อบันทึกไฟล์ที่แก้ไขเสร็จแล้วก็ให้บันทึกไฟล์ที่ทำการแกไข้แล้วก็ลองรันโปรแกรมดู
จะเห็นว่า Backgroundกรอบสนทนาเปลี่ยนเป็นภาพที่เราสร้างแล้วแต่ไซต์มันเพี้ยนไป อันนี้ไม่ต้องตกใจว่าโปรแกรมรวนนะค่ะคือความจริงกรอบสนทนาเราไม่จำเป็นต้องสร้างมาให้มีขนาดพอดีกับหน้าจอเป๊ะๆก็ได้อาจจะเป็นภาพสี่เหลียมจัตุรัสที่มีขนาดสัก 300*300 พิกเซลก็เอามาทำเป็นกรอบ Background ได้แล้วเพราะยังไงเราก็ต้องมากำหนด Size ที่ต้องการจริงๆภายในตัวโปรแกรมRenpy อีกที
กำหนดความกว้างและความสูงของกรอบ
ด้านล่างนี้จะเป็นคำสั่งที่ใช้กำหนดขนาดของกรอบคำสนทนานะค่ะอยากให้กว้างยาวแค่ไหน ก็เอา # ออก แล้วก็จัดไปตามชอบ
อีกตำแหน่งหนึ่งที่เราจะใช้กำหนดความสูงให้กับกรอบคำสนทนาก็คือตรงนี้ค่ะ
style.window.yminimum = 250
คำสั่งนี้เราจะใช้หรือไม่ใช้ก็ได้
(ตัวอย่าง..)
------------------------------------------------------------------
แต่ที่เราให้สร้างพื้น Background มาให้มีขนาด 100% พอดีกับกรอบนอกForeground ตั้งแต่แรกนั้นเพราะเราจะใช้คำสั่งในการแสดงกรอปแบบโปร่งใส Alphaซึ่งต้องใช้อีกคำสั่ง และจำเป็นต้องสร้างภาพทั้ง Foreground และ Background ให้มีขนาดพอดีที่ 100%
จัดตำแหน่งแสดงคำสนทนาในกรอบ
แต่ก่อนที่เราจะใช้คำสั่งสร้างBackground แบบโปร่งใสนั้นเราต้องมาย้ายตำแหน่งแสดงผลของคำสนทนากันก่อนเพราะจากภาพข้างบนเราจะเป็นว่ามันเยื้องไปมากพอสมควร
ให้มาเซ็ตค่าตำแหน่งแสดงผลของคำสนทนาใหม่ตรงนี้ค่ะ(ถ้าไม่รู้จะเพิ่มลดตรงไหนก่อน ก็ให้ลองแก้ทีละแถว แล้วสั่งรันโปรแกรมดูว่าตรงไหนที่มันเขยื้อนไป ก็ให้เพิ่มลด เฉพาะส่วนนั้นให้เข้าที่แล้วค่อยไปแก้ไขบรรทัดอื่นต่อไป)
style.window.left_padding = 35
# style.window.right_padding = 6
style.window.top_padding = 50
# style.window.bottom_padding = 6
(ตัวอย่าง...)
เพิ่มลดตัวเลขตำแหน่งจนให้คำสทนา แสดงอยู่ภายในกรอบ Background พอดี(ดูภาพด้านล่าง)
----------------------------------------------------------
วิธีทำภาพ Background ให้โปร่งใส
หากกรอบสอนทนาของเรามีแค่ภาพ Background ภาพเดียว ไม่มีภาพขอบ ก็ใช้คำสั่งตามนี้ค่ะ
style.window.background = im.Alpha("transparent.png", 0.7)
ตัวเลข 0.7 ต้อท้ายคือค่าความโปร่งใส ถ้าเซ้ตให้เป็น 1.0 ภาพจะทึบ100% ตั้งแต่ 0.9 ลงมาภาพจะโปร่งใสเพิ่มขึ้นเรื่อยๆ ที่ 0.0 คือโปร่งใสจนมองไม่เห็นพื้นกรอบเลย-*-
เสร็จแล้วก็จะไปเพิ่มลดขนาดของกรอบทีหลังตามที่ข้าพเจ้าบอกไว้ในตอนต้นนะค่ะ
----------------------------------------------------------
วิธีใส่ Backgroundสนทนาแบบโปร่งใสและใส่ขอบ Foreground
ในกรณีที่เราสร้างภาพขอบนอกไว้ด้วย ก็จะเพิ่มมาอีกคำสั่งด้านล่างค่ะคือ<font size="4">
style.window.foreground = Image("outlines.png")
</font>ดูตัวอย่างการเพิ่มคำสั่ง
เมื่อบันทึกไฟล์แล้วก็ให้ลองรันโปรแกรมดู (ดูภาพประกอบด้านล่าง)จะเห็นว่าภาพขอบ Foreground วางทับพอดีกับภาพพื้น Background (ถ้ามันวางเยื้องกันแสดงว่า ตอนที่เซฟภาพ เราจะไปเผลอจับเคลื่อนย้าย ให้กลับไปเลื่อนภาพให้เข้าที่แล้วเซฟทับชื่อเดิม)
แต่ถึง ภาพขอบ Foreground วางทับพอดีกับภาพพื้น Backgroundแล้ว แต่ตำแหน่ง center ของมันก็ยังไม่ใช่ตำแหน่งที่ถูกต้องให้ทำการแก้ไขตำแหน่ง ศูนย์กลางของกรอบสนทนาใหม่ค่ะ
ให้แก้ไขตำแหน่งของกรอบทั้งสองใหม่ที่คำสั่งนี้ค่ะ
style.window.left_margin = 20
# style.window.right_margin = 6
style.window.top_margin = -80
# style.window.bottom_margin = 6
(ให้สังเกตว่า ภาพ Background และ Foregroundจะเคลื่อนตามกัน ไม่ใช่เคลื่อนแต่ภาพใดภาพหนึ่ง)
ตัวอย่างการแก้ไขตำแหน่งกรอบสนทนา
รู้สึกว่าจะเบี้ยวไปทางขวานิดหน่อย แต่ช่างเถอะแค่นี้พอใจล่ะ ^^"
ขอให้สนุกกับทุกชิ้นงานนะค่ะ
***************************************
บทความโดย นุ้ก
ขอจบบทความแค่เพียงเท่านี้ แล้วพบกันใหม่บทความหน้าค่ะ ^^
(ขอสงวนสิทธิ์อนุญาตให้เผยแพร่เฉพาะในเว็บ www.graphicfufu.comเท่านั้น)
หน้า:
[1]