How to create Flappy Bird (Part 10) – Image background

หมวดหมู่ HTML5

บทนำ (Overview)

เมื่อได้รูปนกแล้ว (How to create Flappy Bird (Part 9) – Bird animation) เราก็มาต่อกันที่ Background ท้องฟ้าและทดลองปรับขอบของ “Game World” ให้พอดีกับ “Background” ดังนี้

flappy18

ขั้นตอน (Steps)

  1. เราจะมาเปลี่ยนจาก “Background” จากสีที่เรากำหนดมาเป็นรูปภาพ เพื่อให้ “game” น่าสนใจยิ่งขึ้น โดยใช้รูป ซึ่งมีขนาด 288 x 505background
  2. ทำการโหลดรูปแทนสี “background” ในส่วนของ “preload: function()” 
        //game.stage.backgroundColor = '#71c5cf';
    game.load.image('background', 'assets/background.png');
  3. จากนั้นแสดงรูป background ในส่วนของ ” create: function() ” 
         this.background = this.game.add.sprite(0, 0, 'background');
  4.  ลดขนาดของ “game world” ให้พอดีกับ “background” ขนาด 288 x 505 
         var game = new Phaser.Game(288, 505, Phaser.AUTO, 'flappyDiv');

    flappy14

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

ใส่ความเห็น