Fabric Wiki

User Tools

Site Tools

Trace:
tutorial:screen

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
tutorial:screen [2023/04/21 03:28] – [Creating a screen] solidblocktutorial:screen [2023/12/18 01:38] (current) – [Adding text] solidblock
Line 1: Line 1:
 ====== Creating a screen ====== ====== Creating a screen ======
  
-:!: The page is still in progress. +A **screen** is a graphical user interface that extends ''Screen'', allowing the user to interact and fulfill some functionalities. One example of a screen is a custom config screen of your mod. Screens only exist in the client, so you can annotate the relavant classes with ''@Environment(EnvType.CLIENT)''.
- +
-A **screen** is a graphical user interface that extends ''Screen'', allowing the user to interact and fulfill some functionalities. One example of a screen is a custom config screen of your mod. Screens only exist in the client, so you must annotate them with ''@Environment(EnvType.CLIENT)''.+
  
 You may use mixins to add into an existing screen a button that goes to your screen. But in many cases, we can implement the ''ModMenuApi'' of Mod Menu mod, and make it possible to access the screen via the config button in the Mod Menu screen. This article does document how to implement ''ModMenuApi''. You may use mixins to add into an existing screen a button that goes to your screen. But in many cases, we can implement the ''ModMenuApi'' of Mod Menu mod, and make it possible to access the screen via the config button in the Mod Menu screen. This article does document how to implement ''ModMenuApi''.
Line 60: Line 58:
  
 ==== Can I instantiate widgets in the constructor ==== ==== Can I instantiate widgets in the constructor ====
-Some users may instantiaze the widgets in the constructor, or the initialization. For example, they may write the code like this:+Some users may instantiate the widgets in the constructor, or the initialization of class. For example, they may write the code like this:
 <code java> <code java>
- 
   public ButtonWidget button1 = ButtonWidget.builder(...).build();   public ButtonWidget button1 = ButtonWidget.builder(...).build();
   public ButtonWidget button2 = ButtonWidget.builder(...).build();   public ButtonWidget button2 = ButtonWidget.builder(...).build();
Line 73: Line 70:
 </code> </code>
  
-This is also OK. Its advantage is, if the widgets have some several states (such as the current selections of ''CyclingWidget'', or typed text in the ''TextFieldWidget''), they will not be reset when you resize the screen, because they will not be created again. However, when resizing, the ''width'' and ''height'' is changed, but you did not update. Therefore, in this case, you have to update the size or positions in the ''init'' method.+This is also OK. Its advantage is, if the widgets have some several states (such as the current selections of ''CyclingWidget'', or typed text in the ''TextFieldWidget''), they will not be reset when you resize the screen, because they will not be created again. However, when resizing, the ''width'' and ''height'' of screen are changed, but the positions and sizes of elements will not update. Therefore, in this case, you have to update the sizes or positions in the ''init'' method.
  
 <code java> <code java>
Line 87: Line 84:
  
 ==== Notice about the order ==== ==== Notice about the order ====
-After adding amounts of elements, all of them are added. Some people don't care about the order they are added, because all of the widgets are rendered at the sametime. However, if you select widgets by pressing the ''Tab'' key, you may find they are focused in a messy order. Therefore, please ensure that the widgets are added in a correct order.+After adding amounts of elements, all of them can render and be selected. Some people don't care about the order they are added, because all of the widgets are rendered at the sametime. However, if you select widgets by pressing the "Tab" key, you may find they are focused in a messy order. Therefore, please ensure that the widgets are added in a correct order, which the behaviour of "Tab" key depends on.
  
 ===== The parent screen ===== ===== The parent screen =====
-I accessed the screen via another screen, such as the Mod Menu screen, but when I press ''Esc'' to go back, it just jumped to the main screen, not the previous screen, why? This is because you did not specify a parent screen, and the ''close'' method just directly jumps to the main screen.+I accessed the screen via another screen, such as the Mod Menu screen, but when I press "Esc" to go back, it just jumped to the main screen, not the previous screen, why?
  
-Add a parent as a parameter and field, and use it in the ''close'' method:+This is because you did not specify a parent screen, and the ''close'' method just directly jumps to the main screen. 
 + 
 +Add a ''parent'' as a parameter and field, and use it in the ''close'' method:
 <code java> <code java>
  
Line 113: Line 112:
   * **Title**: The title of the screen, which is defined in the constructor. When you enter the screen, the title will be automatically narrated.   * **Title**: The title of the screen, which is defined in the constructor. When you enter the screen, the title will be automatically narrated.
   * **Position**: Telling you the position of the widget you are focusing on. In vanilla, it is: "//Screen element %s out of %s//". Besides, if in a list widget, the following will also be narrated: "//Selected list row %s out of %s//".   * **Position**: Telling you the position of the widget you are focusing on. In vanilla, it is: "//Screen element %s out of %s//". Besides, if in a list widget, the following will also be narrated: "//Selected list row %s out of %s//".
