How to create the game with Phaser framework (Part5)

บทนำ (Overview)

จากบทความที่แล้วเราสามารถสร้างฉากหลังพร้อมกับแท่นหินไว้สำหรับกระโดด (How to create the game with Phaser framework (Part4)) มาในบทความนี้เราจะสร้างตัวละคร 1 ตัวเข้ามาในเกมส์และมีการใช้งาน “physics” ด้วย เช่น แรงโน้มถ่วงเป็นต้น

ขั้นตอน (Steps)

  1. เปิดไฟล์ “part5.html”
  2. เราจะให้รูปตัวพระเอกของเราแสดงใน “Game World” ซึ่งเราได้เคยโหลดไว้แล้วใน “functon preload()” โดยใช้ชื่ออ้างอิงว่า “dude”dude
  3. สามารถเพิ่ม “code” ใน “function create()” ดังนี้
        // สร้างพระเอกของเราใน "Game World" และสร้างเก็บไว้ในตัวแปร "player"
        player = game.add.sprite(32, game.world.height - 150, 'dude');
    

    game9

  4. จะเห็นได้ว่าพระเอกของเราดันไปลอยอยู่กลางอากาศ เพราะเรากำหนดค่า x, y เป็น 32, game.world.height – 150 แต่ไม่เป็นไรเราจะเริ่มใช้งาน physics จากที่เราเคยปรากาศว่าจะใช้งานแล้วแต่ต้น “game.physics.startSystem(Phaser.Physics.ARCADE);”
        //  เราจะมากำหนดให้ตัวแปร "player" เราสามารถใช้งาน "physics" ได้
        game.physics.arcade.enable(player);
    
  5. จากนั้นตั้งค่าให้ “Game” เรามีแรงดึงดูดเหมือนโลกของเรา
        // ตัวแปร player สามารถใช้งาน physics ได้ทันที่
        // เกมส์เราเพื่อความสมจริงสร้างแรงดึงดูดตามแกน Y (หรือจะกำหนดให้เป็นแกน x ก็ได้)
        // ส่วนค่าแรงดึงดูสามารถตั้งได้ดังนี้
        player.body.gravity.y = 300;
    
  6. พระเอกของเราล่วงมาจริงๆด้วยแต่ดันหลุดออกจาก “Game World” หายไปเลย game10
  7. ยังมี property สำหรับ “physics” เพื่อไม่ให้เกิน “Game World” ของเรา
       // ใช้ "collideWorldBounds" ให้เป็นค่า "True" เพื่อไม่ให้เลย "Game World"
       player.body.collideWorldBounds = true;
    

    game11

  8. เพื่อให้สมจริงเมื่อตกจากที่สูงแล้วตัวเราเด้งดึ๊ง ๆ ได้ ก็มี Property สำหรับตั้งค่า Physics ดังนี้
       // ใช้ bounce และตั้งค่าแกน Y ให้ตัวละครมีการชนกับวัตถุแล้วเด้งดึ๊ง
       player.body.bounce.y = 0.2;
    
  9. สรุป “Code” ที่อธิบายในบทความนี้
    <script type="text/javascript">
    
    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
    
    function preload() {
    
        game.load.image('sky', 'assets/sky.png');
        game.load.image('ground', 'assets/platform.png');
        game.load.image('star', 'assets/star.png');
        game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
    
    }
    
    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;
    
    }
    
    function update() {
    }
    
    </script>
    

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

ใส่ความเห็น