Monster Creation

#HelloGameDev #HelloErmine #HelloWorld2021

การทำ Monster Creation

Step 1

เมื่อ Timer Event ทำงาน ObjS ตัวแรกจะหล่นลงมาชนกับตัว ObjR

//สร้าง Object R
objR = this.physics.add.image(400, 700, 'R').setImmovable();

//Timer Event
event = this.time.addEvent({
    delay: 5000,
    callback: function () {
        //สร้าง Object S
        objS = this.physics.add.image(400, 100, 'S');
        //กำหนดการเคลื่อนไหวของ S
        objS.setVelocityY(200);
        //กำหนดการชนกันของ S กับ R
        this.physics.add.collider(objS, objR);
    },
    callbackScope: this,
    loop: true,
    paused: false,
});

แต่เมื่อ objS ตัวต่อไปเกิดขึ้นมาและหล่นลงมาอีก objS ตัวเก่าที่มีอยู่จะเป็นการชนและจบไปกับตัวเพลเยอร์แล้ว เนื่องจากตัวแปร “objS” ที่กำหนดนั้นจะชี้ไปที่แค่ตัวที่เกิดใหม่เท่านั้น และตัวเก่าที่มีอยู่ก็จะเป็นแค่ object ที่ไม่มีชื่อ

Step 2

เราสามารถแก้ไขปัญหาเหล่านั้นด้วยการสร้าง Group เพื่อให้ ObjS หรือ object อื่น ๆ ที่เกิดขึ้นมาใหม่อยู่ในกลุ่ม เเละอยู่ภายใต้ตัวแปรเดียวกัน

objR = this.physics.add.image(400, 700, 'R').setImmovable();

//สร้าง Group ขึ้นมาเพื่อเก็บ Object
objGroup = this.physics.add.group();

event = this.time.addEvent({
    delay: 5000,
    callback: function () {
        objS = this.physics.add.image(400, 100, 'S');
        //เพิ่ม objS เข้าไปใน objGroup
        objGroup.add(objS);
        //กำหนดการเคลื่อนไหวของ objGroup
        objGroup.setVelocityY(200);
        //เปลี่ยนจากชนกับ objS เป็นชนกับ objGroup ของ objS
        this.physics.add.collider(objGroup, objR);
    },
    callbackScope: this,
    loop: true,
    paused: false,
});

บางกรณีที่เราอยาก random ความเร็วเคลื่อนที่ของ object เเต่ละตัวให้แตกต่างกัน ให้เราใส่ชื่อตัวแปรของ object นั้นเหมือนเดิมได้เลย * ถ้าเรากำหนดความเร็วเป็นกลุ่ม เมื่อเรา random ความเร็วเเล้ว ทุกตัวจะเปลี่ยนความเร็วตามตัวที่เพิ่งสร้างขึ้นมา (เร็วบ้างช้าบ้างตามตัวที่เกิดใหม่่) *

Step 3

Object ที่เกิดมาจาก Timer Event นั้นจะไม่หายไปไหน แต่จะถูก Stack เก็บไว้เรื่อย ๆ ภายใต้เกมของเรา ดังนั้น ทางที่ดีเราควรทำลาย Object ทิ้งเมื่อมันออกไปจากจอแล้ว

update(){
    //ทำลาย ObjS ที่อยู่ใน objGroup ที่มีค่า y มากกว่า 350 
    for (let i = 0; i < objGroup.getChildren().length; i++) {
        if (objGroup.getChildren()[i].y < 350) {
                objGroup.getChildren()[i].destroy();
        }
    }
}

ถ้าน้อง ๆ ไม่อยากให้ object หายไปต่อหน่าต่อตาเลย น้อง ๆ ต้องกำหนดให้ object ถูกทำลายต่อเมื่อ object เลยฉากไปเเล้ว * ตัวอย่าง : ฉากกว้าง 1280 ในแนวแกน X ต้องกำหนดเป็น X + 150 เพื่อให้ object ออกนอกฉากไปก่อน (น้อง ๆ สามารถกำหนดได้ตามความต้องการของน้อง ๆ เลยครับ) *

Result

สรุปภาพรวมโค้ด Monster Creation

preload(){
    this.load.image('S', 'src/image/Box S.png');
    this.load.image('R', 'src/image/Box R.png');
}

create() {
    objR = this.physics.add.image(400, 700, 'R').setImmovable();
    
    objGroup = this.physics.add.group();
    
    event = this.time.addEvent({
        delay: 5000,
        callback: function () {
            objS = this.physics.add.image(400, 100, 'S');
            objGroup.add(objS);
            objGroup.setVelocityY(200);
            this.physics.add.collider(objGroup, objR);
        },
        callbackScope: this,
        loop: true,
        paused: false,
    });
}
    
update(){
    for (let i = 0; i < objGroup.getChildren().length; i++) {
        if (objGroup.getChildren()[i].y < 350) {
                objGroup.getChildren()[i].destroy();
        }
    }
}