irpg Community
Ren'Py พื้นฐาน | บทที่ 8 Animation and Transformation Language (ATL) - 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 พื้นฐาน | บทที่ 8 Animation and Transformation Language (ATL) (/thread-3410.html)

Ren'Py พื้นฐาน | บทที่ 8 Animation and Transformation Language (ATL) - Mikichan - 08-31-2019

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


จากบทที่แล้วเราได้เรียนการแสดงรูปและวิดีโอเบื้องตันแล้ว ในบทนี้จะมาใส่ลูกเล่นให้รูปมากขึ้นกว่าเดิม การใส่ลูกเล่นขั้นสูงต้องใช้ ATL (Animation and Transformation Language) ATL คือส่วนขยายจากคำสั่งอื่น อยู่ภายในบล็อกของคำสั่งอื่น คำสั่งแม่เพียงอย่างเดียวทำได้แค่ใช้งานพื้นฐานเท่านั้น สิ่งที่ขยายมาใน ATL คือลูกเล่น หรืออธิบายใหม่อย่างง่าย ๆ ว่า ATL ก็คือลูกเล่นนั่นเอง

[Image: 03.png]



คำสั่งแม่ของ ATL

ATL เป็นส่วนขยายของคำสั่งอื่น ต้องอยู่ภายในบล็อกของคำสั่งที่ไปขยาย คำสั่งที่ ATL สามารถขยายได้มีดังนี้


Show และ Scene

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

ตัวอย่างการใส่ ATL ในบล็อก show
Quote:show aiya underwear:
     xalign 0.75   # บรรทัดนี้คือ ATL


Image

image คือคำสั่งสำหรับประกาศตัวแปรรูป เราสามารถใส่ ATL ไปพร้อมกับการประกาศตัวแปรรูปได้ แต่เนื่องจาก image เป็นคำสั่งประมวลผลล่วงหน้า (Preprocessor Directive) ซึ่งจะแซงคิวคำสั่งอื่น ทำให้ลูกเล่น ATL ในบล็อก image จึงแซงคิวคำสั่งอื่นตามไปด้วย

อย่าลืมว่าคำสั่ง image เป็นเพียงคำสั่งประกาศตัวแปรรูป ไม่ใช่คำสั่งแสดงรูป ถ้าต้องการแสดงรูปต้องใช้คำสั่ง show หรือ scene แล้วตามด้วยชื่อตัวแปรรูป

ตัวอย่างการใส่ ATL ในบล็อก image
Quote:image a_angry:
     "aiya underwear.png"   # บรรทัดนี้คือ ATL
     xalign 0.75   # บรรทัดนี้คือ ATL


Transform

transform คือคำสั่งรูปที่เกี่ยวกับตำแหน่งรูป เช่น กำหนดให้รูปอยู่ฝั่งซ้ายของหน้าจอ สามารถใส่ ATL ที่เกี่ยวกับตำแหน่งรูปได้ แต่ผู้เขียนแนะนำให้ใช้คำสั่ง show หรือ scene แทนดีกว่า เนื่องจากสามารถรองรับลูกเล่นตำแหน่งรูปได้เหมือนกัน อีกทั้งยังใช้ง่ายและหลากหลายกว่าคำสั่ง transform ด้วย

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

ตัวอย่างการใส่ ATL ในบล็อก transform
Quote:transform moveright:
     linear 5.0 yalign 1.0     # บรรทัดนี้คือ ATL



Align และ  Pos: กำหนดตำแหน่งรูป

คำสั่งชุด Align
xalign คือคำสั่งระบุตำแหน่งหน้าจอ แบบอัตราส่วน ในแนวนอน โดย 0.0 คือซ้าย และ 1.0 คือขวา
yalign คือคำสั่งระบุตำแหน่งหน้าจอ แบบอัตราส่วน ในแนวตั้ง โดย 0.0 คือบน และ 1.0 คือล่าง

คำสั่งชุด Pos
xpos คือคำสั่งระบุตำแหน่งหน้าจอ แบบตามจริง ในแนวนอน ระบุเป็นพิกเซล
ypos คือคำสั่งระบุตำแหน่งหน้าจอ แบบตามจริง ในแนวตั้ง ระบุเป็นพิกเซล

คำสั่งชุด Align และ Pos ใช้สำหรับการแสดงรูปในตำแหน่งที่ระบุไว้ ต้องตามด้วยตัวเลข ความแตกต่างของคำสั่งสองชุดนี้อยู่ที่การเียกตำแหน่งบนหน้าจอ Align จะอ้างอิงจากอัตราส่วนหน้าจอ ค่าควรอยู่ระหว่าง 0.0 ถึง 1.0 ส่วนคำสั่งชุด Pos อ้างอิงจากพิกเซลจริง ในทางปฏิบัติคำสั่งสองชุดนี้ใช้ระบุตำแหน่งได้เหมือนกัน

[Image: 01.png]
รูปที่ 8.1 เปรียบเทียบคำสั่งชุด Align และ Pos (จอขนาดมาตรฐาน)

ตัวอย่างการใช้คำสั่งชุด Pos
Quote:show star:
     xpos 275 ypos 100   # แสดงรูป star ที่ตำแหน่ง (275, 100)

[Image: 02.png]
รูปที่ 8.2 การใช้คำสั่งชุด Pos เพื่อแสดงรูปในตำแหน่งที่ต้องการ



Linear: เคลื่อนที่รูป


......

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


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

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

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