Рендер блока-сутності

Іноді використання формату моделі Minecraft недостатньо. Якщо вам потрібно додати динамічний рендер до візуальних елементів вашого блока, вам потрібно буде використовувати BlockEntityRenderer.

Наприклад, нумо зробимо так, щоб блок лічильника зі статті про блоки-сутності показував кількість натискань у зверху.

Створення BlockEntityRenderer

Рендер блока-сутності використовує систему надсилання/рендера, де ви спочатку надсилаєте дані, необхідні для рендера об’єкта на екрані, а потім гра рендерить об’єкт, використовуючи його поданий стан.

Створюючи BlockEntityRenderer для CounterBlockEntity, важливо помістити клас у відповідний вихідний набір, наприклад src/client/, якщо ваш проєкт використовує розділені вихідні набори для клієнта та сервера. Доступ до пов’язаних із рендером класів безпосередньо у вихідному наборі src/main/ небезпечний, оскільки ці класи можуть бути завантажені на сервер.

По-перше, нам потрібно створити BlockEntityRenderState для нашого CounterBlockEntity, щоб зберігати дані, які використовуватимуться для рендера. У цьому випадку нам знадобиться, щоб `clicks' були доступні під час рендера.

public class CounterBlockEntityRenderState extends BlockEntityRenderState {
	private int clicks = 0;

	public int getClicks() {
		return clicks;
	}

	public void setClicks(int clicks) {
		this.clicks = clicks;
	}
}

Потім ми створюємо BlockEntityRenderer для нашого CounterBlockEntity.

public class CounterBlockEntityRenderer implements BlockEntityRenderer<CounterBlockEntity, CounterBlockEntityRenderState> {
	public CounterBlockEntityRenderer(BlockEntityRendererProvider.Context context) {
	}

	@Override
	public CounterBlockEntityRenderState createRenderState() {
		return new CounterBlockEntityRenderState();
	}

	@Override
	public void extractRenderState(CounterBlockEntity blockEntity, CounterBlockEntityRenderState state, float tickProgress, Vec3 cameraPos, @Nullable ModelFeatureRenderer.CrumblingOverlay crumblingOverlay) {
	}

	@Override
	public void submit(CounterBlockEntityRenderState state, PoseStack matrices, SubmitNodeCollector queue, CameraRenderState cameraState) {
	}
}

Новий клас має конструктор із BlockEntityRendererProvider.Context як параметр. У Context є кілька корисних штук рендера, наприклад ItemRenderer або Font. Крім того, включивши такий конструктор, стає можливим використовувати конструктор як сам функціональний інтерфейс BlockEntityRendererProvider:

public class ExampleModBlockEntityRenderer implements ClientModInitializer {
	@Override
	public void onInitializeClient() {
		BlockEntityRenderers.register(ModBlockEntities.COUNTER_BLOCK_ENTITY, CounterBlockEntityRenderer::new);
	}
}

Ми перевизначимо кілька методів для налаштування стану рендера разом із методом submit, де буде налаштовано логіку рендера.

createRenderState можна використовувати для ініціалізації стану рендера.

@Override
public CounterBlockEntityRenderState createRenderState() {
	return new CounterBlockEntityRenderState();
}

extractRenderState можна використовувати для оновлення стану рендера за допомогою даних сутності.

@Override
public void extractRenderState(CounterBlockEntity blockEntity, CounterBlockEntityRenderState state, float tickProgress, Vec3 cameraPos, @Nullable ModelFeatureRenderer.CrumblingOverlay crumblingOverlay) {
	// :::1
	BlockEntityRenderer.super.extractRenderState(blockEntity, state, tickProgress, cameraPos, crumblingOverlay);
	state.setClicks(blockEntity.getClicks());
	// :::1
}

Ви маєте зареєструвати рендер блока-сутності у своєму класі ClientModInitializer.

BlockEntityRenderers — це реєстр, який зіставляє кожен BlockEntityType зі спеціальним кодом рендера на відповідний BlockEntityRenderer.

Малювання на блоках

Тепер, коли у нас є рендер, ми можемо малювати. Метод submit викликається кожним кадром, і саме в ньому відбувається магія рендера.

Переміщення

По-перше, нам потрібно змістити та повернути текст так, щоб він знаходився вище блока.

INFO

Як випливає з назви, PoseStack є стеком, що означає, що ви можете надсилати та витягувати перетворення. Гарне емпіричне правило полягає в тому, щоб додати новий блок на початку методу submit і відкрити його в кінці, щоб рендер одного блока не впливав на інші.

Більше інформації про PoseStack можна знайти в статті про основні концепції рендера.

Щоб полегшити розуміння необхідних перекладів і поворотів, візуалізуємо їх. На цьому зображенні зелений блок — це місце, де буде намальовано текст, усталено у найдальшій нижній лівій точці блока:

Отже, спочатку нам потрібно перемістити текст наполовину блока на осях X і Z, а потім перемістити його вгору до верхньої частини блока на осі Y:

Це робиться за допомогою одного виклику translate:

matrices.translate(0.5, 1, 0.5);

Ось і переклад зроблено, залишаються обертання і масштаб.

Усталено, текст малюється на площині X-Y, тому нам потрібно повернути його на 90 градусів навколо осі X, щоб він був спрямований вгору на площині X-Z:

![Зелений блок у верхній центральній точці, спрямований догори] (/assets/develop/blocks/block_entity_renderer_3.png)

PoseStack не має функції rotate, натомість нам потрібно використовувати mulPose і Axis.XP:

matrices.mulPose(Axis.XP.rotationDegrees(90));

Тепер текст у правильному положенні, але він завеликий. BlockEntityRenderer промальовує весь блок на куб [-0.5, 0.5], тоді як Font використовує координати Y [0, 9]. Таким чином, нам потрібно зменшити його в 18 разів:

matrices.scale(1/18f, 1/18f, 1/18f);

Тепер усе перетворення виглядає так:

matrices.pushPose();
matrices.translate(0.5, 1, 0.5);
matrices.mulPose(Axis.XP.rotationDegrees(90));
matrices.scale(1/18f, 1/18f, 1/18f);

Малювання тексту

Як згадувалося раніше, Context, переданий у конструктор нашого рендера, має Font, який ми можемо використовувати для вимірювання тексту (width), який корисний для центрування.

Щоб намалювати текст, ми передамо необхідні дані в чергу рендера. Оскільки ми малюємо деякий текст, ми можемо використати метод submitText, наданий через екземпляр SubmitNodeCollector, який передається в метод submit.

String text = state.getClicks() + "";
float width = font.width(text);

// draw the text. params:
// text, x, y, color, ordered text, shadow, text layer type, light, color, background color, outline color
queue.submitText(
		matrices,
		-width / 2, -4f,
		Component.literal(text).getVisualOrderText(),
		false,
		Font.DisplayMode.SEE_THROUGH,
		state.lightCoords,
		0xffffffff,
		0,
		0
);

Метод submitText приймає багато параметрів, але найважливіші з них:

• FormattedCharSequence для малювання;
• його координати x і y;
• RGB-значення color;
• PoseStack, що описує, як його слід трансформувати.

І після всієї цієї роботи ось результат: