How to create Flappy Bird (Part 6) – Flappy

หมวดหมู่ HTML5

บนทนำ (Overview)

เมื่อเรานับแต้มได้ (How to create Flappy Bird (Part 5) – Scoring and Overlapping) ส่วนของแกนหลักของก็จบสิ้น เพียงแต่เพื่อเพิ่มสนุก ก็จะตบแต่งเล็ก ๆ น้อยต่อไป จากบทความนี้ เราจะให้เวลานกบินขึ้นก็เงยหน้าขึ้น บินโฉบลงก็ก้มหน้าลง หลักการคือ กำหนดจุดหมุดของตัวนก ถ้าจะบินลงให้เพิ่มองศาการหมุด และเมื่อเปิดใช้ physics แรงโน้มถ่วงด้วยจะดูเหมือนนกบินลงมาพร้อมก้ม ส่วนบินเงยหน้า เราจะลดองศาลง จากนั้นสั่งให้สร้าง animation และทำการเล่น เมื่อเวลากดปุ่มกระโดด จะดูเหมือนนกบินเงยหน้าขึ้น…flappy18

ขั้นตอน (Steps)

  1. เมื่อตัวนกบนโฉบลงหัวนกจะกดลง แต่ตอนนี้ “bird” จะยังแข็ง ๆ มองแต่ข้างหน้า เพราะฉนั้นเราจะใช้หลักการหมุนของ “bird” ใน “update: function()” ดังนี้ 
       //จุดหมดหมุนคือตำแหน่ง x,y ของ object คือมุมซ้ายบน
   this.bird.angle += 1;
  2. แต่ในการบินโฉบเราจะหมุนไม่เกิน 20 องศา 
         if (this.bird.angle < 20) {
      	this.bird.angle += 1;
      }

    flappy11

  3. ในทำนองเดียวกันเมื่อบินขึ้นหัว “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();
    }

    flappy12

  4. อย่างที่กล่าวไว้จุดหมุนของ bird ดันไปอยู่ ซ้ายบน ดูไม่ค่อยสมจริงกับต้นฉบับ เราสามารถเปลี่ยนจุดหมุนได้ในส่วนของ “create: function()”

    //ปรับเปลี่ยนจุดหมุน
    this.bird.anchor.setTo(-0.2, 0.5);

  5. สามารถดาวน์โหลด “source-code” ของบทความนี้ได้จาก  https://gist.github.com/thaisingle/18d5715d1fb8fcdf7a9a

ใส่ความเห็น