UltimateUI guide

How to Add Zooming and Moving in UI with Cursor

In this guide, you will learn how to allow player to zoom and move in UI

You can add a zoomable UI option to a page that uses a cursor. This allows the player to zoom in and out and move around the entire page, similar to how you navigate inside an editor.

To add this feature, open the .yml file and add the following options to the screen section:

ini

screen:
  width: 1920
  height: 1080
  zoom:
    enabled: true
    default: 1.0
    min: 0.5
    max: 3.0
    step: 1.12
    pan:
      enabled: true
      require-sneak: false
      follow-zoom: true
      limit:
        left: 200
        right: 200
        up: 150
        down: 150
      rubber: 0.35
      snap-ticks: 5

default, min, and max define the initial zoom level, the minimum zoom level, and the maximum zoom level.
step defines how much the UI zooms in or out when using the scroll wheel.
pan is the section responsible for allowing the player to move around the page.
require-sneak requires the player to hold Shift in order to move around.
follow-zoom determines whether zooming increases the available panning area.
limit defines how far the player can move in each direction.
rubber controls how much resistance is applied when dragging past the movement limits.
snap-ticks controls how quickly the UI moves back inside the allowed area after going past the limits.