เทคนิคการสร้าง Animations ด้วยโปรแกรม Construct 2

Microsoft Office Knowledge Word, Excel, powerpoint, line , โปรแกรมเสริมต่างๆ

Moderator: mindphp, ผู้ดูแลกระดาน

Rujikon
PHP Super Member
PHP Super Member
โพสต์: 491
ลงทะเบียนเมื่อ: 02/05/2018 9:57 am

เทคนิคการสร้าง Animations ด้วยโปรแกรม Construct 2

โพสต์ที่ยังไม่ได้อ่าน โดย Rujikon »

con1.jpg
con1.jpg (21.98 KiB) Viewed 1479 times
เราจะมาเรียนรู้การสร้าง ตัวละคร ซึ่งการเคลื่อนไหว เช่น การเดิน หรือ กระโดดนั้น ที่เราเห็นนั้นก็เกิดจากการนำภาพ ทีละเฟรมมาต่อกันทำให้เกิดความต่อเนื่องของภาพ หรือ ที่เราเรียกว่า “อนิเมชั่น” (Animations)

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

[list]การสร้างภาพเคลือนไหวของตัวละคร (Animations Bar) [/list]
Animetion Bar จะใช้ในการสร้างภาพเคลื่อนไหวของตัวละคร โดยสามารถสร้างได้หลายรูปแบบ เช่น การเดิน การวิ่ง กระโดด เป็นต้น
  • blog11_001.png
    blog11_001.png (6.54 KiB) Viewed 1479 times
จากรูปคลิกขวา จะปรากฏรายการให้เลือกเพิ่มภาพเคลื่อนไหวใหม่ หรือสามารถเพิ่มทั้ง Folder ได้
  • 002.png
    002.png (12.16 KiB) Viewed 1479 times
  • Add Animetion คือการเพิ่มภาพเข้ามาที่ละภาพเข้ามาในเฟรม
    Add Folder คือการเพิ่มภาพเข้ามาทั้ง Folder เข้ามาในเฟรม
และเมื่อคลิกขวาที่ภาพเคลื่อนไหวแต่ละตัว สามารถที่จะ Preview ดูตัวอย่างของภาพเคลื่อนไหวได้

ที่แถบ Properties ของภาพเคลื่อนไหวที่เลือก มีคุณสมบัติสำคัญ คือ
  • จจต.png
    จจต.png (4 KiB) Viewed 1479 times
  • Speed คือ จำนวนภาพเคลื่อนไหวที่แสดงใน 1 วินาที แต่ถ้ากำหนดเป็น 0 ภาพเคลื่อนไหวนั้นจะหยุดนิ่ง
  • Loop คือ ให้แสดงภาพเคลื่อนไหววนซ้ำไปเรื่อย ถึงภาพสุดท้าย
  • Repeat count คือ จำนวนรอบในการแสดงซ้ำ
  • Repeat to คือ การกำหนดเฟรมเริ่มต้นของภาพเคลื่อนไหวโดยปกติจะกำหนด เป็น 0 คือ ภาพแรก
  • Ping-pong คือ การกำหนดให้แสดงภาพเคลื่อนไหวแบบไป-กลับ คือ เล่นตั้งภาพแรกจนถึงภาพสุดท้ายแล้วกลับมาเล่นภาพสุดท้ายใหม่
กำหนดลำดับการแสดงภาพเคลือนไหว (Animation frames bar)

Animetion Frame bar สำหรับการแสดงลำดับภาพของการเคลื่อนไหวที่เราได้เลือก ซึ่งสามารถเพิ่ม- ลดขนาดของภาพ หรือสลับตำแหน่งของภาพในการเคลื่อนไหวได้
  • 004.png
    004.png (12.92 KiB) Viewed 1479 times
เมื่อคลิกขวาที่หน้าต่าง Animation frames bar จะมีรายการคำสั่ง ดังต่อไปนี้
  • 005.png
    005.png (23.63 KiB) Viewed 1479 times
  • Add frame คือ การเพิ่มเฟรมของภาพเคลื่อนไหวขึ้นมาที่ท้ายสุดของแถว
  • Duplicate last frame คือ การสำเนาของภาพเคลื่อนไหวขึ้นมาที่ท้ายสุดของแถว
  • Reverse frames Reverse คือ การกลับลำดับของภาพเคลื่อนไหวทั้งหมด
  • Import frames คือ การเพิ่มภาพเคลื่อนไหว สามารถเพิ่มได้ทีละภาพ หรือหลายภาพพร้อม กันได้
  • Reload files from คือ การเรียกข้อมูลภาพเคลื่อนไหวอีกครั้ง การ Reload จะมีสองแบบคือ โหลดใหม่เฉพาะไฟล์ที่เลือก หรือโหลดใหม่ทั้งหมด
อ้างอิงแหล่งที่มารูปภาพ : https://www.google.com/

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 84