開啟新的GUI

今天我們來說怎麼開啟新的GUI，GUI是指玩家在遊戲中開啟的畫面，例如箱子的儲存畫面、熔爐的熔煉畫面，今天我們開始講怎麼在與村民互動的時候開啟新畫面，並使用Mixin來取代原始的交易畫面

首先開啟新畫面我們需要兩個class，我們先建立一個新的資料夾叫Screen，並建立兩個class叫CustomScreen跟CustomScreenHandler。CustomScreen是負責前端的內容，包括顏色、按鈕、文字與物品籃，ScreenHandler負責後端的邏輯處理。

我先放上CustomScreen的完整程式碼

public class CustomScreen extends HandledScreen<CustomScreenHandler> {

    private static final Identifier VillagerChat = new Identifier(TheClassicofMountainsandOceans.MOD_ID, "textures/gui/villagerchat.png");
    private static final int ImageWidth = 176;
    private static final int ImageHeight = 222;

    public CustomScreen(CustomScreenHandler handler, PlayerInventory inventory, Text title) {
        super(handler, inventory, title);
        this.backgroundWidth = ImageWidth;
        this.backgroundHeight = ImageHeight;
    }

    @Override
    protected void init() {
        super.init();
        
        // this.addDrawableChild(ButtonWidget.builder(Text.literal("Close"), (button) -> {
        //     this.client.setScreen(null);  
        // }).dimensions((this.width - this.backgroundWidth) / 2 + (this.backgroundWidth / 2 - 50), (this.height - this.backgroundHeight) / 2 + this.backgroundHeight - 30, 100, 20).build());
    }

    @Override
    public void render(DrawContext context, int mouseX, int mouseY, float delta) {
        this.renderBackground(context); 
        super.render(context, mouseX, mouseY, delta);
        this.drawMouseoverTooltip(context, mouseX, mouseY);
    }

    @Override
    protected void drawBackground(DrawContext context, float delta, int mouseX, int mouseY) {
        
        RenderSystem.setShaderTexture(0, VillagerChat);
        
        int i = (this.width - this.backgroundWidth) / 2;
        int j = (this.height - this.backgroundHeight) / 2 -10;
        context.drawTexture(VillagerChat, i, j, 0, 0, this.backgroundWidth, this.backgroundHeight);
    }

    @Override
    protected void drawForeground(DrawContext context, int mouseX, int mouseY) {
        Text title = Text.translatable("gui.como.conversation");

        
        int titleX = (this.backgroundWidth - this.textRenderer.getWidth(title)) / 2;
        int titleY = 10; 

        
        context.drawText(this.textRenderer, title, titleX, titleY, 4210752, false);

這個class繼承HandledScreen CustomScreenHandler

首先我們先定義了我們的新GUI的紋理路徑，我們的紋理可以透過小畫家或是其他方式修改原始的GUI，並把它放到我們的紋理資料夾。
接著我們設定圖片的長與寬

    private static final int ImageWidth = 176;
    private static final int ImageHeight = 222;

然後我們初始化CustomScreen，並把我們剛剛寫的長與寬帶進去。

剩下的內容明天再說