How to create the game with Phaser framework (Part6)

บทนำ (Overview)

คราวที่แล้วเรานำเสนอ (How to create the game with Phaser framework (Part5)) การสร้างพระเอกของเราขึ้นโดยเรียกใช้ physic ทั้งแรงดึงดูด (gravity)  การไม่ให้ตัววัตถุออกนอก “Game World” (collideWorldBounds) และการเด้งดึ๊ง ๆ ของวัตถุชนกัน (bounce) มาในบทความนี้เราจะสร้างให้พระเอกของเราสามารถยืนบนพื้นหญ้า และแท่นหินทั้ง 3 ได้

ขั้นตอน (Steps)

  1.  เปิดไฟล์ “part6.html”
  2. เราจะให้ตรวจจับการชนของ 2 วัตถุคือ “player” และ “Group” ที่ชื่อ “platforms” ซึ่งบรรจุวัตถุของ 1 หญ้า และ 3 แท่นหิน ส่งผลให้ไม่ทับและทะลุออกไป
  3. โดยเราจะเขียนใน “function update” ดังนี้
    function update() {
    
        //  ใช้งาน physics ให้มีการปะทะกันระหว่างวัตถุ
        game.physics.arcade.collide(player, platforms);
    
    }
    
  4. เมื่อลองทดสอบพบว่า พระเอกของเราไม่ทะลุผ่านพื้นหญ้าแล้ว แต่ดันเหยียบหญ้ายุบผ่าน “Game World” เราไปเลยgame12
  5. ในส่วนที่ตัวพระเอกของเราไม่ทะลุไปด้วยเนื่องจาก เคยถูกตั้งค่า “collideWorldBounds” ไว้นั้นเอง
        player.body.collideWorldBounds = true;
    
  6. ดังนั้นวิธีแก้ปัญหา เราจะไม่ใช้ “.body.colideWorldBounds” กับพื้นหญ้า (ground) และแท่นหิน (ledge1 ledge2 และ ledge3) เพราะจะทำให้ตัวละครเราไม่มองว่าพื้นหญ้าเป็นของ “Game World” ส่งผลให้เวลาที่พระเอกเรากระโดด ค่า “Property” ของ “player.body.bounce.y = 0.2;” ไม่สนใจ ส่งผลคือไม่เด้งดึ๊ง แต่เราจะใช้ “.body.immovable = true;” คือบังคับไม่ให้วัตถุเคลื่อนที่นั้นเอง แถมพระเอกของเรายังเด้งดึ๊งๆ ด้วย
        ground.body.immovable = true;
        ledge1.body.immovable = true;
        ledge2.body.immovable = true;
        ledge3.body.immovable = true;
    

    game13

  7. สรุป “code” ในบทความนี้
    function create() {
    
        game.add.sprite(0, 0, 'sky');
    
    		platforms = game.add.group();
        platforms.enableBody = true;
    
    		var ground = platforms.create(0, game.world.height - 64, 'ground');
        ground.scale.setTo(2, 2);
    
    		var ledge1 = platforms.create(400, 400, 'ground');
    		var ledge2 = platforms.create(350, 100, 'ground');
    		var ledge3 = platforms.create(-150, 250, 'ground');
    
        player = game.add.sprite(32, game.world.height - 150, 'dude');
    
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.physics.arcade.enable(player);
    
        player.body.bounce.y = 0.2;
        player.body.gravity.y = 300;
        player.body.collideWorldBounds = true;
    
        ground.body.immovable = true;
        ledge1.body.immovable = true;
        ledge2.body.immovable = true;
        ledge3.body.immovable = true;
    
    }
    
    function update() {
    
        game.physics.arcade.collide(player, platforms);
    
    }
    
    </script>
    
    

บทความที่เกี่ยวข้อง

ใส่ความเห็น