Added image buttons to GUIs

Started by Doo89 on Thu, 01/27/2022 - 17:12

Topic category: User side tutorials

Last seen on 18:23, 19. May 2022
Joined Aug 2014
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
Added image buttons to GUIs
Thu, 01/27/2022 - 18:46 (edited)

How to make a GUI with button images for MCreator 2021.3 in forge 1.17.1

Before:
creadoo89

After:
creadoo89

After with changing the background image and adding the avatar:
creadoo89

1 - Create a GUI with buttons and assign a functional procedure to the buttons.
creadoo89

2 - Edit the GUI code and select the file that ends with Screen.java
creadoo89

3 - In the imports add at the end the line:

import net.minecraft.client.gui.components.ImageButton;

creadoo89

4 - In your class add this line:

    private static final ResourceLocation MYIMAGE = new ResourceLocation("MODID:textures/mytexture.png");

replace MODID with the name of your mod and mytexture with the name of your texture which we will see below
creadoo89

5 - find the init() class
creadoo89

6 - comment each button with /* at the beginning and */ at the end
(optional, otherwise delete them, but note the numbers)

7 - Add this code by button:

        this.addRenderableWidget(new ImageButton(this.leftPos + 25, this.topPos + 34, 90, 20, 0, 0, 20, MYIMAGE, e -> {
         if (true) {
                CodeMod.PACKET_HANDLER.sendToServer(new GuiTestButtonMessage(0, x, y, z));
                GuiTestButtonMessage.handleButtonAction(entity, 0, x, y, z); // button action = 0
            }

         ((ImageButton)e).setPosition(this.leftPos + 25, this.topPos + 34);
      }));

8 - change ImageButton attributes for all buttons

creadoo89

Explanation of ImageButton parameters:
ImageButton(PosX, PosY, WidthImg, HeightImg, nbPixelImageX, nbPixelImageY, SautEnPixelImageSurvol , IMAGE LOCATION, Action)

PosX = position of the button starting from the left of the GUI
PosY = position of the button starting from the top of the GUI
WidthImg = image width
HeightImg = image height
nbPixelImageX = offset in x of the origin of the image
nbPixelImageY = offset in y of the origin of the image
SautEnPixelImageSurvol = hover image y offset
IMAGE LOCATION = location of the image (see point 4)
Action = action when button is clicked

9 - for all buttons change action number
creadoo89

10 - for each image remember to shift the offset in x or y

Exemple

https://i15.servimg.com/u/f15/11/82/44/56/dzocal10.png

 

11 - close the code (cross in the tab)

Clic to 'Close and save'

and
creadoo89

12 - Create a 256x256 image and save there in 'other'

exemple:
creadoo89

My image : https://mega.nz/file/Kl8zGSoZ#cAnWaQGZ-X6Y8So_OoLBcuz0LBMFZLKeQ7kPEvEIKOI

According to the name of the image, modify the code of part 4

 

Code before : https://paste.ofcode.org/a7yhRLUEuNww7k2zR8G8rX
Code after : https://paste.ofcode.org/PFcbJW6GBLkeGa4weAPLg

 

Sorry for my english! I'm french

Creadoo89

my youtube channel: https://www.youtube.com/creadoo89

 

Edited by Doo89 on Thu, 01/27/2022 - 18:46
Last seen on 20:00, 19. May 2022
Joined Nov 2015
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
nice tutorial, a youtube…
Wed, 02/02/2022 - 19:17

nice tutorial, a youtube video in english would be very very helpful too

Last seen on 20:20, 28. Apr 2022
Joined Dec 2021
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
Sorry for the rather stupid…
Sat, 02/19/2022 - 04:36

Sorry for the rather stupid question.
Is it universal? Or does the code look different on version 1.16.5?

Last seen on 18:23, 19. May 2022
Joined Aug 2014
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
My English is too bad to…
Sat, 02/19/2022 - 09:09

My English is too bad to make a video, sorry!

 

This tutorial works with forge 1.17 and it seems to me for the next version of forge, but I think the code is different in forge 1.16.5!

Last seen on 11:25, 13. May 2022
Joined Feb 2018
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
Doo89 Add Subtitle/CCs on…
Sat, 02/26/2022 - 15:06

Doo89 Add Subtitle/CCs on your YT videos.

Man, you are legend! I hope…
Sat, 02/26/2022 - 22:52

Man, you are legend! I hope I find a way to find out code changes between 1.17 and 1.16 for that, but this tutorial is so gold, especially as custom buttons are things we await in MCR for long time <3

Last seen on 16:39, 16. May 2022
Joined Mar 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
can you please make a…
Thu, 03/24/2022 - 18:04

can you please make a tutorial for custom button shape?

Last seen on 02:57, 20. May 2022
Joined Oct 2020
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
can you please make a…
Thu, 03/24/2022 - 18:09

can you please make a tutorial for custom button shape?

You can do that with this tutorial, you don't have to keep the button texture as a square/rectangle 

Last seen on 02:39, 3. Apr 2022
Joined Mar 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
we are waiting for a…
Mon, 03/28/2022 - 18:50

we are waiting for a tutorial on 1.16.5)

Last seen on 02:57, 20. May 2022
Joined Oct 2020
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
Hey Doo89, how do I make…
Thu, 04/07/2022 - 21:32

Hey Doo89, how do I make this code work with a "button display condition" procedure and also a "on button clicked" procedure at the same time?

Last seen on 08:22, 16. May 2022
Joined Feb 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
This is amazing.
Fri, 05/06/2022 - 23:35

This is amazing.

Last seen on 08:22, 16. May 2022
Joined Feb 2022
Points:

User statistics:

  • Modifications:
  • Forum topics:
  • Wiki pages:
  • Tracker tickets:
  • MCreator plugins:
  • Comments:
@endcollector I am not sure…
Fri, 05/06/2022 - 23:39

@endcollector I am not sure exactly how/if this would work, but it seems like you could add an else statement to the for the init class and set the the initital statement to "if variable/tag== true" and then reset the click procedure and image location to be nothing.