บนทนำ (Overview)
เมื่อเรานับแต้มได้ (How to create Flappy Bird (Part 5) – Scoring and Overlapping) ส่วนของแกนหลักของก็จบสิ้น เพียงแต่เพื่อเพิ่มสนุก ก็จะตบแต่งเล็ก ๆ น้อยต่อไป จากบทความนี้ เราจะให้เวลานกบินขึ้นก็เงยหน้าขึ้น บินโฉบลงก็ก้มหน้าลง หลักการคือ กำหนดจุดหมุดของตัวนก ถ้าจะบินลงให้เพิ่มองศาการหมุด และเมื่อเปิดใช้ physics แรงโน้มถ่วงด้วยจะดูเหมือนนกบินลงมาพร้อมก้ม ส่วนบินเงยหน้า เราจะลดองศาลง จากนั้นสั่งให้สร้าง animation และทำการเล่น เมื่อเวลากดปุ่มกระโดด จะดูเหมือนนกบินเงยหน้าขึ้น…
ขั้นตอน (Steps)
- เมื่อตัวนกบนโฉบลงหัวนกจะกดลง แต่ตอนนี้ “bird” จะยังแข็ง ๆ มองแต่ข้างหน้า เพราะฉนั้นเราจะใช้หลักการหมุนของ “bird” ใน “update: function()” ดังนี้
//จุดหมดหมุนคือตำแหน่ง x,y ของ object คือมุมซ้ายบน this.bird.angle += 1;
- แต่ในการบินโฉบเราจะหมุนไม่เกิน 20 องศา
if (this.bird.angle < 20) { this.bird.angle += 1; }
- ในทำนองเดียวกันเมื่อบินขึ้นหัว “bird” จะต้องเชิดขึ้น เราสามารถใช้คำสั่ง “this.bird.angle = -20;” ได้ แต่เมื่อลองทดสอบดูแล้วจะรู้สึกกระตุกๆ ไมไหลลื่นเท่าที่ควร เนื่องจากเป็นการเปลี่ยนองศาโดยทันที เราจะมาแก้ไข โดยการ “animation” ให้กับ “bird” ของเราเวลาเงยหน้าขึ้น
jump: function() { this.bird.body.velocity.y = -350; // สร้าง animation ให้กับ bird var animation = game.add.tween(this.bird); // โดยการหมุนย้อนกลับ 20 องศา ใน 100 มิลลิวินาที animation.to({angle: -20}, 100); // เริ่มต้นเล่น animation animation.start(); }
- อย่างที่กล่าวไว้จุดหมุนของ bird ดันไปอยู่ ซ้ายบน ดูไม่ค่อยสมจริงกับต้นฉบับ เราสามารถเปลี่ยนจุดหมุนได้ในส่วนของ “create: function()”
//ปรับเปลี่ยนจุดหมุน
this.bird.anchor.setTo(-0.2, 0.5); - สามารถดาวน์โหลด “source-code” ของบทความนี้ได้จาก https://gist.github.com/thaisingle/18d5715d1fb8fcdf7a9a