[1.12.2] Drawing Texture to GUI

[Zamion101]

I'm working on GUI's and i stuck in drawing texture like furnace burn animation. I don't figure out how to draw animations properly.

 

My GUI class

Spoiler

public class GuiSqueezer extends GuiContainer {
    private static final ResourceLocation TEXTURES = new ResourceLocation(HMM.MOD_ID + ":textures/gui/container/squeezer.png");
    private final InventoryPlayer player;
    private final TileEntitySqueezer tileentity;

    public GuiSqueezer(InventoryPlayer player, TileEntitySqueezer tileentity) {
        super(new ContainerSqueezer(player, tileentity));
        this.player = player;
        this.tileentity = tileentity;
    }

    @Override
    protected void drawGuiContainerForegroundLayer(int mouseX, int mouseY) {
        String tileName = this.tileentity.getDisplayName().getUnformattedText();
        this.fontRenderer.drawString(tileName, (this.xSize / 2 - this.fontRenderer.getStringWidth(tileName) / 2) + 3, 8, 4210752);
        this.fontRenderer.drawString(this.player.getDisplayName().getUnformattedText(), 122, this.ySize - 96 + 2, 4210752);
    }

    @Override
    protected void drawGuiContainerBackgroundLayer(float partialTicks, int mouseX, int mouseY) {
        GlStateManager.color(1.0f, 1.0f, 1.0f, 1.0f);
        this.mc.getTextureManager().bindTexture(TEXTURES);
        this.drawTexturedModalRect(this.guiLeft, this.guiTop, 0, 0, this.xSize, this.ySize);

        if (TileEntitySqueezer.isSqueezing(tileentity)) {
            this.drawTexturedModalRect(this.guiLeft + 78, this.guiTop + 50, 176, 35, 25, 35);
            this.fontRenderer.drawString(String.valueOf(tileentity.getField(1)), (this.xSize / 2 - this.fontRenderer.getStringWidth(String.valueOf(tileentity.getField(1))) / 2) + 20, 20, 4210752);
        }
}
}

 

My GUI Texture

Droplets (gray) Start at x:80 y:30 

Droplets (Colored) Start at x:176 y:0

and i want colored droplets render from up to bottom

like squeezing something and droplets fall.

 

Note:

tileentity.getField(1) returns recipe time like '200' tick

 

[Laike_Endaril]

You'll need to use the ratio of (current ticks / required ticks) as a multiplier for your height for both the drawn...thing (be it a tessellator or whatever else), and the uv coordinates.  Both from the top down, of course, so in pseudocode something like...

y + (currentTicks / requiredTicks) * height

...for both the drawn area AND the texture uv.  It's easy to make mistakes here, but step 1 is making sure you can draw the entire image, with the correct placement and scaling.  Making sure you have that much working first will give you a base to work off of.  After that, I'd (make a commit / save a backup) before starting work on the progress bar style, just in case.

 

Edit: I wasn't completely clear; the bit of pseudocode is for the effective y/v coordinates for the *bottom* of the drawn area / part of drawn texture

Edited January 27, 2019 by Laike_Endaril