Phaser, game.state.restart() leads to TypeError: Argument 1 of ...

[Nodragem]

Hello,

I would like to simply restart my game after the player killed all the "wasps" on the screen. What I do for now is simply:

    public onWaspDeath () {
        console.log("Dead Wasps: " + this._wasps.countDead());
        if(this._wasps.countLiving() <= 1){ // the currently killed wasp is not dead yet
            console.log("You killed all the Wasps!")
            this.game.sound.play("congrats");
            this.game.state.clearCurrentState();
            this.game.state.restart();
        }
    }

However, I get this error in Firefox:

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.
[Learn More]

phaser.js:15696:8
s.Sprite.prototype._renderCanvas
phaser.js:15696:8
s.Sprite.prototype._renderCanvas
phaser.js:15701:8
s.DisplayObjectContainer.prototype._renderCanvas
phaser.js:15072:8
s.DisplayObjectContainer.prototype._renderCanvas
phaser.js:15072:8
s.DisplayObjectContainer.prototype._renderCanvas
phaser.js:15072:8
s.CanvasRenderer.prototype.renderDisplayObject
phaser.js:20563:4
s.CanvasRenderer.prototype.render
phaser.js:20488:4
updateRender
phaser.js:36186:12
update
phaser.js:36102:16
updateRAF
phaser.js:64166:12
start/this._onLoop

and this error in Chrome:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at i.Image.s.Sprite._renderCanvas (phaser.js:15696)
    at a.s.Sprite._renderCanvas (phaser.js:15701)
    at i.Group.s.DisplayObjectContainer._renderCanvas (phaser.js:15072)
    at i.World.s.DisplayObjectContainer._renderCanvas (phaser.js:15072)
    at i.Stage.s.DisplayObjectContainer._renderCanvas (phaser.js:15072)
    at s.CanvasRenderer.renderDisplayObject (phaser.js:20563)
    at s.CanvasRenderer.render (phaser.js:20488)
    at Game.updateRender (phaser.js:36186)
    at Game.update (phaser.js:36102)
    at i.RequestAnimationFrame.updateRAF (phaser.js:64166)

 

I don't really understand :/ at all what is this error about. 

Any ideas?

NOTE: I tried commenting `this.game.state.clearCurrentState()` and I also tried `this.game.state.start("name_of_the_current_state")` instead of `this.game.state.restart()`. That leads to the same error.

[casey]

What is in your restart function?  (you want it to call this.game.state.start). 

Also, it looks like the error is unrelated, but I can't tell based on the limited code you provided. 

[samme]

Try removing clearCurrentState().

[Nodragem]

Hello,

@casey, the restart() function is part of Phaser.StateManager. To call 'this.game.state.start("name_of_current_state") does essentially the same thing, I think. At least, it leads to the same error.

I would say that the error is related to that code, as the error does not happen if I do not try to restart/start the current state.

@samme: I already tried to remove 'clearCurrentState()'. That's what I tried first, and it leads to the same error.

My naive guess is that there is an image/texture that does not load properly when I restart... But I have no idea why and how.

[samme]

9 hours ago, Nodragem said:

@samme: I already tried to remove 'clearCurrentState()'. That's what I tried first, and it leads to the same error.

You probably want to remove that in any case, because state.restart calls it, but at a different time.

If you add a breakpoint in Sprite.prototype._renderCanvas you may be able to see which game object is failing to render.

Are you clearing the game cache anywhere or creating/destroying any textures?

[Nodragem]

Ok, thank you for the tip, I will remove the call to clearCurrentState().

No I am not clearing the game cache and I don't think I destroy anything. Should I? I thought the restart function would do the cleaning, that's why I didn't.

Concerning creating texture, I do create sprites in the create method of the game state, but not anywhere else.

I will add the breakpoint you suggested and see if I can bring more information. 

Thank you for the help

[Nodragem]

Ok, so I added a conditional breakpoint before the problematic function call, so that I can check the parameter passed to that function when the game restarts.

So basically I can see what is this.texture.baseTexture.source just after I called this.game.state.restart().

Note that the problematic function renderSession.context.drawImage() in part of a loop that iterates over the objects to display.

Here the results:

At the third iteration, for some reason this.texture.baseTexture.source is null. That means that my third object to be displayed is null.

I think, it might be something with DragonBones... Any body has already encounter a similar problem with DragonBones?

[Nodragem]

Ok so it seems that to write this issue helped me to find a solution

I just needed to add one line of code to reset the DragonBones factory:

    public onWaspDeath () {
        console.log("Dead Wasps: " + this._wasps.countDead());
        if(this._wasps.countLiving() <= 1){ 
            console.log("You killed all the Wasps!")
            this.game.sound.play("congrats");
            this._db_factory.clear(); // IMPORTANT CHANGE
            this.game.state.restart();
        }
    }

It works now! hope that can help someone else.