Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Ren'Py [renpy] วิธีเปลี่ยนพื้นกรอบ คำ ...
ดู: 4375|ตอบ: 8
go

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

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 28-12-2012 16:25 |แสดงโพสต์ทั้งหมด
[renpy] วิธีเปลี่ยนพื้นกรอบ คำสนทนา

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



มาดูกันเลยค่ะ

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

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

http://www.thaigraph.com/thread-1824-1-1.html เมื่อบังภาพเสร็จแล้วก็ให้เซฟในโปรแกรม Illustrator เป็นไฟล์สกุล .png อีกครั้ง รอยยักสีขาวก็จะหายไป (สรปุว่ายังไงก็ต้องโยนมาทำใน Ai อยู่ดีนั่นแหละ หุหุ)

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

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



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

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





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



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



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



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

  1. style.window.background = Frame("transparent.png", 12,12)
คัดลอกไปที่คลิปบอร์ด



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

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



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


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


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

  1. style.window.yminimum = 250
คัดลอกไปที่คลิปบอร์ด
คำสั่งนี้เราจะใช้หรือไม่ใช้ก็ได้

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


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


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


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

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

  1. style.window.left_padding = 35
  2. # style.window.right_padding = 6
  3. style.window.top_padding = 50
  4. # style.window.bottom_padding = 6
คัดลอกไปที่คลิปบอร์ด
(ตัวอย่าง...)


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



----------------------------------------------------------
วิธีทำภาพ Background ให้โปร่งใส

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

  1. style.window.background = im.Alpha("transparent.png", 0.7)
คัดลอกไปที่คลิปบอร์ด
ตัวเลข 0.7 ต้อท้ายคือค่าความโปร่งใส ถ้าเซ้ตให้เป็น 1.0 ภาพจะทึบ 100% ตั้งแต่ 0.9 ลงมา ภาพจะโปร่งใสเพิ่มขึ้นเรื่อยๆ ที่ 0.0 คือโปร่งใสจนมองไม่เห็นพื้นกรอบเลย -*-

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

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

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

ในกรณี ที่เราสร้างภาพขอบนอกไว้ด้วย ก็จะเพิ่มมาอีกคำสั่งด้านล่างค่ะคือ
  1. style.window.foreground = Image("outlines.png")
คัดลอกไปที่คลิปบอร์ด
ดูตัวอย่างการเพิ่มคำสั่ง



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



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

ให้แก้ไขตำแหน่งของกรอบทั้งสองใหม่ที่คำสั่งนี้ค่ะ
  1. style.window.left_margin = 20
  2. # style.window.right_margin = 6
  3. style.window.top_margin = -80
  4. # style.window.bottom_margin = 6
คัดลอกไปที่คลิปบอร์ด
(ให้สังเกตว่า ภาพ Background และ Foreground จะเคลื่อนตามกัน ไม่ใช่เคลื่อนแต่ภาพใดภาพหนึ่ง)

ตัวอย่างการแก้ไข ตำแหน่งกรอบสนทนา



รู้สึกว่าจะเบี้ยวไปทางขวานิดหน่อย -*- แต่ช่างเถอะเหอๆๆ



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

บทความโดย NOOKFUFU2

(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น!!!)
ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 2

โพสต์เมื่อ 3-2-2013 13:57 |แสดงโพสต์ทั้งหมด

Rank: 1

โพสต์เมื่อ 17-12-2013 21:56 |แสดงโพสต์ทั้งหมด
เราสามารถเปลี่ยนสีคำสนทนาจากสีขาวเป็นสีอื่นๆได้มั้ยครับ

Rank: 1

โพสต์เมื่อ 5-5-2014 14:45 |แสดงโพสต์ทั้งหมด
ของผมพิมลงไปแล้วเปิดเกมมันErrorอะครับ

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 4-5-2015 02:50 |แสดงโพสต์ทั้งหมด
ตอบกระทู้ ZGANTV ตั้งกระทู้

ได้เปลี่ยนชื่อภาพ ให้เป็นชื่อภาพของคุณมาแทนที่หรือยังค่ะ ถ้าใส่ชื่อภาพตามของเราทุกอย่าง โปรแกรมมันจะเตือน เพราะค้นหาไฟล์ภาพชื่อนี้ไม่เจอ

แสดงความคิดเห็น

killngwk  ขนาดของกรอบเท่าไหร่ครับ  โพสต์เมื่อ 27-6-2018 16:02

Rank: 1

โพสต์เมื่อ 5-11-2015 22:08 |แสดงโพสต์ทั้งหมด
อยากทำเป้นแบบว่า ผช. พูดกรอบนึง ผญ. พูดกรอบนึงอะครับ เช่น ชายกรอบสีฟ้า หญิงกรอบสีชมพูทำไงครับ

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 6-12-2015 01:23 |แสดงโพสต์ทั้งหมด
ตอบกระทู้ Armacg ตั้งกระทู้

ลองศึกษาจากบอร์ดของต่างประเทศดูนะคะ ช่วงนี้งานดราฟภาพ ai ค่อนข้างเยอะ เลยไม่ค่อยมีเวลาทำเป็นบทความ renpy ภาษาไทยให้  



http://lemmasoft.renai.us/forums/viewtopic.php?f=51&;t=17232
http://lemmasoft.renai.us/forums/viewtopic.php?f=8&t=21738



Rank: 1

โพสต์เมื่อ 26-7-2017 18:25 |แสดงโพสต์ทั้งหมด
เวอร์ชั่นใหม่ทำไงครับ

แสดงความคิดเห็น

karorogunso  ลองดูที่นี้ครับ https://www.renpy.org/doc/html/gui.html#intermediate-gui-customization  โพสต์เมื่อ 23-7-2018 22:01

Rank: 1

โพสต์เมื่อ 20-7-2018 13:02 |แสดงโพสต์ทั้งหมด
แล้วขนาดที่ใช้สร้างใน Illustrator นี้เท่าไหรบ้างครับแต่ละรูป
คุณต้องเข้าสู่ระบบก่อนจึงจะสามารถตอบกลับ เข้าสู่ระบบ | สมัครสมาชิก


Thaigraph

GMT+7, 15-10-2019 16:15 , Processed in 0.092349 second(s), 21 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books