Bullet

#HelloGameDev #HelloErmine #HelloWorld2021

การทำ Bullet

Step 1

นำรูปกระสุนของเราเข้ามาใน Preload function ก่อน

preload(){
    this.load.image('bullet', './path');
}

จากนั้นสร้าง Group ของ bullet ของเราใน Create function โดยใช้คำสั่ง

//สร้างกลุ่มของลูกกระสุนขึ้นมาชื่อ bulletGroup
bulletGroup = this.physics.add.group()

Step 2

ใช้ Timer Event สร้าง loop ของกระสุนขึ้นมา โดยให้มันปล่อยออกมาจากแกน x และแกน y ของเพลเยอร์เรา ดังรูปแบบโค้ดต่อไปนี้

bulletEvent = this.time.addEvent({
    delay: 1000,
    callback: function(){
        //สร้างกระสุนขึ้นมาชื่อ bullet 
        bullet = this.physics.add.image(player.x, player.y-50,'bullet');
            .setScale(0.2)      //กำหนดขนาด
            .setSize(0.2);      //กำหนดตำแหน่ง Hitbox
        //เพิ่ม bullet ลงใน bulletGroup
        bulletGroup.add(bullet);
        //กำหนดความเร็วเคลี่อนที่ของ bulletGroup
        bulletGroup.setVelocityY(-200);
        },
    callbackScope: this,
    loop: true,
    pause: false
});

Step 3

เมื่อกระสุนถูกยิงออกไป เราต้องทำลายมัน เพื่อไม่ให้ตัว Phaser ทำการเก็บ Stack จากการวน loop ไม่รู้จบ โดยตัวอย่างด้านล่างจะทำลายกระสุนอัตโนมัติ ด้วยคำสั่ง .destroy(); เมื่อกระสุนเดินทางไปในแกน y มากกว่า 50

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

การเกิด monster, bullet หรือ object อะไรก็ตามที่มีการเกิดขึ้นมาใหม่เรื่อย ๆ จะต้องมีการทำลายทิ้งทันทีเมื่อเสร็จจากการ interaction กัน

เนื่องจากการเกิดใหม่เรื่อย ๆ และไม่ทำลายมัน ตัว Phaser จะทำการเก็บ Stack ไปเรื่อย ๆ อาจทำให้การทำงานของตัวประมวลผลต่าง ๆ หรือการแสดงผลต่าง ๆ มีการผิดพลาดหรือผิดแปลกไป หรือที่เราเรียกกันง่าย ๆ ว่าอาจจะทำให้เกิด bug หรือไม่ก็เกิดอาการ lag นั่นเอง

Result

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

preload(){
    this.load.image('bullet', './path');
}

create(){
    bulletGroup = this.physics.add.group();
    
    bulletEvent = this.time.addEvent({
        delay: 1000,
        callback: function(){
            bullet = this.physics.add.image(player.x, player.y-50,'bullet');
                .setScale(0.2)
                .setSize(0.2);
            bulletGroup.add(bullet);
            bulletGroup.setVelocityY(-200);
            },
        callbackScope: this,
        loop: true,
        pause: false
    });
}

update(delta, time){
    for (let i = 0; i < bulletGroup.getChildren().length; i++) {
        if (bulletGroup.getChildren()[i].y <= -50) {
                bulletGroup.getChildren()[i].destroy();
        }
    }
}