บทนำ (Overview)
จากบทความที่แล้วเราสามารถโหลดรูป และนำมาแสดงผลใน Game World ของเราได้แล้ว (How to create the game with Phaser framework (Part3)) มาในบทความนี้จะทำการโหลดและแสดง “Background” ของ “Game” ขึ้นมา โดยทั้งหมดจะถูกเขียนในส่วนของ “function create()”
ขั้นตอน (Steps)
- เปิดไฟล์ “part4.html”
- เราจะเริ่มเขียนในส่วนของ “function create()” โดยเริ่มแรกใช้ Method “physics.startSystem” ตามด้วยค่าพารามิเตอร์ “Phaser.Physics.ARCADE” เพื่อสร้างเกมส์ที่มีส่วนประกอบของ Physics เช่น การเคลื่อนที่แนวโค้ง การมีแรงดึงดูดของเกมส์ การชนกัน การซ้อนทับกันของวัตถุเป็นต้น
// เมื่อเราจะใช่ physics จะต้องเปิดการใช้งานของ Arcade Physics System game.physics.startSystem(Phaser.Physics.ARCADE);
- สร้างท้องฟ้า โดยชื่ออ้างอิง “sky” ต้องสัมพันธ์กับ “function preload()”
// สร้างท้องฟ้า game.add.sprite(0, 0, 'sky');
- เพื่อความสนุกของเกมส์เราจะพื้นหญ้าและ แท่นหินยาว ๆ 3 แท่งไว้กระโดด
// เราจะสร้าง Group ขึ้นมาเพื่อบรรจุพื้นหญ้าและแท่นหิน 3 แท่น โดยสร้างไว้ที่ตัวแปร platforms platforms = game.add.group();
- เมื่อสร้าง “Group” ที่ชื่อ “platforms” แล้ว เราจะตั้งค่าให้วัตถุที่อยู่ใน “Group” สามารถใช้งาน “physics” ได้ (พวกการชนกันของวัตถุ) ซึ่งเราจะกำหนดวัตถุคือ 1 พื้นหญ้า 3 แท่งหิน
// เปิดการใช้งาน physics ให้กับวัตถุที่อยู่ใน group platforms.enableBody = true;
- เราจะมาสร้างวัตถุแรก คือพื้นหญ้าเขียน ซึ่งเราเคยโหลดไว้แล้วใน “function preload()” ที่ตั้งชื่อว่า “ground” จากนั้นวางตำแหน่งของหญ้าโดยที่ game.world.height – 64 หมายถึงตำแหน่งแกน Y โดยนับจากขนาดของ “Game World” ที่เราสร้างมา – 64 pixel
// สร้างหญ้าและใส่ไว้ในตัวแปร "ground" var ground = platforms.create(0, game.world.height - 64, 'ground');
- หญ้ามาแล้ว แต่แหม่!!! ดันแสดงตามขนาดรูปหญ้าเลย (400 x 32 pixel) ขณะที่หน้าจอ “Game World” ของเราขนาด (800 x 64 pixel) ใหญ่เป็น 2 เท่า เราสามารถ “set” ให้ขนาดขยายเป็น 2 เท่าได้ทั้งกว้างและยาว
// ตั้งค่า Scale กว้าง x2 สูง x2 ground.scale.setTo(2, 2);
- จากนั้นเรามาทำแท่นหินอีกสองแท่งกันเริ่มจากแท่นแรก โดยสร้างเป็นวัตถุใหม่ แล้วนำไปเก็บไว้ในตัวแปร “ledge1” “ledge2” และ “ledge3”
//สร้างแท่นหิ่นจากรูป หญ้าที่ชื่อ "Ground" var ledge1 = platforms.create(400, 400, 'ground'); var ledge2 = platforms.create(-100, 250, 'ground'); var ledge3 = platforms.create(-100, 250, 'ground');
- สรุป 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.physics.startSystem(Phaser.Physics.ARCADE); 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'); } 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