-  * **Hint**: This refers the tooltip of the element you focus on or hovers on. For example, the ''tooltip'' method when you create the ''ButtonWidget'' in the code above.+  * **Hint**: This refers the tooltip of the element you focus on or hovers on. For example, you may remember about the ''tooltip'' method when you create the ''ButtonWidget'' in the code above. The tooltip is narrated in this part.
   * **Usage**: In vanilla, the usage is: "//Use mouse cursor or Tab button to select element//".   * **Usage**: In vanilla, the usage is: "//Use mouse cursor or Tab button to select element//".
  
Line 125: Line 124:
 In ''render'' method, you can invoke methods like ''textRenderer.draw'', ''drawTextWithShadow'' or ''drawCenteredTextWithShadow'' to render a text on the screen. In ''render'' method, you can invoke methods like ''textRenderer.draw'', ''drawTextWithShadow'' or ''drawCenteredTextWithShadow'' to render a text on the screen.
 <code java> <code java>
 +  // For versions 1.20 below
   @Override   @Override
   public void render(MatrixStack matrices, int mouseX, int mouseY, float delta) {   public void render(MatrixStack matrices, int mouseX, int mouseY, float delta) {
     super.render(matrices, mouseX, mouseY, delta);     super.render(matrices, mouseX, mouseY, delta);
     drawCenteredTextWithShadow(matrices, textRenderer, Text.literal("You must see me"), width / 2, height / 2, 0xffffff);     drawCenteredTextWithShadow(matrices, textRenderer, Text.literal("You must see me"), width / 2, height / 2, 0xffffff);
 +  }
 +  
 +  // For versions 1.20 and after
 +  @Override
 +  public void render(DrawContext context, int mouseX, int mouseY, float delta) {
 +    super.render(context, mouseX, mouseY, delta);
 +    context.drawCenteredTextWithShadow(textRenderer, Text.literal("You must see me"), width / 2, height / 2, 0xffffff);
   }   }
 </code> </code>
Line 135: Line 142:
 <code java> <code java>
     final MultilineText multilineText = MultilineText.create(textRenderer, Text.literal("The text is pretty long ".repeat(20)), width - 20);     final MultilineText multilineText = MultilineText.create(textRenderer, Text.literal("The text is pretty long ".repeat(20)), width - 20);
 +    
 +    // For versions 1.20 below
     multilineText.drawWithShadow(matrices, 10, height / 2, 16, 0xffffff);     multilineText.drawWithShadow(matrices, 10, height / 2, 16, 0xffffff);
 +    // For versions 1.20 and after
 +    multilineText.drawWithShadow(context, 10, height / 2, 16, 0xffffff);
 </code> </code>
  
 Another alterative is using ''TextWidget'' or ''MultilineTextWidget''. They are by default not selectable or narratable because their ''active'' field is ''false''. Another alterative is using ''TextWidget'' or ''MultilineTextWidget''. They are by default not selectable or narratable because their ''active'' field is ''false''.
  
-[WIP]+===== Scrolling ===== 
 +The screen does not support scrolling, but you can add widgets that supports scrolling. ''<yarn class_350>'' is a class for widgets that contains multiple entries and supports scrolling. However, instead of directly extending it, it is more suitable to extend ''<yarn class_4280>'' or ''<yarn class_4265>'', which already implemented navigation and narration. The difference is: 
 + 
 +  * ''<yarn class_4280>'' refers to a widget in which you can select a row. In widgets that extends the class, you usually select one entry in the list. Some vanilla examples are biome selection screen in the buffet (single biome) world option, and the language selection screen. 
 +  * ''<yarn class_4265>'' refers to a widget where each row has child elements. In widgets that extends this class, you select and interacts the elements in the rows. Like a ''Screen'', the ''<yarn class_4265>.<yarn class_4266>'' should have zero, one, or more child elements. 
 + 
 +===== Things to check before finishing ===== 
 + 
 +After finishing your screen, in order to avoid potential issues, please check: 
 +  * whether the screen returns to the last screen (parent screen) when you press "Esc" 
 +  * whether these classes exist only on client (which means they will not be loaded in the dedicated server) 
 +  * whether elements are focused in the correct order when you press "Tab" to select them 
 +  * whether the behaviors are correct when you resize 
 +  * whether the narrations are correct when you use "Tab" or mouse cursor to select element while narration enabled
tutorial/screen.1682047732.txt.gz · Last modified: 2023/04/21 03:28 by solidblock