# Monster Creation

## **การทำ Monster Creation**

### Step 1

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

```javascript
//สร้าง 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,
});
```

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

### Step 2

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

```javascript
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,
});
```

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

### Step 3

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

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

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

### Result

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-MgqIP0i-ukTHhUmTVG5%2F-MgqNQVa-RiBcXkt1how%2FCreation.gif?alt=media\&token=be6e8616-4e2d-411b-9a23-103e260a94c4)

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

```javascript
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();
        }
    }
}
```
