Create()

#HelloGameDev #HelloErmine #HelloWorld2021

Create() คืออะไร ?

เป็น function หลักของเกมของเรา ซึ่งเป็นส่วนที่เราจะใช้ในการจัดวางหน้าเกมจากสิ่งที่ดาวน์โหลดมาใน Preload หมายความว่า function นี้จะเรียกหลังจากเรียก Preload เสร็จเรียบร้อย และในส่วนนี้เองจะเริ่มมี logic ในการเขียน

ตัวอย่าง

let width;
let height;

preload(){
    this.load.image('sky', './images/sky.png');
}

create(){
    width = this.scene.scene.physics.world.bounds.width;
    height = this.scene.scene.physics.world.bounds.height;
    this.add.image(width, height, 'sky');
}

จากตัวอย่าง เราจะได้ผลลัพธ์ออกมาเป็นแบบนี้

background ที่ add ใน create()

การสร้างและรวม object ในฉาก

เราจะใช้คำสั่ง this.physics.add.staticGroup(); เพื่อสร้าง group ขึ้นมา โดยส่วนใหญ่เราจะประกาศตัวแปรมาเก็บไว้ เพราะเราจะได้เรียกใช้ทีหลังได้ เช่น

platforms = this.physics.add.staticGroup();

แล้วพอเราจะสร้าง object เราจะใช้รูปแบบคำสั่งต่อไปนี้

platforms.create(/*width*/, /*height*/,/*ชื่อObjectที่ดาวน์โหลดมา*/)

พอเอาโค้ดทุกส่วนมารวมกันก็จะเป็นแบบนี้

let width;
let height;
let platforms;
let player;

preload(){
    this.load.image('sky', './images/sky.png');
    this.load.image('ground', './images/ground.png');
    this.load.image('beaver', './images/beaver.png');
}

create(){
    width = this.scene.scene.physics.world.bounds.width;
    height = this.scene.scene.physics.world.bounds.height;
    this.add.image(width, height, 'sky');
    platforms = this.physics.add.staticGroup();
    platforms.create(400, 568, 'ground');
    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
}

และจะได้หน้าตาผลลัพธ์แบบนี้

ถ้าเราพิมพ์คำสั่ง player = this.physics.add.sprite(100, 450, 'beaver');

เราก็จะได้น้อง beaver มา 1 ตัว (ซึ่งมาจากไฟล์ที่ดาวน์โหลดไว้แล้วใน Preload)

การเรียงลำดับสำคัญมากเพราะโค้ดจะอ่านจากบนลงล่าง เพราะฉะนั้น สิ่งที่ถูกอ่านก่อนจะถูกวางลงมาก่อน อันอื่น ๆ ที่ตามมาก็จะลงมาทับอีกที