Simply put, the current approach you're taking may not be the best course of action.
If you'd like to access these items more efficiently, consider defining them like so:
var statusBarHp = { graphic: '', text: '' };
Then, you can set
statusBarHp.graphic = game.add.sprite(...);
and
statusBarHp.text = game.add.text(...);
.
This method may offer easy access to the elements. However, it would be more beneficial to use a Phaser.Group if you intend to manipulate both the Sprite and Text objects together.
It's advisable to avoid naming the object 'text' to prevent confusion, as this might lead to issues like
statusBarHp.text.text = 'new text'
. This can cause confusion, especially for someone new to your code.
Regarding the error, it could be due to Phaser's potentially getting confused when adding a Text object to a standard Sprite object. While JavaScript might allow it to work, it's not a recommended practice and there are better approaches to handle this.
UPDATE:
Upon further investigation and observing the game in the Firefox Console, I had to toggle the CSS tab off and on. Interestingly, the warnings I encountered seemed to stem from Phaser passing data to Firefox, potentially causing color values to be truncated to '0' at times. For more information, refer to
It might be best to disregard these warnings. Alternatively, seeking assistance from someone familiar with the Phaser framework and experienced in Canvas/WebGL could shed light on why Firefox is generating these warnings.
Additionally, you can experiment with changing #000000 to black or maybe even #010101 to see if it alters the outcome.