How to create Flappy Bird (Part 11) – Adding the ground

หมวดหมู่ HTML5

บทนำ (Overview)

จากบทความก่อนหน้าเราได้ใส่พื้นหลังประกอบไปด้วยท้องฟ้า เมฆ  (How to create Flappy Bird (Part 10) – Image background) มาครั้งนี้เราจะใส่พื้นด้วย แต่ไม่ใช่แค่พื้นธรรมดานะครับ ต้องทำให้มมันดูเหมือนว่ามีการเคลื่อนไหวด้วย

flappy18

ขั้นตอน (Steps)

  1. เราจะมาสร้างพื้นกัน ที่มีลักษณะเคลื่อนที่ได้ ทำให้เหมือนกับนกกำลังบินไปด้านขวา โดยใช้รูป ground
  2. เริ่มต้นจากโหลดรูปใน “preload: function()” 
       game.load.image('ground', 'assets/ground.png');
  3. จากนั้นให้แสดง และทำให้เคลื่อนไหวใน “create: function()” 
        //แสดงภาพ Background โดยใช้ tileSprite มีพารามิเตอร์ (x, y, width, height, key)
    this.ground = this.game.add.tileSprite(0, 400, 288, 112, 'ground');
    //ทำภาพให้เคลื่อนไหว มีพารามิเตอร์ (xSpeed, ySpeed)
    this.ground.autoScroll(-200, 0);

    flappy15

  4. สามารถดาวน์โหลด source-code ได้ที่ https://gist.github.com/thaisingle/4e99fba99aa2a592c6bd

ใส่ความเห็น