How to create the game with Phaser framework (Part8)

บทนำ (Overview)

จากบทความที่แล้ว (How to create the game with Phaser framework (Part7)) เราสามารถบังคับให้ตัวพระเอกของเราสามารถไปทางซ้ายและไปทางขวา รวมถึงกระโดดดึ๊ง ๆ ได้ แต่อย่างไรก็ตาม เวลาเคลื่อนที่ไปด้านขวาพระเอกของเราดันหันไปด้านซ้าย และดูนิ่งๆ ไม่ยอมก้าวเดิน เราจะมาแก้ปัญหานี้กัน

ขั้นตอน (Steps)

  1. เปิดไฟล์ “part7.html”
  2. เราจะมากำหนดให้ตัวพระเอกของเราสามารถทำภาพเคลื่อนไหว (Animation) ซึ่งสามารถกำหนดได้ในส่วนของ “function create()” ได้ดังนี้
        //ตั้งชื่ออ้างอิงว่า left และให้ใช้ภาพที่ frame 0, 1, 2, 3 เท่านั้น
        //10 คือ อัตราของ frame ที่ใช้สำหรับการทำ Animation
        //True คือ ให้เล่น Animation ไปเรื่อยๆจนกว่าสั่งหยุด
        player.animations.add('left', [0, 1, 2, 3], 10, true);
    
        //ตั้งชื่ออ้างอิงว่า right และให้ใช้ภาพที่ frame 5, 6, 7, 8 เท่านั้น
        player.animations.add('right', [5, 6, 7, 8], 10, true);
    
  3. ย้อนความจำสักนิด “player” เป็นตัวแปรที่เราสร้างเอาไว้ก่อนแล้ว จากภาพ “spritesheet” ที่ตั้งชื่อว่า “dude” ตาม “code” ดังนี้
        player = game.add.sprite(32, game.world.height - 150, 'dude');
    
  4. ย้อนกลับไปขั้นตอนที่ (2) เราสามารถกำหนดภาพเริ่มต้นของแต่ละ “frame” ได้ โดยแต่ละ “frame” มาจากภาพ “dude” ที่อ้างอิงใน “function create preload()” ดังนี้ dude
  5. จากภาพในข้อ (4) เราสามารถนับภาพ “frame” ทั้งหมด 9 “frame” โดยเราจะใช้ “frame” ที่ “0 – 3” สำหรับเมื่อกดปุ่มทางซ้าย และ “frame” ที่ “4” สำหรับมองหน้าตรงเวลาหยุดนิ่ง และ “frame” ตั้งแต่ “5 – 8” สำหรับกดปุ่มทางด้านขวา (การอ้างอิง “frame” จะเริ่มตั้งแต่ 0)
  6. เราลองทดสอบใน “Web Browser” กัน game18
  7. เราจะพบว่าเริ่มเกมส์ตัวละครเราเปลี่ยนจากหันซ้ายมาหันขวาแต่ในความเป็นควรจะหันตรงกลาง โดยใช้ภาพจาก “frame” ที่ 4 เราจะกำหนด “code” ให้ตัว “game” ตรวจสอบตลอดเวลาที่ “function update()”
        else
        {
            //เมื่อไม่มีการกดปุ่มใด แสดงว่ากำลังยืนเฉย ๆ ให้แสดง frame ที่ 4
            player.frame = 4;
        }
    

    game19

  8. ถึงตรงนี้แล้ว ลองทดสอบเวลาเดินมันยังแข็งๆ ไม่เหมือนคนก้าวเดิน เราจะต้องมาสั่งให้ “Animation” ของเราทำงาน เช่น เมื่อกดปุ่มทางขวาก็ทำท่าเดินทางขวา และกดปุ่มซ้ายก็ทำท่าก้าวเดินทางซ้าย โดยเล่นตาม “Animation” ที่เรากำหนดไว้ตามขั้นตอนที่ (2)
        if (cursors.left.isDown)
        {
            player.body.velocity.x = -150;
    
            //พอมีการกดปุ่มซ้าย ให้เล่น animation ตามชื่ออ้างอิง "left" ซึ่งจะเล่น frame ที่ 0 - 3
            player.animations.play('left');
        }
        else if (cursors.right.isDown)
        {
            player.body.velocity.x = 150;
    
            //พอมีการกดปุ่มขวา ให้เล่น animation ตามชื่ออ้างอิง "right" ซึ่งจะเล่น frame ที่ 5 - 8
            player.animations.play('right');
        }
        else
        {
            //หยุดเล่น Animation เมื่อไม่ได้กดปุ่มใดๆ
            player.animations.stop();
            player.frame = 4;
        }
    

    game20

  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;
        player.animations.add('left', [0, 1, 2, 3], 10, true);
        player.animations.add('right', [5, 6, 7, 8], 10, true);
    
        ground.body.immovable = true;
        ledge1.body.immovable = true;
        ledge2.body.immovable = true;
        ledge3.body.immovable = true;
    
        cursors = game.input.keyboard.createCursorKeys();
    
    }
    
    function update() {
    
        game.physics.arcade.collide(player, platforms);
    
    		player.body.velocity.x = 0;
    
    		if (cursors.left.isDown)
        {
            player.body.velocity.x = -150;
            player.animations.play('left');
        }
        else if (cursors.right.isDown)
        {
            player.body.velocity.x = 150;
            player.animations.play('right');
        }
        else
        {
            player.animations.stop();
            player.frame = 4;
        }
    
        if (cursors.up.isDown && player.body.touching.down)
        {
            player.body.velocity.y = -350;
        }
    
    }
    
    </script>
    

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

ใส่ความเห็น