How can I change the image of a sprite during update function?

[PyxelPranav]

I'm very new to Phaser, sorry if this is a dumb question.

I am working on a game where I want the health of the player to be expressed as pixelated heart. It should grey out if the player has lost it or should stay red if they have good health.

(Similar to minecraft's health system)

So, I loaded in both the sprites I made in Aseprite this way.

this.load.image('heart', 'Images/heart.png');
this.load.image('heart-grey', 'Images/heart-grey.png');

Then I create all 5 hearts this way.

var heart1 = this.add.sprite(0, 0, 'heart').setOrigin(0, 0);
var heart2 = this.add.sprite(32, 0, 'heart').setOrigin(0, 0);
var heart3 = this.add.sprite(64, 0, 'heart').setOrigin(0, 0);
var heart4 = this.add.sprite(96, 0, 'heart').setOrigin(0, 0);
var heart5 = this.add.sprite(128, 0, 'heart').setOrigin(0, 0);

The hearts display perfectly. I want to change the keyword(3rd argument) of heart1 during my update function. How do I go about doing this?

Edited November 10, 2018 by PyxelPranav
Making title more clear

[PatrickP]

Try

heart1.setTexture(key [, frame])

 

I got that from the API here

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Sprite.html

 

I am new to phaser myself, I find the API very helpful.

 

Edited November 10, 2018 by PatrickP
Typo

[PyxelPranav]

THANKS SO MUCH! It works a charm. (thanks as well for the quick reply)