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” ให้กับตัวนก เพื่อที่สามารถบินโฉบตามแรงโน้มถ่วงได้  เริ่มน่าสนุกแหะ !!! มาลองกันเถอะครับflappy18

ขั้นตอน (Steps)

bird1

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

    flappy2

  3. สร้าง 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;
    
        }
    

    flappy3

  4. เราจะพบว่าตัว “bird” ของเราจะหลุดออกนอก “Game Wold” ไปเลย เพราะฉนั้นเราจะมาตรวจสอบกันว่าเมื่อตัว “bird” หลุดออกนอกเกมส์ เราจะเริ่มต้นใหม่ดังนี้
        update: function() {
          //ถ้า bird ไม่ได้อยู่ใน game world
          if (this.bird.inWorld == false){
            	this.restartGame();
          }
    
        }
    
  5. เมื่อตัว Bird หลุดออกจาก game world จะทำการเรียกใช้ฟังก์ชัน this.restartGame(); เราจะต้องสร้าง function ดังกล่าวให้สามารถเรียกใช้เพื่อเริ่มเกมส์ใหม่ดังนี้
       game.state.start('main');
    
  6. สามารถดาวน์โหลด source-code ของบทความนี้ได้ที่ https://gist.github.com/thaisingle/1fa2c841d470bed2bc62

ใส่ความเห็น