I have been working quite hard and actually struggling quite a lot with what should be a simple task – making names, health bars, and chat draw nicely off-set from sprites and consistently scaled in the game world. While it seems this should be easy, there are a number of things that have made this really hard for me to get my head around:
- World scale is totally dynamic, so absolute positioning is hard
- A pixel in the game world is not a pixel on the screen, text needs to be independent of both world and screen ._.
- Everyone has different resolutions
- Everyone has different DPI screens
- The game supports UI scaling
- The game supports text size preferences
With all of this in mind I have avoided trying to sort out on-screen text and health bars for some time now because it just felt like this impossible nightmare. To get pixel perfect scaling of text independent of all of these factors, and then to position it absolutely correctly just kinda blew my mind a bit to be honest.
In the current live client version you are all playing, the code that renders text and healthbars in the world is very hacky, and depending on your settings and device you will likely find it is not consistently positioned relative to sprites, often overlapping or getting in the way – and in many cases (especially on the PC) health bars are very poorly scaled weird broken blobs.
Well, that all changes with the next patch as I have rewritten how this works from the ground up – as you can see from the screenshot above, text and HP bars are now scaled pixel perfect, and positioned consistently regardless of your resolution, screen DPI, UI scaling, or text size preferences.
In addition, the client now neatly supports multi-line messages on-screen so you don’t have to open the chat to read things people are saying around you. I still have work to do to get damage numbers working correctly, but once that is done I will push out a test client on discord. I’m quite proud of this work so I wanted to share it 🙂