Render UI elements on screen space while using a transformation matrix

Graphics
1

I’m using a transformation matrix for my Spritebatch such that the player is always centered. I’m trying to render UI elements, but they seem to render on world space rather than screen space. As a result, whenever I move my character, the UI element does not follow. I was wondering if there was a workaround for this?

This is my AttackBar (the UI element in question) class:

internal class AttackBar : IGameEntity
{
    float _attackTimer, _minAttackTime;
    Texture2D _fillTexture;
    Texture2D _emptyTexture;
    Game1 _game;
    Player _player;
    Vector2 _position;
    float _width, _height;
    float _fillWidth;

    public int DrawOrder => int.MaxValue;

    public AttackBar(Game1 game, Player player)
    {
        _width = 400f;
        _height = 150f;

        _player = player;

        _game = game;
        _emptyTexture = new Texture2D(_game.GraphicsDevice, 1, 1);
        _emptyTexture.SetData(new[] {Color.Red});

        _fillTexture = new Texture2D(_game.GraphicsDevice, 1, 1);
        _fillTexture.SetData(new[] { Color.Yellow });
    }


    public void Draw(SpriteBatch spriteBatch, GameTime gameTime)
    {
        spriteBatch.Draw(_emptyTexture, new Rectangle((int)_position.X, (int)_position.Y, (int)_width, (int)_height), Color.White);
        spriteBatch.Draw(_fillTexture, new Rectangle((int)_position.X, (int)_position.Y, (int)_fillWidth, (int)_height), Color.White);
        
    }

    public void Update(GameTime gameTime)
    {
        //need to attach to screen, not world
        _position = new Vector2(50, Game1.SCREEN_HEIGHT - _height);
        
        _fillWidth = _player.AttackTimer / _player.MinAttackTime * _width;
    }
}
1 Like