20 สิงหาคม 2562

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

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


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

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


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

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



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


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

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


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

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


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



Show: แสดงรูป

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

หรือ

หรือ


คำสั่ง show มีความสามารถในการส่งต่อ ถ้าใช้คำสั่ง show เพื่อแสดงรูปใหม่ โดยมีแท็กเดียวกับรูปที่กำลังแสดงอยู่ รูปเดิมจะถูกแทนที่ด้วยรูปใหม่ในตำแหน่งเดิม คุณสมบัติของรูปเดิมจะถูกส่งมายังรูปใหม่ ยกตัวอย่างเช่น ถ้ารูปที่กำลังแสดงอยู่คือ nina night happy คุณสมบัติ night และ happy จะถูกส่งไปยังรูปใหม่ และรวมกับคุณสมบัติใหม่ที่ใส่เพิ่มมา สมมติว่าคุณสมบัติใหม่คือ cry โปรแกรมจะค้นหารูปที่ใกล้เคียงกับคุณสมบัติดังกล่าว เช่น อาจเป็นรูป nina night cry

ถ้ารูปแท็กนั้นไม่ได้กำลังแสดงอยู่ คำสั่ง show จะแสดงรูปใหม่ขึ้นมา โดยไม่ลบรูปอื่น (แท็กอื่น) ที่กำลังแสดงอยู่

นอกจากนี้ยังสามารถต่อท้ายด้วย at แล้วตามด้วยตำแหน่งบนหน้าจอ เช่น left, center, right, top เพื่อแสดงรูปในตำแหน่งต่าง ๆ ของหน้าจอได้ สำหรับการแสดงรูปในตำแหน่งที่เฉพาะเจาะจง เช่น ระบุเป็นพิกเซล, หรือระบุเป็นอัตราส่วน ต้องใช้ ATL ซึ่งจะอธิบายในบทต่อไป

ตัวอย่างการใช้คำสั่ง show สมมติว่ามีรูป 3 รูปในโฟลเดอร์ images ได้แก่ nina night happy, nina night cry, และ praew


คุณสมบัติและการส่งต่อคุณสมบัติเป็นเรื่องที่เข้าใจค่อนข้างยาก สำหรับมือใหม่แล้วผู้เขียนแนะนำให้ตั้งชื่อรูปที่ไม่มีคุณสมบัติไปก่อน (มีเฉพาะแท็ก) เนื่องจากตรงไปตรงมาและเข้าใจง่าย เมื่อท่านต้องการเปลี่ยนรูปตัวละครเดิมบ่อย ๆ เช่น เปลี่ยนใบหน้าตัวละครตามประโยคที่พูด เมื่อนั้นค่อยตั้งชื่อที่มีคุณสมบัติ เพื่อให้เขียนสคริปต์ง่ายขึ้น
รูปที่ 7.3 การใช้คำสั่ง show และลงท้ายด้วย at left


Hide: ลบรูป

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

หรือ


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



Scene: แสดงรูปพื้นหลัง

คำสั่ง show สามารถแสดงรูปพื้นหลังได้ แต่ไม่ค่อยนิยมใช้แสดงรูปพื้นหลังนักเท่าไร เนื่องจากต้องลบรูปที่กำลังแสดงอยู่ทุกรูปด้วยตัวเอง ทำให้เปลืองสคริปต์ไปหลายบรรทัด คำสั่ง scene คือคำสั่งแสดงรูปพื้นหลังที่สะดวกกว่า คำสั่งนี้จะลบรูปทั้งหมดที่กำลังแสดงอยู่โดยอัตโนมัติ แล้วแสดงรูปพื้นหลังใหม่ขึ้นมา รูปแบบของคำสั่ง scene คือ

หรือ

หรือ


รูปที่ 7.4 การใช้คำสั่ง scene


With: ลูกเล่นแสดงรูป

with คือคำสั่งที่แสดงลูกเล่นประเภท Transition (ลูกเล่นที่ส่งผลตอนเริ่มต้นแสดงรูปใหม่) คำสั่งนี้ต้องใช้คู่กับคำสั่งแสดงรูปอื่น เช่น showscene ลูกเล่นประเภท Transition มีมากมาย ผู้เขียนเลือกลูกเล่นที่น่าสนใจมาอธิบายดังนี้
  • dissolve แสดงภาพที่เลือกให้ชัดขึ้นภายใน 0.5 วินาที
  • fade ทำให้หน้าจอเป็นสีดำภายใน 0.5 วินาที จากนั้นเปลี่ยนรูป และทำให้หน้าจอเป็นปกติภายใน 0.5 วินาทีต่อมา
  • zoomin ขยายภาพให้ใหญ่ขึ้นภายใน 0.5 วินาที
  • irisout เปลี่ยนรูปในลักษณะกรอบสี่เหลี่ยม โดยเริ่มจากกลางจอไปยังขอบจอ
  • vpunch เขย่าหน้าจอในแนวตั้งเป็นเวลา 0.5 วินาที
  • hpunch เขย่าหน้าจอในแนวนอนเป็นเวลา 0.5 วินาที

รูปแบบของคำสั่ง with แบบหลายบรรทัดคือ


คำสั่ง with แบบหลายบรรทัดจะแสดงลูกเล่นกับทุกคำสั่งแสดงรูปที่อยู่ก่อนหน้า ใส่คำสั่ง with none เพื่อไม่ต้องแสดงลูกเล่น ตัวอย่างเช่น


รูปที่ 7.5 การใช้คำสั่ง with กับลูกเล่น fade

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


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


Movie_cutscene: เปิดวิดีโอ

movie_cutscene คือฟังก์ชันที่เปิดวิดีโอแบบเต็มจอ ไฟล์วิดีโอนั้นต้องอยู่ในโฟลเดอร์ game ฟังก์ชัน movie_cutscene เป็นสคริปต์ภาษา Python ต้องอยู่ในบล็อก python: หรือเติมเครื่องหมาย $ นำหน้าบรรทัด รูปแบบของฟังก์ชัน movie_cutscene คือ


รูปแบบวิดีโอที่โปรแกรม Ren'Py รองรับได้แก่
  • VP9
  • VP8
  • Theora
  • MPEG-4 Part 2 ทั้ง DivX และ Xvid
  • MPEG-2
  • MPEG-1

ย้ำว่าข้างบนคือรูปแบบการถอดรหัสวิดีโอ (Decoding) ที่รองรับ ไม่ได้หมายถึงนามสกุลของไฟล์วิดีโอ นามสกุลหนึ่งสามารถเข้ารหัสได้หลายแบบ ซึ่งอาจไม่ใช่รูปแบบที่โปรแกรม Ren'Py รองรับก็ได้ วิธีแก้ปัญหารูปแบบไม่รองรับที่ง่ายที่สุดคือการแปลงไฟล์ โดยใช้เว็บหรือโปรแกรมแปลงไฟล์ เช่น Fornat Factory สำหรับการสร้างเกมลงบน Android และ iOS ควรตรวจสอบรูปแบบวิดีโอที่ระบบปฏิบัติการนั้นรองรับด้วย

ไม่มีความคิดเห็น:

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