How to create the game with Phaser framework (Part4)

บทนำ (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>

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

Articles

How to create the game with Phaser framework (Part4)

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