How to create the game with Phaser framework (Part5)

บทนำ (Overview)

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

ขั้นตอน (Steps)

เปิดไฟล์ “part5.html”
เราจะให้รูปตัวพระเอกของเราแสดงใน “Game World” ซึ่งเราได้เคยโหลดไว้แล้วใน “functon preload()” โดยใช้ชื่ออ้างอิงว่า “dude”

สามารถเพิ่ม “code” ใน “function create()” ดังนี้

    // สร้างพระเอกของเราใน "Game World" และสร้างเก็บไว้ในตัวแปร "player"
    player = game.add.sprite(32, game.world.height - 150, 'dude');

จะเห็นได้ว่าพระเอกของเราดันไปลอยอยู่กลางอากาศ เพราะเรากำหนดค่า x, y เป็น 32, game.world.height – 150 แต่ไม่เป็นไรเราจะเริ่มใช้งาน physics จากที่เราเคยปรากาศว่าจะใช้งานแล้วแต่ต้น “game.physics.startSystem(Phaser.Physics.ARCADE);”
```
    //  เราจะมากำหนดให้ตัวแปร "player" เราสามารถใช้งาน "physics" ได้
    game.physics.arcade.enable(player);
```

จากนั้นตั้งค่าให้ “Game” เรามีแรงดึงดูดเหมือนโลกของเรา

    // ตัวแปร player สามารถใช้งาน physics ได้ทันที่
    // เกมส์เราเพื่อความสมจริงสร้างแรงดึงดูดตามแกน Y (หรือจะกำหนดให้เป็นแกน x ก็ได้)
    // ส่วนค่าแรงดึงดูสามารถตั้งได้ดังนี้
    player.body.gravity.y = 300;

พระเอกของเราล่วงมาจริงๆด้วยแต่ดันหลุดออกจาก “Game World” หายไปเลย

ยังมี property สำหรับ “physics” เพื่อไม่ให้เกิน “Game World” ของเรา

   // ใช้ "collideWorldBounds" ให้เป็นค่า "True" เพื่อไม่ให้เลย "Game World"
   player.body.collideWorldBounds = true;

เพื่อให้สมจริงเมื่อตกจากที่สูงแล้วตัวเราเด้งดึ๊ง ๆ ได้ ก็มี Property สำหรับตั้งค่า Physics ดังนี้
```
   // ใช้ bounce และตั้งค่าแกน Y ให้ตัวละครมีการชนกับวัตถุแล้วเด้งดึ๊ง
   player.body.bounce.y = 0.2;
```

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

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

Articles

How to create the game with Phaser framework (Part5)

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