เทคนิคการสร้าง 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 » 03/05/2018 3:06 pm

con1.jpg
con1.jpg (21.98 KiB) เปิดดู 132 ครั้ง

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

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

    การสร้างภาพเคลือนไหวของตัวละคร (Animations Bar)

Animetion Bar จะใช้ในการสร้างภาพเคลื่อนไหวของตัวละคร โดยสามารถสร้างได้หลายรูปแบบ เช่น การเดิน การวิ่ง กระโดด เป็นต้น

    blog11_001.png
    blog11_001.png (6.54 KiB) เปิดดู 132 ครั้ง

จากรูปคลิกขวา จะปรากฏรายการให้เลือกเพิ่มภาพเคลื่อนไหวใหม่ หรือสามารถเพิ่มทั้ง Folder ได้

    002.png
    002.png (12.16 KiB) เปิดดู 132 ครั้ง
    Add Animetion คือการเพิ่มภาพเข้ามาที่ละภาพเข้ามาในเฟรม
    Add Folder คือการเพิ่มภาพเข้ามาทั้ง Folder เข้ามาในเฟรม
และเมื่อคลิกขวาที่ภาพเคลื่อนไหวแต่ละตัว สามารถที่จะ Preview ดูตัวอย่างของภาพเคลื่อนไหวได้

ที่แถบ Properties ของภาพเคลื่อนไหวที่เลือก มีคุณสมบัติสำคัญ คือ

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

กำหนดลำดับการแสดงภาพเคลือนไหว (Animation frames bar)

Animetion Frame bar สำหรับการแสดงลำดับภาพของการเคลื่อนไหวที่เราได้เลือก ซึ่งสามารถเพิ่ม- ลดขนาดของภาพ หรือสลับตำแหน่งของภาพในการเคลื่อนไหวได้

    004.png
    004.png (12.92 KiB) เปิดดู 132 ครั้ง
เมื่อคลิกขวาที่หน้าต่าง Animation frames bar จะมีรายการคำสั่ง ดังต่อไปนี้

    005.png
    005.png (23.63 KiB) เปิดดู 132 ครั้ง
    Add frame คือ การเพิ่มเฟรมของภาพเคลื่อนไหวขึ้นมาที่ท้ายสุดของแถว
    Duplicate last frame คือ การสำเนาของภาพเคลื่อนไหวขึ้นมาที่ท้ายสุดของแถว
    Reverse frames Reverse คือ การกลับลำดับของภาพเคลื่อนไหวทั้งหมด
    Import frames คือ การเพิ่มภาพเคลื่อนไหว สามารถเพิ่มได้ทีละภาพ หรือหลายภาพพร้อม กันได้
    Reload files from คือ การเรียกข้อมูลภาพเคลื่อนไหวอีกครั้ง การ Reload จะมีสองแบบคือ โหลดใหม่เฉพาะไฟล์ที่เลือก หรือโหลดใหม่ทั้งหมด

อ้างอิงแหล่งที่มารูปภาพ : https://www.google.com/

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 21 และ บุคคลทั่วไป 0 ท่าน