Static object in camera

Phaser 3
1

Hello.

I am building a game with phaser and at this point I am trying to create a health bar for my main sprite.

This health bar is supposed to be in the top left corner at all times during the game.
To build the health bar I use 2 arcs and 18 rectangles, so that each piece counts as 5 hp.

How can I set it to be static in top? I tried to use .setScrollFactor(0); as it is mentioned in the examples, however when I set this property the rectangle or the arc disappears.

Thank you for your help

2

I think you’ll need to show some code that constructs your health bar.

A simple sprite will stick to the camera when you set the scrollfactor to 0,0.
Are you using a mask? If so the graphics object for the mask will also need to be set to scrollfacotr 0,0 as masks are global and not relative to the sprite they are attached to.

3

@jppresents this is how I construct my health bar:

constructor(scene, x, y, width, height, corFill, corUnfill, value, singleDecreaseValue) {
	this.minValue = 0;
	this.maxValue = value;
	this.corUnifll = corUnfill;
	this.corFill = corFill;
	this.arc1 = scene.add.arc(x, y, height, 270, 90, true, corFill, 1);
	this.rectangles = new Array(this.rectangleNo);
	var valueToAdd = width / this.rectangleNo;
	for (let i = 0; i <= 17; i++) {
		this.rectangles[i] = scene.add.rectangle(
			x + valueToAdd * i,
			y,
			width / this.rectangleNo,
			height * 2,
			corFill,
			1
		);
	}
	this.arc2 = scene.add.arc(x + width, y, height, 270, 90, false, corFill, 1);
	this.text = scene.add.text(x + width / 4, y + height * 2, '100/100', {
		fontFamily : 'Arial',
		fontSize   : 25,
		color      : 0xffffff
	});

	this.arc1.scrollFactor = 0;
}
4

Hey, I think you’ll have to do it like this:

at the end do:

this.arc1.setScrollFactor(0,0);
this.arc2.setScrollFactor(0,0);

and in the loop at the end:

this.rectangles[i].setScrollFactor(0,0);

Each individual part needs to have a scroll factor of 0 for x and for y. (Since they are not connected).

5

@jppresents already tried, not working :confused:

6

It’s working for me.

This is the adjusted code (so I could just put it in my create function, set the color to a fixed value and used 17 for the amount of rectangles):

        let arc1 = this.add.arc(60, 140, 20, 270, 90, true, 0xFF00FF, 1);
        let arc2 = this.add.arc(60 + 100, 140, 20, 270, 90, false, 0xFF00FF, 1);
        arc1.setScrollFactor(0, 0);
        arc2.setScrollFactor(0, 0);

        let rectangles = new Array(17);
        let valueToAdd = 100 / 17;
        for (let i = 0; i <= 17; i++) {
            rectangles[i] = this.add.rectangle(
                60 + valueToAdd * i,
                140,
                100 / 17,
                20 * 2,
                0xFF00FF,
                1
            );
            rectangles[i].setScrollFactor(0,0);
        }

(typescript code, hence the “let” for variables, I think it needs to be “var” to compile in javascript)

Looks like this when I move my sprite around:

health
health.gif898Ă—397 609 KB

7

When I put the .setScrollFactor(0,0); the parts just disappear. I tried to put .setScrollFactor(0,0); just for the first arch and it disappears. If I put just like you did, the whole thing disappears.

8

Hmm, is your camera at 0,0 when you create the health bar?
Maybe it is getting fixed “off screen” because the camera is already moved?

But at this point I’m just speculating.

9

All I do to the camera is after creating the health bar(which is created in the main sprite’s class) is:

this.cameras.main.startFollow(this.hero);
this.cameras.main.zoom = 0.5;
10

@jppresents I figured it out now that when I do setScrollFactor(0, 0); it changes the position of the object:

image
image.png454Ă—968 7.93 KB

11

Issue closed!

I realized that I was inserting the world coordinates and the setScrollFactor(0, 0); takes the actual canvas coordinates. With some adjustments, it is working like a charm! Thank you @jppresents for your support! Wish you everything good

1 Like