How to create the game with Phaser framework (Part8)

บทนำ (Overview)

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

ขั้นตอน (Steps)

เปิดไฟล์ “part7.html”

เราจะมากำหนดให้ตัวพระเอกของเราสามารถทำภาพเคลื่อนไหว (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);

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

ถึงตรงนี้แล้ว ลองทดสอบเวลาเดินมันยังแข็งๆ ไม่เหมือนคนก้าวเดิน เราจะต้องมาสั่งให้ “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;
    }

สรุป “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>

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

Articles

How to create the game with Phaser framework (Part8)

ใส่ความเห็น ยกเลิกการตอบ