How to create Flappy Bird (Part 2) – Add Physics to the Bird

บทนำ (Overview)

จากบทความที่แล้วเราได้เตรียมพื้นที่ ที่จะแสดง “game” ของเรา รวมทั้งทดลองสร้างสีของ “background” (How to create Flappy Bird (Part 1) – Create game world) มาในขั้นตอนนี้เราลองสร้างตัวนกกัน (แต่ลองสร้างเป็นกล่องสี่เหลี่ยมแทนตัวนกก่อน) จากนั้นใส่ “physics” ให้กับตัวนก เพื่อที่สามารถบินโฉบตามแรงโน้มถ่วงได้ เริ่มน่าสนุกแหะ !!! มาลองกันเถอะครับ

ขั้นตอน (Steps)

ทำการโหลดรูป “bird.png” ของเรา โดยตั้งชื่ออ้างอิงคือ “bird” โดยรูปนกดังกล่าว เราทดลองสร้างเป็นสี่เหลี่ยมก่อน ขนาด 50 x 50 pixel
```
  preload: function() {
      game.stage.backgroundColor = '#71c5cf';
      //โหลดรูป Bird
      game.load.image('bird', 'assets/bird.png');
  }
```
จากนั้นเราก็จะแสดงรูป “bird.png” ขึ้นมา โดยเรียกใช้ตัวอ้างอิง “bird”
```
    create: function() { 

       this.bird = this.game.add.sprite(100, 245, 'bird');
    }
```

สร้าง physics ให้กับตัว “bird” โดยกำหนดให้ ตัวนกตกลงมาตามแรงโน้มถ่วง

    create: function() { 

       this.bird = this.game.add.sprite(100, 245, 'bird');

       //กำหนด physic ให้กับตัวแปร game world ของเราที่ชื่อ game
       game.physics.startSystem(Phaser.Physics.ARCADE);
       //ใช้งาน physics ให้ตัว bird
       game.physics.arcade.enable(this.bird);
       //กำหนดให้มีแรงโน้มถ่วงตามแนวแกน y
       this.bird.body.gravity.y = 1000;

    }

เราจะพบว่าตัว “bird” ของเราจะหลุดออกนอก “Game Wold” ไปเลย เพราะฉนั้นเราจะมาตรวจสอบกันว่าเมื่อตัว “bird” หลุดออกนอกเกมส์ เราจะเริ่มต้นใหม่ดังนี้
```
    update: function() {
      //ถ้า bird ไม่ได้อยู่ใน game world
      if (this.bird.inWorld == false){
        	this.restartGame();
      }

    }
```
เมื่อตัว Bird หลุดออกจาก game world จะทำการเรียกใช้ฟังก์ชัน this.restartGame(); เราจะต้องสร้าง function ดังกล่าวให้สามารถเรียกใช้เพื่อเริ่มเกมส์ใหม่ดังนี้
```
   game.state.start('main');
```
สามารถดาวน์โหลด source-code ของบทความนี้ได้ที่ https://gist.github.com/thaisingle/1fa2c841d470bed2bc62

Articles

How to create Flappy Bird (Part 2) – Add Physics to the Bird

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