GuiImageButton and custom ImageButton doesn't draw correct and Respond to a different (indepent) Buttons Hover-Event

[Major Tuvok]

Hello guys, I hope this isn't sth. stupid I'm overreading again, but here's my propblem:

(Note: I'm really not much of an designer, so it wouldn'treally look good  even if it worked)

So I'm trying to add an Image Button to my own Gui but this isn't working as expected. (I once tried to show the same thing with an normal, String drawing button and it showed up at the correct Positon and so forth...)

But this Button draws it's 20*20 Image scaled up to sth. of the size of about 210*210! Moreover, it only draws the 20*20 pixel of the left top, resulting in about 4 pixel being drawn quite big, but not the Image. (The reason why I noticed that it draws sth. of this incredible size is, that I tested it with drawing the (still) 20*20 image as if it had a size of 200*200 and only small parts were missing now, although much to big!)

Additionally I noticed, that when i'd move the mouse over the second Button within the Gui, my Image Button would suddenly show an hover Tint!

 

So as a result I thought, well it's scaled up, so I'll scale it down again and indeed, that worked although it should not be the way of going to scale sth. down by a factor of 0.1f only to achieve the desired result (Note that it's still not clickable and that it still get's this weird Hover tint)!

Here's my code:

public class GuiSpellCreator extends BaseGui {
    private static final int ID_EDIT = 0;
    private static final int ID_INSCRIBE = 1;
    private static final GuiResource USED_BACKGROUND = GUI_BLANK;
    private static final int X_EDIT_SPELL = X_INPUT + OFFSETS.getSlotXSize() + 4;  //evaluates to 30
    private static final int Y_INSCRIBE_SPELL = Y_OUTPUT - Math.round((BOOK_AND_QUILL.getImgYSize() - OFFSETS.getSlotYSize()) / 2);  //evaluates to 34 - (20-(16/2)) = 22
    private static final int Y_EDIT_SPELL = 10;
    private GuiButton mButtonEditSpell;
    private GuiButton mButtonInscribeSpell;
    public GuiSpellCreator(GuiContainerSpellCreator inventorySlotsIn) {
        super(inventorySlotsIn, USED_BACKGROUND.getImgXSize(), USED_BACKGROUND.getImgYSize());
        mButtonEditSpell = null;
        mButtonInscribeSpell = null;
    }

    @Override
    public TileEntitySpellCreator getTileEntity() {
        return (TileEntitySpellCreator) super.getTileEntity();
    }

    /**
     * Adds the buttons (and other controls) to the screen in question. Called when the GUI is displayed and when the
     * window resize's, the buttonList is cleared beforehand.
     */
    @Override
    public void initGui() {
        super.initGui();
        String spellName = GUI_SPELL_CREATOR_NO_SPELL.get();
        mButtonEditSpell = new GuiButton(ID_EDIT, getGuiLeft() + X_EDIT_SPELL, getGuiTop() + Y_EDIT_SPELL, GUI_SPELL_CREATOR_EDIT.get(spellName));
        mButtonEditSpell.width = getFontRenderer().getStringWidth(mButtonEditSpell.displayString) + 6;
        mButtonInscribeSpell = new ImageButton(ID_INSCRIBE, getXSize(), Y_INSCRIBE_SPELL, BOOK_AND_QUILL, getDelegate()); //does exactly the same as GuiButtonImage (I tried that too, same result)
        addButton(mButtonEditSpell);
        addButton(mButtonInscribeSpell);
    }

    /**
     * Called by the controls from the buttonList when activated. (Mouse pressed for buttons)
     *
     * @param button
     */
    @Override
    protected void actionPerformed(GuiButton button) throws IOException {
        super.actionPerformed(button);
        switch (button.id) {
            case ID_EDIT:
                Minecraft.getMinecraft().displayGuiScreen(new GuiSpellCreation(new GuiContainerSpellCreation((GuiContainerSpellCreator) inventorySlots)));
                break;
            case ID_INSCRIBE:
                Log.info("Inscribing...");
                break;
            default: {
                Log.warn("Unknown id of " + button.id + "!");
            }
        }
    }

