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

Started by Rikurob on Mon, 08/22/2022 - 15:19

Topic category: User side tutorials

Last seen on 07:52, 21. Nov 2022
Joined Feb 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
[TUTORIAL] Fix to GUI/Overlay Scaling Issue In Certain Cases
Mon, 08/22/2022 - 15:24 (edited)

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.

Edited by Rikurob on Mon, 08/22/2022 - 15:24
Last seen on 07:52, 21. Nov 2022
Joined Feb 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
The other way instead of…
Mon, 08/22/2022 - 15:23

The other way instead of this, is to set the posX and posY to the center of where your GUI is, but this works better for having multiple things that are seperated. This is also more difficult for the average user as you would have to base your center of your GUI on the width and height of the screen for it to scale properly

Last seen on 15:40, 2. Dec 2022
Joined Oct 2020
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
Yes! Thank you so much! I've…
Mon, 08/22/2022 - 18:06

Yes! Thank you so much! I've been looking for a solution to this for awhile, you're a life saver!

Last seen on 07:52, 21. Nov 2022
Joined Feb 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
No problem, learned a lot…
Mon, 08/22/2022 - 18:22

No problem, learned a lot figuring it out lmao.

Last seen on 07:30, 24. Sep 2022
Joined Mar 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
Very nice
Tue, 08/23/2022 - 03:45

Very nice

Last seen on 13:11, 30. Nov 2022
Joined Jun 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
hey bro can you make a…
Sun, 09/04/2022 - 14:08

hey bro can you make a tutorial video for this? it will make easier to make it.

Last seen on 07:52, 21. Nov 2022
Joined Feb 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
I will/have been considering…
Fri, 09/09/2022 - 02:21

I will/have been considering it. I just don't know how many people would watch my tutorial videos if I start making them.