บทนำ (Overview)
จากบทความที่แล้วนำเสนอให้ตัวละครพระเอกของเราสามารถยืนบนพื้นหญ้าโดยไม่ทะลุได้ (รวมถึงแท่นหิน) และเมื่อตัวละครลงมาพื้นหญ้าแล้ว พื้นหญ้าจะต้องไม่ยุบหายไปด้วย และท้ายสุดเมื่อพระเอกของเราลงมาจากที่สูงแล้วสามารถกระโดด ดึ๊งๆ (How to create the game with Phaser framework (Part6)) มาต่อในบทความนี้เราจะมาลองทดสอบบังคับตัวละครให้ไปซ้ายและขวา และสามารถกระโดดดึ๊ง ๆ ได้กัน
ขั้นตอน (Steps)
- เปิดไฟล์ “part7.html”
- เราจะต้องมากำหนดก่อนว่าตัวพรเอกของเราจะใช้ “Keyboard” ในการควบคุม ซึ่งสามารถกำหนดได้ในส่วนของ “function create()”
// กำหนดให้มีการรับค่าทาง Keyboard เมื่อกดปุ่มใดจะถูกจัดเก็บไว้ที่ตัวแปร cursors cursors = game.input.keyboard.createCursorKeys();
- จากนั้นเราต้องมาเขียนให้ตรวจสอบได้ว่า ถ้ามีการกดปุ่มลูกศรไปซ้าย พระเอกเราต้องไปด้านซ้าย และเมื่อกดปุ่มด้านขวาจะต้องไปด้านขวา และที่สำคัญกดปุ่มขึ้น จะต้องสามารถกระโดด ดึ๊งๆ ซึ่งในส่วนของเหตุการณ์ที่เกิดขณะเล่นเกมส์เราจะไปเขียนในส่วนของ “function update()” โดยค่าที่ตั้ง -150 หมายถึงถอยหลังไป 150 “pixel” ตามแนวแกน “x” ต่อวินาที
if (cursors.left.isDown) { // เดินไปด้านซ้าย player.body.velocity.x = -150; }
- ทดลองกดปุ่มด้านซ้ายจะพบว่าพระเอกของเราจะเลื่อนไปด้านซ้าย สังเกตุว่าพระเอกของเราก็จะไม่หลุดจาก “Game World” เนื่องจากกำหนดไว้แล้ว “player.body.collideWorldBounds = true;”
- ที่นี้ลองมากำหนดให้ปุ่มขวาบ้าง
else if (cursors.right.isDown) { // เดินไปด้านขวา player.body.velocity.x = 150; }
- ก็จะเหมือนกับกดปุ่มซ้ายแต่เปลี่ยนทิศทางกัน แต่มันดันมีปัญหาอยู่ว่า แทนทีเมื่อปล่อยปุ่มที่กดพระเอกของเราจะหยุด แต่ดันเลื่อนสไลด์ไปหยุดที่ขอบจอซะอย่างนั้น
- เพราะฉนั้นเราต้องแก้ว่า ให้หยุดเมื่อไม่มีการกดปุ่มใด หรืออีกนัยนึงคือเมื่อปุ่มถูกปล่อยแล้ว วิธีการก็คือการตั้งค่าเคลื่อยย้ายวัตถุแนวแกน “x = 0” วางไว้ก่อนจะมีการตรวจสอบการกดปุ่มจากข้างต้นนั้นเอง
//หยุดการเคลื่อนไหว player.body.velocity.x = 0;
- โดยหลักการในส่วนของ “function update()” นั้น ก็ง่าย ๆ เหมือนเขียน Loop รอเป็นรอบ ๆ ไว้แล้วเพราะฉะนั้นคำสั่งอะไรที่อยู่ใน “function update()” ก็จะทำซ้ำไปเรื่อย ๆ พอเราสั่งให้ตั้งค่าย้ายวัตถุ = 0 ก็จะไม่มีการเคลื่อนย้าย พอโปแกรมมาถึงบรรทัดนี้ แต่พอถึงบรรทัดการตรวจสอบปุ่มกด ถ้ามีก็เคลื่อนย้ายไม่ว่า จะเป็น + หรือ – Pixel ตามที่กำหนดนั้นเอง
- ต่อมาเราจะทำให้พระเอกของเราสามารถกระโดดได้โดยการกดปุ่ม “ขึ้น” โดยมีหลักการว่าจะกระโดดได้เมื่ออยู่บนวัตถุ พื้นหญ้าและแท่นหิน
// เมื่อกดปุ่ม "ขึ้น" และพระเอก "player" อยู่บนวัตถุ หญ้าและแท่นหิน if (cursors.up.isDown && player.body.touching.down) { //เวลากระโดดจะโดนแรงดึงดูด ของค่า "physics" ที่เรากำหนดไว้ด้วย player.body.velocity.y = -350; }
- สรุป “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; 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; } else if (cursors.right.isDown) { player.body.velocity.x = 150; } if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } </script>
บทความที่เกี่ยวข้อง
- How to create the game with Phaser framework (Part1) – Start Game World
- How to create the game with Phaser framework (Part2) – Function preload()
- How to create the game with Phaser framework (Part3) – Display Images
- How to create the game with Phaser framework (Part4) – Function create()
- How to create the game with Phaser framework (Part5) – Physics
- How to create the game with Phaser framework (Part6) – Collide
- How to create the game with Phaser framework (Part7) – Control
- How to create the game with Phaser framework (Part8) – Animation
- How to create the game with Phaser framework (Part9) – Star Shines
- How to create the game with Phaser framework (Part10) – Keep Star
- How to create the game with Phaser framework (Part11) – Count Score