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