Resize `setScrollFactor ( )` graphic?

Phaser 3
1

so I’ve got a working HUD now. Problem is when I use Scale Manager’s 'PHASER.SCALE.ENVELOP' option to resize my game, the HUD icons don’t shrink or scale correctly. Infact, they stick to the screen & follow the screen position, not the screen size.

Here’s the code :

/**
 * A class that extends Phaser.Scene & wraps up 
 * the core logic for the HUD
 */

var HUDScene = new Phaser.Class ( {

	Extends : Phaser.Scene, 

	initialize : 

	function HUDScene ( ) {

		Phaser.Scene.call ( this, {

			key : 'HUDScene', 
			active : false, 

		} );

	}, 

	drawHUD : function ( __objData ) {

		this.__objData = __objData;

		this.__scene = this.__objData.scene;
		this.__add = this.__objData.add;

		// Add Player's Life Count Image

		this.__add.image ( 30, 30, 'lifeicon' ).setScrollFactor ( 0 ).setDepth ( 999 );

	}, 

} );

Any help as always is GREATLY appreciated!

2

someone can help?

3
  1. The Scale Manager always scales the whole canvas.
  2. In ENVELOP parts of the game canvas can be hidden, and that can give you a wrong impression of the true canvas size.
  3. Scroll factor is applied only during camera scrolling.
4

@samme : Right, but how do I resize the icon correctly?

5

@samme : Should I not just create a separate div for the HUD.?