[TUTORIAL] Fix to GUI/Overlay Scaling Issue In Certain Cases

So it is actually rather simple. Mcreator by default anchors the GUI to the center of the screen. In the code that is represented by:

            int w = event.getWindow().getGuiScaledWidth();
            int h = event.getWindow().getGuiScaledHeight();
            int posX = w / 2;
            int posY = h/2;

Which locks the initial posX and posY to the center of the screen, and then those values are edited. If a overlay/GUI is already centered, it scales properly. The "int w" and "int h"  values keep the same.

Basically, you have to choose a point that works well relative to your overlay/GUI , based on the width and height of the current GUI for the GUI to scale properly. It depends where you want the GUI to be. The following 8 snippets will work well enough for most cases. This is not a perfect way of how to do this, but it seems to work for me so far, and is simple enough to do.

For example, if you want to have a GUI around where the health bar should be,

change the code for posX and pos Y to be below

To lock the Overlay/GUI to the middle bottom of the screen:

            int posX = w / 2;
            int posY = h;

This will make your new locked posX and posY at the bottom center of the screen, locking your Overlay/GUI to the bottom of the screen, and then it scales up from the bottom. You then just have to change the values to be based off your new center instead of the ones generated by mcreator, and you are all set. This will be pretty much the same for the rest of the examples.

To lock the Overlay/GUI to the middle top of the screen:

            int posX = w / 2;
            int posY = h;

This scales the screen from the top.

To lock the Overlay/GUI to the middle left of the screen:

            int posX = 0;
            int posY = h/2;

This scales the screen from the left.

To lock the Overlay/GUI to the middle right of the screen:

            int posX = w;
            int posY = h/2;

This scales the screen from the right.

To lock the Overlay/GUI to the top left of the screen:

            int posX = 0;
            int posY = 0;

This scales the screen from the top left.

To lock the Overlay/GUI to the top right of the screen:

            int posX = w;
            int posY = 0;

This scales the screen from the top right.

To lock the Overlay/GUI to the bottom left of the screen:

            int posX = 0;
            int posY = h;

This scales the screen from the bottom left 

To lock the Overlay/GUI to the bottom right  of the screen:

            int posX = y;
            int posY = 0;

This scales the screen from the bottom left 

Just remember you will have to manually change all your screen positions to fit where you want. For Example, in this overlay:

Minecraft.getInstance().gui.blit(event.getMatrixStack(), posX - 92, posY - 43, 0, 0, 82, 11, 82, 11);

The x position in comparison to posX here is -92 change that to what you need, and for posY its -43, the other values are your image sizes and locations (I don't recommend changing them unless you know what your doing).

If you do some math to start you can the positioning right on the first try. I just keep doing the math and make an estimated guess/check it/fix it until it is correct.