บทความสอนกราฟิก

 ลืมรหัสผ่าน
 ลงทะเบียน
ค้นหา
ดู: 2578|ตอบกลับ: 0

[Renpy] 11.วิธีใส่ภาพตัวละคร ประกอบคำสนทนา

[คัดลอกลิงก์]

272

กระทู้

272

โพสต์

979

เครดิต

ผู้ดูแลระบบ

Rank: 9Rank: 9Rank: 9

เครดิต
979
แก้ไขครั้งสุดท้ายโดย nooknazha เมื่อ 2018-5-23 20:55

[renpy] วิธีใส่ภาพตัวละคร ประกอบคำสนทนา

หลักๆก็จะมี 2 แบบนะค่ะ คือแบบแสดงแค่ภาพเดียว กับแบบแสดงภาพตามความรู้สึก

แบบที่ 1 แบบภาพเดียวตั้งแต่ต้นจนจบเกมส์
เราก็ต้องเตรียมภาพตัวละครไว้หนึ่งภาพ ขนาดเล็กหน่อยๆ สัก แนวนอน 120* แนวสูง150 หรือจะเล็กกว่านั้นก็ได้ค่ะ (เก็บภาพทั้งหมดไว้ที่แฟ้ม "game" ในไฟล์เกมส์ของเรา)

Image_Character_conversation_06.jpg


แล้วก็ประกาศตัวแปรตัวละครในไฟล์ script.rpy
  1. init:
  2. $ k = Character('กวี',
  3. color="#FCFC68",
  4. window_left_padding=200,
  5. show_side_image=Image
  6. ("kawii_mini.png",
  7. xalign=0.0, yalign=1.0))
คัดลอกไปที่คลิปบอร์ด




- ตรง "window_left_padding=200"  คือ การเลื่อนระยะที่จะให้คำสนทนาเว้นถอยออกจากกรอบคำพูดด้านซ้ายสุด (ถ้าไม่ตั้งไว้ ภาพตัวละครจะบังคำพูดที่อยู่ด้านหลัง)




- ตรง "show_side_image=Image" เป็นคำสั่งที่จะให้แสดงภาพตัวละครที่ด้านหน้า ภาพเดียว

- ตรง "xalign=0.0, yalign=1.0" คือ การกำหนดพิกัดภาพว่าจะให้แสดงตัวละครนั้นแสดงที่ตำแหน่งไหน Xalign = พิกัดแนวนอน Yalign = พิกัดที่แนวตั้ง

และต่อจาก Label start: ก็พิมพ์ประโยคสนทนาไปตามปกติ ภาพตัวละครก็จะแสดงขึ้นมาให้ค่ะ



  1. label start:

  2. k "คุณชื่ออะไรค่ะ?"

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


ตัวอย่าง...
Image_Character_conversation_07.png


Image_Character_conversation_08.jpg

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

ขั้นตอนแรก เราควรมีภาพแสดงอารมณ์ของตัวละคร อย่างน้อย 2 ภาพขึ้นไป หรือทำมาเยอะๆเลยก็ได้ถ้าขยัน ภาพที่ควรทำไว้ก็เช่น ดีใจ เสียใจ หน้าเอ๋อ ติ๊งต๊อง หัวเราะ ร้องไห้ โกรธ หงุดหงิด ฯลฯ และแต่บทบาท ของตัวละคร

Image_Character_conversation_05.jpg
ขั้นตอนต่อมา ก็ให้เข้าไปประกาศตัวแปรในไฟล์ scritp.rpy ซึ่งก็จะมีความแตกต่างกันนิดหน่อยค่ะ



  1. init:
  2. $ k = Character('กวี',
  3. color="#FCFC68",
  4. what_xpos = 5,
  5. show_side_image=ConditionSwitch(
  6. "kawii == 'normal'", "kawii_mini.png",
  7. "kawii == 'happy'", "kawii_mini_smile.png",
  8. None, Null(),
  9. xalign=0.0, yalign=1.0))
คัดลอกไปที่คลิปบอร์ด


- ตรง "what_xpos = 5" จะคล้ายกับคำสั่ง "window_left_padding=200" (สลับกันใช้ได้ แล้วแต่จะเลือก) 2 คำสั่งนี้จะมีความแตกต่างกัน