    /**
     * Draws the background layer of this container (behind the items).
     *
     * @param partialTicks
     * @param mouseX
     * @param mouseY
     */
    @Override
    protected void drawGuiContainerBackgroundLayer(float partialTicks, int mouseX, int mouseY) {
        super.drawGuiContainerBackgroundLayer(partialTicks, mouseX, mouseY);
        getDelegate().drawGuiBackground(USED_BACKGROUND);
        getDelegate().drawAllSlotsWithResource(SLOT);
    }
}

 

public class ImageButton extends GuiButton {
    private GuiDrawingDelegate mGuiDrawingDelegate;
    private ResourceLocation resourceLocation;
    private int xTexStart;
    private int yDiffText;
    private int yTexStart;

    public ImageButton(int buttonId, int x, int y, ResourceInfo info, GuiDrawingDelegate delegate) {
        this(buttonId, x, y, info.getImgXStart(), info.getImgYStart(), info.getImgXSize(), info.getImgYSize(), info.getResource(), delegate);
    }

    public ImageButton(int buttonId, int x, int y, ResourceImgMeasurements measurements, ResourceProvider location, GuiDrawingDelegate delegate) {
        this(buttonId, x, y, measurements.getImgXStart(), measurements.getImgYStart(), measurements.getImgXSize(), measurements.getImgYSize(), location.getResource(), delegate);
    }

    public ImageButton(int buttonId, int x, int y, int xTexStart, int yTexStart, int widthIn, int heightIn, ResourceLocation location, GuiDrawingDelegate delegate) {
        this(buttonId, x, y, xTexStart, yTexStart, widthIn, heightIn, 0, location, delegate);
    }

    public ImageButton(int buttonId, int x, int y, int xTexStart, int yTexStart, int widthIn, int heightIn, int yDiffText, ResourceLocation location, GuiDrawingDelegate delegate) {
        super(buttonId, x, y, widthIn, heightIn, "");
        this.xTexStart = xTexStart;
        this.yTexStart = yTexStart;
        this.mGuiDrawingDelegate = delegate;
        this.resourceLocation = location;
        this.yDiffText = yDiffText;
    }


    public void setPosition(int p_191746_1_, int p_191746_2_) {
        this.x = p_191746_1_;
        this.y = p_191746_2_;
    }

    /**
     * Draws this button to the screen.
     */
    public void drawButton(@Nonnull Minecraft mc, int mouseX, int mouseY, float partialTicks) {
        if (this.visible) {
            this.hovered = mouseX >= this.x && mouseY >= this.y && mouseX < this.x + this.width && mouseY < this.y + this.height;
            int i = this.xTexStart;
            int j = this.yTexStart;

            if (this.hovered) {
                j += this.yDiffText;
            }
            GlStateManager.pushMatrix();
            GlStateManager.scale(0.1f,0.1f,1);
            GlStateManager.disableDepth();
            //multiply with 5, because guiDrawing delegate already adds one more, so that in total it will result in multiplication of 6. Why 6 is what is needed here, no clue!!!
            //(or those other strange values, they work, but I don't know why, which is pretty irritating)
            mGuiDrawingDelegate.drawImage(resourceLocation, x*10+mGuiDrawingDelegate.getXSize()*5+250, y*10+mGuiDrawingDelegate.getYSize()*2, i, j, width*10+50, height*10+50);
            GlStateManager.popMatrix();
        }
    }
}

 

