How to create Flappy Bird (Part 9) – Bird animation

พฤษภาคม 18, 2015หมวดหมู่ HTML5

บทนำ (Overview)

เมื่อส่วนประกอบหลักต่าง ๆ ของเกมส์เสร็จสิ้นจากนั้นเราเริ่ม ล่าสุดเราสามารถใส่เสียงให้กับเกมส์ได้ (How to create Flappy Bird (Part 8) – Jumping sound) ต่อไปเราจะมาทำรูปนกแทนภาพสี่เหลี่ยมกันทำให้ดูน่าสนใจยิ่งขึ้น

flappy18

ขั้นตอน (Steps)

เราจะมาเปลี่ยน “Bird” จากรูปกล่องสี่เหลี่ยมมาเป็นรูปนกที่สามารถขยับปีกได้
โดยแต่ละ frame จะมีขนาด 34 x 24 จำนวน 3 frame ซึ่งเราจะแก้ไข “code” ใน ” preload: function()” ดังนี้
```
    //game.load.image('bird', 'assets/bird.png');
    game.load.spritesheet('bird', 'assets/bird.png', 34, 24, 3);
```

จากนั้นมากำหนดให้นกกระพือปีกทันทีเมื่อแสดง “Bird”

       //โหลด bird
       this.bird = this.game.add.sprite(100, 245, 'bird');
       //ให้เล่น ตั้งแต่ frame 0 ถึง 2 ตลอดเวลา
       this.bird.animations.add('bird', [0, 1, 2], 10, true);
       //ขยับปีกเดี๋ยวนี้
       this.bird.animations.play('bird');

สามารถดาวน์โหลด “source-code” ได้จาก https://gist.github.com/thaisingle/fc589f881dfcbe4ed315

ใส่ความเห็น ยกเลิกการตอบ

คุณต้องเข้าสู่ระบบ เพื่อจะพิมพ์ความเห็น