บทนำ (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>
บทความที่เกี่ยวข้อง
- 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