public enum GuiResource implements ResourceInfo, ILoggable {
    SLOT(StringHelper.createResourceLocation(MODID, "textures", "gui", "elements", "slot.png"), 0, 0, 18, 18),
    SLOT_DARK(StringHelper.createResourceLocation(MODID, "textures", "gui", "elements", "slot_dark.png"), 0, 0, 18, 18),
    GUI_BLANK(StringHelper.createResourceLocation(MODID, "textures", "gui", "gui_blank.png"), 0, 0, 176, 166, new PlayerInventoryOffsets(8, 84, 8, 142)),
    GUI_BLANK_WPI(StringHelper.createResourceLocation(MODID, "textures", "gui", "gui_blank_with_player_inv.png"), 0, 0, 176, 166, new PlayerInventoryOffsets(8, 84, 8, 142)),
    GUI_BLANK_BIG(StringHelper.createResourceLocation(MODID, "textures", "gui", "gui_blank_big.png"), 0, 0, 176, 222),
    GUI_BLANK_GIANT(StringHelper.createResourceLocation(MODID, "textures", "gui", "gui_blank_giant.png"), 0, 0, 256, 222),
    GUI_BLANK_MAX(StringHelper.createResourceLocation(MODID, "textures", "gui", "gui_blank_max.png"), 0, 0, 256, 256, new PlayerInventoryOffsets(44, 172, 44, 230)),
    GUI_BLANK_BIG_WPI(StringHelper.createResourceLocation(MODID, "textures", "gui", "gui_blank_big_with_player_inv.png"), 0, 0, 176, 222),
    OVERLAY_SPELLPOWER_BACKGROUND(StringHelper.createResourceLocation(MODID, "textures", "gui", "overlay", "spellpower_background.png"), 0, 0, 19, 60),
    OVERLAY_SPELLPOWER_FOREGROUND(StringHelper.createResourceLocation(MODID, "textures", "gui", "overlay", "spellpower_foreground.png"), 0, 0, 19, 60),
    BOOK_AND_QUILL(StringHelper.createResourceLocation(MODID, "textures", "gui", "book_and_quill.png"), 0, 0, 21, 21);
    ResourceLocation location;
    private int imgXStart;
    private int imgYStart;
    private int imgXSize;
    private int imgYSize;
    private PlayerInventoryOffsets suggestedOffsets;

    GuiResource(@Nonnull ResourceLocation location, int imgXStart, int imgYStart, int imgXSize, int imgYSize, PlayerInventoryOffsets playerInventoryOffsets) {
        this.location = location;
        this.imgXStart = imgXStart;
        this.imgYStart = imgYStart;
        this.imgXSize = imgXSize;
        this.imgYSize = imgYSize;
        this.suggestedOffsets = playerInventoryOffsets;
    }

    GuiResource(ResourceLocation location, int imgXStart, int imgYStart, int imgXSize, int imgYSize) {
        this(location, imgXStart, imgYStart, imgXSize, imgYSize, null);
    }

    GuiResource(String location, int imgXStart, int imgYStart, int imgXSize, int imgYSize, PlayerInventoryOffsets playerInventoryOffsets) {
        this(new ResourceLocation(location), imgXStart, imgYStart, imgXSize, imgYSize, playerInventoryOffsets);
    }

    GuiResource(String location, int imgXStart, int imgYStart, int imgXSize, int imgYSize) {
        this(new ResourceLocation(location), imgXStart, imgYStart, imgXSize, imgYSize);
    }

    @Override
    public @Nonnull
    ResourceLocation getResource() {
        return location;
    }

    @Override
    public int getImgXStart() {
        return imgXStart;
    }

    @Override
    public int getImgYStart() {
        return imgYStart;
    }

    @Override
    public int getImgXSize() {
        return imgXSize;
    }

    @Override
    public int getImgYSize() {
        return imgYSize;
    }

    public PlayerInventoryOffsets getSuggestedOffsets() {
        assert suggestedOffsets != null : "attempted to retrieve null Inventory Offsets!";
        return suggestedOffsets;
    }

    @Override
    public String toString() {
        return "GuiResource{" + "location=" + location +
                ", imgXStart=" + imgXStart +
                ", imgYStart=" + imgYStart +
                ", imgXSize=" + imgXSize +
                ", imgYSize=" + imgYSize +
                '}';
    }
}

