การสร้าง Animation จาก Sprite sheet

#HelloGameDev #HelloErmine #HelloWorld2021

การสร้าง Animation จาก Sprite sheet

จากที่น้อง ๆ ได้เรียนเรื่อง Sprite มาข้างต้นแล้ว เราจะมาเริ่มสร้าง animation กัน โดยวิธีการสร้าง animation นั้นมีหลายวิธีด้วยกัน ซึ่งน้อง ๆ สามารถหาดูเพิ่มเติมได้ที่ แหล่งอ้างอิง โดยวิธีที่พี่ ๆ จะสอนคือการทำ animation ด้วยการนำ Sprite sheet มาเล่นแต่ละเฟรมภาพไปเรื่อย ๆ จนเกิดเป็นภาพเคลื่อนไหวนั่นเอง

1. เริ่มจากขั้นตอนแรกคือ ให้ทำการ preload แบบ Sprite sheet แล้วกำหนด frameWidth, frameHeight

น้อง ๆ ต้องกำหนด frameWidth และ frameHeight ให้ถูกต้อง โดยถ้ารูปของน้อง ๆ เป็นแนวนอน ให้ กำหนด frameHeight เท่ากับความสูงของรูปที่ใช้ เเละกำหนด frameWidth = ความยาวของรูป/จำนวนรูปในเฟรม

preload() {
       this.load.spritesheet('bird','src/image/bird.png',
       {frameWidth: 410 , frameHeight: 310});
    }

นกในตัวอย่างมี 8 เฟรม จะได้ความยาวรูปเท่ากับ 3280 และสามารถคำนวณ frameWidth ได้ว่า 3280 / 8 = 410 นั่นเอง

2. ต่อมา ภายใน Create function อันดับแรกให้น้อง ๆ ทำการ add Sprite ก่อน

create() {
        bird = this.physics.add.sprite(425, 700, 'bird').setScale(0.5);       
}

3. ต่อมา ให้ใช้คำสั่ง this.anims.create ภายใน Create function

this.anims.create({
    key: 'birdAni',
    frames: this.anims.generateFrameNumbers('bird', {
        start: 0,
        end: 7
    }),
    duration: 500,    
    repeat: -1
})

กำหนด key ให้ไม่ซ้ำกับ key ตอน add Sprite เเละ key อื่น ๆ

• โดยที่

  • duration คือ ความเร็วในการเล่นต่อรอบ ค่ายิ่งเยอะ animation ก็จะยิ่งช้า โดย 1000 = 1 วินาที (ในตัวอย่างคือ 500 = 0.5 วินาที จะได้ผลเป็น 0.5 วินาที ต่อ 1 รอบนั่นเอง)

  • frame ใช้กำหนดรูปที่จะใช้และเลือกว่าจะเริ่มเล่นรูปจาก frame ไหนก่อน (โดย frame แรกคือ frame0 นับจากซ้ายไปขวา)

  • repeat คือ จำนวนรอบที่ animation จะแสดง (ถ้ากำหนดเป็น -1 มันจะเป็นการวน loop ไปเรื่อย ๆ )

4. สุดท้ายให้ใช้คำสั่ง anims.play ใน Update function เพื่อให้ animation ทำงานในเกมได้สมบูรณ์

update(delta, time) {
        bird.anims.play('birdAni', true);
}

ใช้ key เดียวกับตอนสร้าง anims

ผลลัพธ์ที่ได้

ตัวอย่าง Animation

เท่านี้เราก็จะได้นกขยับปีกเเล้ว เห็นไหม...ไม่ยากเลยใช่ไหมครับน้อง ๆ

สรุปภาพรวมการทำ Animation

preload() {
       this.load.spritesheet('bird','src/image/bird.png',
        { frameWidth: 410 , frameHeight: 310});
    }

create() {
    bird = this.physics.add.sprite(425, 700, 'bird').setScale(0.5);
    
    this.anims.create({
        key: 'birdAni',
        frames: this.anims.generateFrameNumbers('bird', {
            start: 0,
            end: 7
        }),
        duration: 500,
        framerate: 0,
        repeat: -1
    })
}

update(delta, time) {
    bird.anims.play('birdAni', true);
}