How to add health bar scene to the player without making the health bar following the player

Godot Version

4,2

Question

as the title suggest, I want to imply this to my game

here’s the code of the health system

extends Control

var max_health = 100
var current_health = max_health

@onready var healthbar1 = $ProgressBar
@onready var healthbar2 = $ProgressBar2

func change_health(newValue):
	var old_value = healthbar2.value
	var styleBox : StyleBox = healthbar1.get_theme_stylebox("fill")
	
	if newValue > 0:
		healthbar1.value = newValue + old_value
		styleBox.bg_color = Color("1a340b")
		_catch_up_change(healthbar2, newValue)
	elif newValue < 0:
		healthbar1.value = newValue + old_value
		styleBox.bg_color = Color("ca0020")
		_catch_up_change(healthbar1, newValue)
	healthbar1.add_theme_stylebox_override("fill", styleBox)
		
func _catch_up_change(healthBar, changeValue):
	for i in abs(changeValue):
		await get_tree().create_timer(1).timeout
		
		if changeValue < 0: healthBar.value -= 1
		elif changeValue > 0: healthBar.value += 1

func update_health_bar():
	$health.value = max_health

func take_damage(damage):
	max_health -= damage
	update_health_bar()

func _process(delta):
	if max_health <= 0:
		# Player has died
		# Restart the scene
		get_tree().reload_current_scene()

and here’s the code for the player

extends CharacterBody2D

@export var SPEED = 30
@export var max_health = 100
@export var Bullet : PackedScene

@onready var anime = $Gedeon/AnimationPlayer

func _physics_process(delta):
	
	
	var mouse_position = get_global_mouse_position()
	var direction = (mouse_position - position).normalized()
	var angle = atan2(direction.y, direction.x)
	
	
	var directionx = Input.get_axis("ui_left", "ui_right")
	if directionx != 0:
		velocity.x = directionx * SPEED
	else:
		velocity.x = move_toward(velocity.x, 0, SPEED)
	var directiony = Input.get_axis("ui_up", "ui_down")
	if directiony != 0:
		velocity.y = directiony * SPEED
	else:
		velocity.y = move_toward(velocity.y, 0, SPEED)
	
	if directionx > 0.0:
		anime.play("walk_right")
	elif directionx < 0.0:
		anime.play("walk_left")	
	elif directiony > 0.0:
		anime.play("walk_front")
	elif directiony < 0.0:
		anime.play("walk_back")
	
	if velocity.x == 0 || velocity.y == 0:
		if Input.is_action_just_released("ui_up"):
			anime.play("back_idle")
		elif Input.is_action_just_released("ui_right"):
			anime.play("right_idle")
		elif Input.is_action_just_released("ui_down"):
			anime.play("idle")
		elif Input.is_action_just_released("ui_left"):
			anime.play("left_idle")
			
			
	if angle > -PI/4 and angle <= PI/4 and Input.is_action_just_pressed("shooting"):
		anime.play("right_shooting")
	elif angle > PI/4 and angle <= 3*PI/4 and Input.is_action_just_pressed("shooting"):
		anime.play("shooting")
	elif (angle > 3*PI/4 or angle <= -3*PI/4) and Input.is_action_just_pressed("shooting"):
			anime.play("shooting_left")
	elif (-PI/4 and angle <= 3*PI/4) and Input.is_action_just_pressed("shooting") :
		anime.play("shooting_back")
	
	if angle > -PI/4 and angle <= PI/4 and Input.is_action_just_released("shooting"):
		anime.play("right_idle")
	elif angle > PI/4 and angle <= 3*PI/4 and Input.is_action_just_released("shooting"):
		anime.play("idle")
	elif (angle > 3*PI/4 or angle <= -3*PI/4) and Input.is_action_just_released("shooting"):
			anime.play("left_idle")
	elif (-PI/4 and angle <= 3*PI/4) and Input.is_action_just_released("shooting") :
		anime.play("back_idle")
	
	move_and_slide()
	

You could put the health bar into a separate CanvasLayer.
That allows you to position the health bar anywhere in the Viewport, independently from other nodes and the default-camera.

how can I do it ?

In your scene tree put your health bar node as a child of the CanvasLayer like this:

- CanvasLayer
  - HealthSystem
    - ProgressBar
    - ProgressBar2
2 Likes

thanks

it worked !