ตรงที่ "what_xpos = 5" นั้นจะเลื่อนแค่ประโยคคำพูดอย่างเดียว ชื่อตัวละครไม่เลื่อน(ที่อยู่ที่เดิม)

แต่ "window_left_padding=200" คือ ทั้งชื่อตัวละคร และคำพูดของตัวละคร จะเลื่อนตำแหน่งตามกันทั้งหมด

- ตรง "show_side_image=ConditionSwitch()" เป็นคำสั่งที่จะให้แสดงภาพตัวละครแสดงด้านหน้า และเปลี่ยนภาพไปมาได้


- ตรง "kawii == 'normal'", "kawii_mini.png", คือ "ตัวแปรที่รองรับ(ตั้งว่าอะไรก็ได้)" == 'ชื่อตัวแปรภาพ(ควรตั้งตามอาการของตัวละคร)'","ชื่อไฟล์ของภาพตัวละครในอาการนั้นๆ"


และต่อจาก Label start: ก็จะต้องใช้คำสั่งที่ต่างออกไปเช่นกันค่ะ คือจะต้องมีคำสั่ง $ ชื่อตัวแปรรองรับ = ชื่อตัวแปรของภาพนั้นๆ กำกับทุกครั้งที่มีการเปลี่ยนภาพตัวละคร



  1. label start:

  2. $ kawii = 'normal'
  3. k "อ่ะ..จำได้สิ เราเพิ่งเจอกันมื่อ 10 นาทีก่อน"

  4. $ kawii = 'happy'
  5. k "ก็น่าจะใช่ล่ะมั้ง... ^^" "

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


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


Image_Character_conversation_01.png
แล้วก็รันโปรแกรมโล๊ด...

Image_Character_conversation_02.jpg


Image_Character_conversation_03.jpg


Image_Character_conversation_04.jpg


ในกรณีทำภาพให้อยู่ในกรอบก็ทำด้วยวิธีเดียวกันค่ะ คือ...

ภาพกรอบนอก (ทำในโปรแกรม Adobe Illustrator) ให้บันทึกกรอบส่วนที่จะใส่ภาพตัวละครมากับภาพเลย

Image_Character_conversation_09.jpg


แล้วก็ภาพกรอบสำหรับแสดงบทสนทนา ตัวนี้เราจะทำให้โปร่งใสค่ะ ดูวิธีทำที่บทความนี้ประกอบ [renpy] วิธีเปลี่ยนพื้นกรอบ คำสนทนา
Image_Character_conversation_10.jpg
แล้วก็ภาพตัวละครท่าทางต่างๆ บันทึกพร้อมกรอบมาเลยค่ะ
Image_Character_conversation_11.jpg

ที่เหลือก็ทำตามวิธีข้างต้นค่ะ แล้วก็ต้องปรับระยะพิกัดแสดงภาพ ตรง " xalign=0.05, กับ yalign=0.98" ให้วางซ้อนทับพอดีกับภาพกรอบด้านหลัง ก็เป็นอันเรียบร้อย หุหุ (แต่ละคนระยะจะไม่เท่ากันขึ้นอยู่กับขนาดของกรอบ) จำได้ไหมค่ะ x คือ แนวนอน ปรับได้ตั้งแค่ 0.0 ถึง 1.0 และ y คือแนวตั้ง ปรับได้ตั้งแต่ 0.0 ถึง 1.0 เช่นกันค่ะ

***ควรระวังเรื่องการเคาะเว้นวรรคด้วยนะค่ะ ไม่งั้นโปรแกรมจะเกิด Error

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

Image_Character_conversation_12.jpg
ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | ลงทะเบียน

รายละเอียดเครดิต

ข้อความล้วน|อุปกรณ์พกพา|ประวัติการแบน|GraphicFUFU

GMT+7, 2024-4-19 21:40 , Processed in 0.109395 second(s), 21 queries .

Powered by Discuz! X3.4 R20180101, Rev.59

© 2001-2017 Comsenz Inc.

ตอบกระทู้ ขึ้นไปด้านบน ไปที่หน้ารายการกระทู้