irpg Community
Ren'Py พื้นฐาน | บทที่ 7 รูปภาพและวิดีโอ - Printable Version

+- irpg Community (https://irpg.in.th)
+-- Forum: irpg Sugar School of Ren'Py (https://irpg.in.th/forum-38.html)
+--- Forum: Ren'Py Engine School (https://irpg.in.th/forum-39.html)
+--- Thread: Ren'Py พื้นฐาน | บทที่ 7 รูปภาพและวิดีโอ (/thread-3405.html)

Ren'Py พื้นฐาน | บทที่ 7 รูปภาพและวิดีโอ - Mikichan - 08-20-2019

ติดตามเราได้ที่ Facebook ชื่อเพจ Planila Game Developer


โปรแกรม Ren'Py รองรับลูกเล่นกราฟฟิกมากมาย ในบทนี้จะเรียนการใส่รูปภาพและวิดีโอเบื้องต้นได้แก่แนวคิดพื้นฐาน การแสดงรูปและการเปิดวิดีโอ ส่วนลูกเล่นเพิ่มเติมต้องใช้ ATL (Animation and Transformation Language) ซึ่งจะเรียนกันในบทต่อไป

[Image: 03.png]



Layer: ชั้นของรูป

เลเยอร์ (Layer) คือชั้นที่รวมรูปที่กำลังแสดงอยู่ โปรแกรม Ren'Py มีหลายเลเยอร์เพื่อรองรับการแสดงรูปหลายรูปพร้อมกัน ภายในหนึ่งเลเยอร์สามารถแสดงหลายรูปพร้อมกันได้ เลเยอร์หลักที่ใช้คือเลเยอร์ Master ซึ่งแสดงรูปพื้นหลัง, รูปตัวละคร, และรูปอื่น ๆ ที่นักสร้างเกมใส่มา นอกจากนี้ท่านสามารถสร้างเลเยอร์ใหม่เองได้ แต่จะไม่อธิบายการสร้างเลเยอร์ใหม่ในบทความนี้ เนื่องจากเลเยอร์ Master ก็เพียงพอสำหรับการใช้งานทั่วไปและลูกเล่นต่าง ๆ แล้ว

[Image: 01.png]
รูปที่ 7.1 การจัดเรียงเลเยอร์



Tag and Attribute: แท็กและคุณสมบัติ

รูปในโปรแกรม Ren'Py แตกต่างจากเสียงซึ่งสามารถตั้งชื่อไฟล์ได้ตามใจชอบ ชื่อของรูปประกอบด้วย 2 ส่วนได้แก่แท็ก (Tag) และคุณสมบัติ (Attribute) แท็กและคุณสมบัติแบ่งด้วยการเว้นวรรคภายในชื่อไฟล์รูป ส่วนซ้ายสุดคือแท็ก นอกจากนั้นเป็นคุณสมบัติที่ขยายแท็กนั้น (อยู่ทางขวาของแท็ก) จะมีคุณสมบัติเท่าไรก็ได้หรือไม่มีเลยก็ได้

[Image: 02.png]
รูปที่ 7.2 การแบ่งแท็กและคุณสมบัติจากชื่อไฟล์

Code:
windy   # แท็กคือ windy ไม่มีคุณสมบัติ
paeng happy   # แท็กคือ paeng มีคุณสมบัติ 1 ตัวคือ happy
miki cheer night   # แท็กคือ miki มีคุณสมบัติ 2 ตัวคือ cheer และ night

ไฟล์รูปที่โปรแกรม Ren'Py รองรับคือ .jpg และ .png ผู้เขียนแนะนำให้ใช้ .png เพราะสามารถทำให้พื้นหลังของตัวละครโปร่งใสได้ รูปต้องอยู่ในโฟลเดอร์ images โดยรูปสามารถอยู่ในโฟลเดอร์ย่อยในโฟลเดอร์ images อีกทีก็ได้ โปรแกรมจะมองเหมือนอยู่ในโฟลเดอร์ images ชื่อของรูปต้องเป็นตามรูปแบบข้างบนเท่านั้น คือแบ่งเป็นแท็กและคุณสมบัติ ตัวอังกฤษตัวใหญ่จะถูกมองเป็นตัวอังกฤษตัวเล็กเสมอ

Code:
# ไฟล์รูปข้างล่างนี้มีแท็กและคุณสมบัติเหมือนกันคือ nan smile
# โปรแกรมจะเข้าใจว่าเป็นรูปเดียวกัน

images\nan smile.jpg
images\nan smile.png
images\NAN SMILE.png
images\characters\nan smile.png

สรุปง่าย ๆ ว่าต้องตั้งชื่อรูปตามรูปแบบข้างบนเท่านั้น (แท็กและคุณสมบัติ) เว้นวรรคภายในชื่อเพื่อแบ่งแท็กและคุณสมบัติ ไม่สามารถตั้งชื่อรูปมั่ว ๆ ได้ ชื่อของรูปจะมีผลต่อการแสดงรูป

การตั้งชื่อตัวละครที่แนะนำคือ ตั้งแท็กเป็นชื่อของตัวละคร ถ้าตัวละครตัวหนึ่งมีอารมณ์หรือใบหน้าหลายแบบ (หลายรูป) ให้ตั้งใบหน้าเหล่านั้นเป็นคุณสมบัติ เช่น emily happy, emily sad, emily tired เพื่อให้ง่ายต่อการใช้งาน (โดยเฉพาะคำสั่ง show) ถ้ามีตัวละครตัวหนึ่งมีใบหน้าเพียงแบบเดียวก็ไม่ต้องใส่คุณสมบัติ เช่น praew



Image: ประกาศตัวแปรรูป

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

Code:
image ชื่อตัวแปรรูป = "ชื่อไฟล์พร้อมนามสกุล"

ตัวอย่างการใช้คำสั่ง image เช่น

Code:
image ah = "aiya happy.png"



Show: แสดงรูป


......

นี่เพิ่งแค่ 35% ของบทความนี้เท่านั้น บทความฉบับเต็มมีเยอะกว่านี้อีก!


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

บทความต้นฉบับ https://planila.blogspot.com/2019/08/renpy-chapter07.html

[Image: %25E0%25B8%259A%25E0%25B8%2597%25E0%25B8...9%2588.png]