> For the complete documentation index, see [llms.txt](https://docs.quickclient.cc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quickclient.cc/ui/render-2d.md).

# 2D-рендер

Рисование HUD поверх игры через Render2D.

Всё, что скрипт рисует поверх игры, рисуется через `Render2D`: свой HUD, плашка с таймером, список целей в углу экрана.

Он приходит аргументом в `onRender2D(Render2D)` и действует только в этом кадре. Сохранять его в поле нельзя: в следующем кадре методы бросят `IllegalStateException`. Тот же набор методов доступен `Custom`-настройкам через `Canvas.render()`.

Координаты задаются в единицах интерфейса Quick, ноль находится в левом верхнем углу. Цвет записывается как `0xAARRGGBB`. Если альфа равна `0`, рисовать нечего, и такой вызов пропускается. Цвета лучше брать из темы через `themeColor(token)`, тогда скрипт будет выглядеть как часть Quick в любой теме.

```java
@Override
public void onRender2D(Render2D render) {
    float w = render.textWidth("sf_rounded_semibold", "Hello", 7f, 0f) + 12f;
    render.drawClientRect(10f, 10f, w, 16f, 4f, render.themeColor("rect"));
    render.drawText("sf_rounded_semibold", "Hello", 16f, 14f, 7f, 0f, render.themeColor("hudText"));
    render.drawItem("totem_of_undying", 16f + w, 8f, 16f, 3);
}
```

Как это работает:

* Сначала измеряется ширина надписи, к ней добавляется отступ по краям.
* Под текстом рисуется скруглённая плашка цвета темы, поверх неё сама надпись.
* Справа от плашки выводится тотем с цифрой 3.

## Фигуры

| Метод                                                                | Описание                                                          |
| -------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `drawClientRect(x, y, w, h, round, color)`                           | скруглённый прямоугольник; при `round = 0` углы прямые            |
| `drawClientGradientRect(x, y, w, h, r1, r2, r3, r4, c1, c2, c3, c4)` | отдельный радиус и цвет для каждого угла                          |
| `drawClientOutline(x, y, w, h, round, smooth, c1, c2, c3, c4)`       | обводка с градиентом по углам                                     |
| `drawBlur(x, y, w, h, round, smooth, radius, alpha)`                 | размывает фон под прямоугольником                                 |
| `drawBlur(x, y, w, h, round, smooth, radius, alpha, color)`          | размытие с цветной подложкой                                      |
| `drawTexture(id, x, y, w, h, color)`                                 | текстура целиком; `id` это путь в `resources/` или полный id игры |
| `drawTexture(id, sampler, x, y, w, h, color)`                        | с семплером: `NEAREST` или `LINEAR` + `CLAMP` или `REPEAT`        |
| `drawTexture(id, x, y, w, h, u, v, uWidth, vHeight, color)`          | часть текстуры по UV, в долях от 0 до 1                           |
| `drawTexture(id, x, y, w, h, u, v, uWidth, vHeight, round, color)`   | часть текстуры со скруглёнными углами                             |
| `drawImage(path, x, y, w, h, color)`                                 | картинка из `resources/`, работает так же, как `drawTexture`      |
| `shader(shader, x, y, w, h, color)`                                  | прямоугольник со своим шейдером, см. [Шейдеры](/ui/shaders.md)    |
| `shader(shader, x, y, w, h, color, first, second)`                   | то же с двумя параметрами, шейдер получит их в `UV2`              |
| `drawQuad(…)`, `drawMesh(…)`                                         | низкоуровневое рисование, см. [Своя геометрия](/ui/gpu.md)        |

Если у текстуры цвет `-1`, она рисуется как есть, без подкраски. `Render2D.ITEM_SIZE = 16` равен стороне клетки инвентаря.

## Предметы

Иконки предметов не рисуются сразу. Quick собирает их до конца кадра и выводит одной пачкой поверх всего, что было нарисовано раньше. Иначе полупрозрачная плашка ложилась бы сверху, и предмет выглядел бы бледным.

| Метод                                            | Описание                                            |
| ------------------------------------------------ | --------------------------------------------------- |
| `drawItem(item, x, y)`                           | иконка предмета из копии, размером с клетку         |
| `drawItem(item, x, y, size)`                     | то же, но своего размера                            |
| `drawItem(item, x, y, size, decorations)`        | с количеством и полоской прочности, как в инвентаре |
| `drawItem(id, x, y)`, `drawItem(id, x, y, size)` | по строковому id                                    |
| `drawItem(id, x, y, size, count)`                | с цифрой количества                                 |

Все они возвращают `boolean`: удалось ли поставить иконку в этот кадр.

## Текст

Список шрифтов Quick возвращает `fonts()`. Встроены `sf_rounded_bold`, `sf_rounded_semibold` и `sf_rounded_medium`, а свои добавляются через `fonts().register(...)`. Как это сделать, описано на странице [Оформленный текст](/ui/text.md).

| Метод                                                                                     | Тип     | Описание                                                                   |
| ----------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------- |
| `drawText(font, text, x, y, size, thickness, color)`                                      | `float` | строка; возвращает координату её правого края                              |
| `drawText(font, Text, x, y, size, thickness)`                                             | `float` | оформленный текст, цвета берутся из него                                   |
| `drawText(font, Text, x, y, size, thickness, color)`                                      | `float` | оформленный текст; `color` получают куски без своего цвета                 |
| `drawTextFaded(font, text, x, y, size, thickness, color, maxWidth, fade)`                 | `void`  | строка, которая плавно гаснет к правому краю                               |
| `drawTextGradient(font, key, text, x, y, size, thickness, color, from, to, power, speed)` | `void`  | бегущий градиент; `key` это постоянный ключ, чтобы анимация не сбивалась   |
| `drawClientText(text, x, y, size, color)`                                                 | `void`  | текст стандартным шрифтом Quick                                            |
| `drawClientGradientText(text, x, y, size, color1, color2)`                                | `void`  | градиент слева направо                                                     |
| `textWidth(font, text, size, thickness)`                                                  | `float` | ширина строки                                                              |
| `textWidth(font, Text, size, thickness)`                                                  | `float` | ширина оформленного текста                                                 |
| `textWidth(text, size)`, `textHeight(size)`                                               | `float` | то же для стандартного шрифта Quick                                        |
| `textHeight(font, size)`                                                                  | `float` | кегль                                                                      |
| `lineHeight(font, size)`                                                                  | `float` | полная высота строки, от верха высоких букв до нижнего края букв вроде «у» |
| `baseline(font, size)`                                                                    | `float` | расстояние от `y` до базовой линии                                         |
| `descender(font, size)`                                                                   | `float` | насколько буквы вроде «у» и «р» опускаются ниже базовой линии              |

`thickness` задаёт расстояние между буквами, обычно от -0.1 до 0.2. Ширину текста лучше измерить один раз и сохранить, пересчитывать её каждый кадр не нужно.

## Система координат и обрезка

| Метод                               | Описание                                                                                                            |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `push()`, `pop()`                   | сохранить систему координат и вернуть её; незакрытые `push` Quick снимает в конце кадра                             |
| `translate(x, y)`                   | сдвинуть начало координат                                                                                           |
| `scale(x, y)`                       | масштаб относительно начала                                                                                         |
| `scale(scale, originX, originY)`    | масштаб относительно точки                                                                                          |
| `rotate(degrees)`                   | поворот вокруг начала по часовой стрелке                                                                            |
| `rotate(degrees, originX, originY)` | поворот вокруг точки                                                                                                |
| `scissor(x, y, w, h)`               | всё, что рисуется дальше, обрезается по этой рамке; обрезки можно вкладывать, но каждой нужен свой `clearScissor()` |
| `clearScissor()`                    | снять последнюю обрезку                                                                                             |
| `newLayer()`                        | начать новый слой: всё дальнейшее ляжет поверх уже нарисованного                                                    |

## Экран и тема

| Метод                             | Тип     | Описание                                                                                                                      |
| --------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `screenWidth()`, `screenHeight()` | `int`   | размер экрана в единицах интерфейса                                                                                           |
| `delta()`                         | `float` | доля тика, прошедшая к этому кадру                                                                                            |
| `themeColor(token)`               | `int`   | цвет темы: `basic`, `basic2`, `main`, `text`, `hudText`, `headerText`, `inactiveText`, `rect`, `outline`, `field`, `switcher` |
| `fade(index)`                     | `int`   | цвет бегущего градиента темы; `index` это сдвиг фазы в градусах, 0, 90, 180 и 270 дают четыре угла                            |

Единицы интерфейса и пиксели окна отличаются в `control().guiScale()` раз. Координаты курсора из `keys().mouseX()` приходят в пикселях, поэтому перед использованием их нужно разделить на масштаб.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.quickclient.cc/ui/render-2d.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.