บทนำ (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