(This ImageButton is not yet fitted properly with my Framework so it currently has some unessecary conversions in it... I'll rework it tomorrow...)

And here's my github repo.

Edited January 5, 2018 by Major Tuvok
spelling mistake

[Major Tuvok]

Sry, for the spelling mistake... It should be in the title: "...ImageButton doesn't draw...".

[Draco18s]

9 minutes ago, Major Tuvok said:

Sry, for the spelling mistake... It should be in the title: "...ImageButton doesn't draw...".

You can edit your post. And if you edit the original post, you can edit the title too.

 

Your problem is likely that the classes and drawing methods you use are intended for textures of exactly 256x256 and you have supplied a 20x20 pixel texture.

[Major Tuvok]

Ouch, ok... 

Thanks, I didn't know that (I was aware, that it cannot be more than 256, but never tried before with less than that in a gui). 

That solved the drawing issue

But I still can't click it

I'll look more at that tomorrow and if I find it I'll post it here... 

[Draco18s]

Usually button images are contained within the same 256x256 graphic as the rest of the UI (see: the beacon gui image file).

[Major Tuvok]

I tried, but as expected, that didn't change anything regarding the clicking behaviour. The reason I use different files is, that like that I do have an GUI of 256*256 (fills aup every sole pixel) and I cannot add any other Images to that. So I'm just doing that because of consistency.

[Major Tuvok]

The Problem with the Image changing it's color seems to be an forge proplem, because applying 

GlStateManager.color(1,1,1,1);

removes this strange recoloring.

=> Forge does not revert the recoloring of previous buttons, whilst Image Button expects it NOT to be colored (they don't recolor GLStateManager).

Edited January 6, 2018 by Major Tuvok
Spelling mistakes

[Major Tuvok]

Apperently the solution to the clicking was to take guiLeft and guiTop into account when checking whether a mouse was pressed. If used with an normal GuiButtonImage it works like this;

mButtonInscribeSpell = new GuiButtonImage(ID_INSCRIBE, getXSize()+getGuiLeft(), Y_INSCRIBE_SPELL+getGuiTop(), BOOK_AND_QUILL.getImgXSize(),BOOK_AND_QUILL.getImgYSize(),BOOK_AND_QUILL.getImgXStart(),BOOK_AND_QUILL.getImgYStart(),0,BOOK_AND_QUILL.getResource()); 
//The 0 is because I don't have a second Texture below it to use as an hovered Image.

But still the coloring Issue remains with standart GuiButtonImage... I'll submit that as an Issue to forge,,,

[Major Tuvok]

(Code which has is used in GuiButtonImage for drawing)

if (this.visible)
        {
            this.hovered = mouseX >= this.x && mouseY >= this.y && mouseX < this.x + this.width && mouseY < this.y + this.height;
            mc.getTextureManager().bindTexture(this.resourceLocation);
            GlStateManager.disableDepth();
            int i = this.xTexStart;
            int j = this.yTexStart;

            if (this.hovered)
            {
                j += this.yDiffText;
            }

            this.drawTexturedModalRect(this.x, this.y, i, j, this.width, this.height);
            GlStateManager.enableDepth();
        } 

 

Now with clearing away other Buttons hovered States 

 

if (this.visible)
        {
            this.hovered = mouseX >= this.x && mouseY >= this.y && mouseX < this.x + this.width && mouseY < this.y + this.height;
            mc.getTextureManager().bindTexture(this.resourceLocation);
            GlStateManager.disableDepth();
  			//This is the missing line...
  			GlStateManager.color(1,1,1,1);
  			//normal GuiButton does this as well... (other than the previous line nothing has to be changed)
            int i = this.xTexStart;
            int j = this.yTexStart;

            if (this.hovered)
            {
                j += this.yDiffText;
            }

            this.drawTexturedModalRect(this.x, this.y, i, j, this.width, this.height);
            GlStateManager.enableDepth();
        }