Tween scaling on a child of a group

Phaser 3
1

Looking for a little clarification on tweens and groups.

I defined my group within my create() function like so

enemyGroup = this.physics.add.group({
        defaultKey: 'dFlap',
        maxSize: maxNumEnemy
 })

I then use a timed event to trigger a callback function named “scaleOverTime” which throws an error Uncaught TypeError: Cannot read property ‘add’ of undefined

function scaleOverTime (enemyGroup) {
    if (enemyOnScreen && !killDragon) {
        this.tweens.add({
            targets: enemyGroup,
            scaleX: '+=.2',
            scaleY: '+=.2',
            duration: 1000,
            ease: 'Sine.easeInOut',
            delay: 0,
            paused: false,
            repeat: 3
        }) 
    }
}

Ironically I use a similar approach (tween) to handle killing my enemies - and that works

function killEnemy (enemyGroup, killZone) {
    if (canAttack && killDragon) {
        this.tweens.add({
            targets: enemyGroup,
            duration: (600 + 1280) - enemyGroup.x,
            ease: 'Sine.easeInOut',
            y: 1380,
            alpha: 0,
            angle: -100,
            delay: 0,
            yoyo: false,
            paused: false,
            repeat: 0,
            onStart: function () {
                enemyGroup.anims.stop('dragFlapAnim').setFrame(6)
                enemyGroup.setTint(0xff0010)
                enemyGroup.body.setEnable(false)
                enemiesKilled = enemiesKilled + 1
                killDragon = false
                //camShake = true
                //shakeAmt = 400
            },
            onComplete: function () {
                enemyGroup.destroy(enemy)  
            }
        })
    }
}

I have been searching the forums here and on html5gamedevs.com for a way to apply a tween to a child of a group.

Here it states groups can’t be scaled or positioned :
html5gd forum post

Curious to know if this in fact true?
If so, I would assume if I can’t affect the group, I should be able to affect the child of said group?

2

Uncaught TypeError: Cannot read property ‘add’ of undefined

likely refers to line 3 and implies that this.tweens evaluated to undefined, probably because this in that scope doesn’t refer to the current scene. You should either call the function with a different scope (this) or else use a different reference to the current scene, e.g., enemyGroup.scene.

The code you posted looks a little confusing because in the 2nd and 3rd excerpts the enemyGroup variable doesn’t appear to be a Group. It might be an array or a Sprite.

2 Likes
3

Thank you @samme Scope/Phaser 3 has been an ongoing battle for me to understand. I appreciate the efforts.

I’ll try calling the function with a different scope.

The code you posted looks a little confusing because in the 2nd and 3rd excerpts the enemyGroup variable doesn’t appear to be a Group. It might be an array or a Sprite.

enemyGroup is a group, as far as I know. I may have approached this incorrectly and my understanding may be off. Forgive me, I’m a noob :slight_smile:

I followed the example here : Groups - Sprite pool To handle my enemy spawning.

4

@samme Thanks a ton! It took a few attempts but I figured out the issue based off the info you provided.

scaleTimer = this.time.addEvent({ 
     delay: 1000, 
     startAt: 0, 
     loop: true, 
     callback: scaleOverTime, 
     paused: false, 
     callbackScope: this
})

I added the “callbackScope:this” to my timed event.

My callback function for tween scaling was targeting ‘enemyGroup’ - and not the ‘enemy’ child.

function scaleOverTime () {
    if (enemyOnScreen && !killDragon) {
        this.tweens.add({
            targets: enemy,
            scaleX: '+=.2',
            scaleY: '+=.2',
            duration: 1000,
            ease: 'Sine.easeInOut',
            delay: 0,
            paused: false,
            repeat: 3           
        }) 
    }
}

Everything is working as intended. :slight_smile: