Renderer dei Blocchi-Entità 1.21.11

Impara come vivacizzare il rendering con i renderer di blocchi-entità.

WARNING

Questa pagina si applica alla versione 1.21.11. La documentazione delle versioni meno recenti potrebbe essere incompleta.

A volte non basta usare il formato del modello di Minecraft. Se devi aggiungere del rendering dinamico all'aspetto del tuo blocco, dovrai usare un BlockEntityRenderer.

Per esempio, facciamo in modo che il Blocco Contatore dell'articolo sui Blocchi-Entità mostri il numero di clic sulla sua faccia superiore.

Creare un BlockEntityRenderer

Il rendering di blocchi-entità utilizza un sistema di presenta/renderizza dove prima presenti i dati necessari a renderizzare un oggetto a schermo, poi il gioco renderizza l'oggetto usando lo stato presentato.

Nel creare un BlockEntityRenderer per il CounterBlockEntity, è importante inserire la classe nell'insieme delle fonti corretto, come src/client/, se il tuo progetto divide gli insiemi delle fonti tra client e server. Accedere a classi legate al rendering direttamente nell'insieme delle fonti src/main/ non è sicuro perché quelle classi potrebbero essere caricare su un server.

Prima di tutto, dobbiamo creare un BlockEntityRenderState per il nostro CounterBlockEntity per contenere i dati che verrano usati per il rendering. In questo caso, sarà necessario che i clicks siano disponibili durante il rendering

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

	public int getClicks() {
		return clicks;
	}

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

Poi creiamo un BlockEntityRenderer per il nostro 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) {
	}
}

La nuova classe ha un costruttore con un BlockEntityRendererProvider.Context come parametro. Il Context ha alcune utilità per il rendering, come l'ItemRenderer o il TextRenderer. Inoltre, includendo un costruttore come questo, è possibile usare il costruttore come interfaccia funzionale per la BlockEntityRendererProvider:

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

Sovrascriveremo alcuni metodi per impostare lo stato di rendering, oltre al metodo render dove verrà impostata la logica di rendering.

createRenderState può essere usato per inizializzare lo stato di rendering.

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

extractRenderState può essere usato per aggiornare lo stato di rendering con i dati dell'entità.

@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
}

Dovresti registrare i renderer dei blocchi-entità nella tua classe ClientModInitializer.

BlockEntityRenderers è una registry che mappa ogni BlockEntityType con del codice di rendering personalizzato al rispettivo BlockEntityRenderer.

Disegnare su Blocchi

Ora che abbiamo un renderer, possiamo disegnare. Il metodo render viene chiamato ad ogni frame, ed è qui che la magia del rendering avviene.

Orientarsi

Anzitutto, dobbiamo bilanciare e ruotare il testo in modo che sia sul lato superiore del blocco.

INFO

Come suggerisce il nome, il PoseStack è uno stack, il che significa che puoi inserirci (push) ed estrarne (pop) le trasformazioni. Una buona regola di base è inserirne uno nuovo all'inizio del metodo render ed estrarlo alla fine, in modo che il rendering di un blocco non influenzi gli altri.

Si possono trovare maggiori informazioni riguardo al PoseStack nell'articolo sui Concetti Base del Rendering.

Per capire meglio le traslazioni e le rotazioni necessarie, visualizziamole. Nell'immagine, il blocco verde è dove il testo verrebbe disegnato, nel punto più in basso a sinistra del blocco in maniera predefinita:

Quindi dobbiamo inizialmente spostare il testo a metà del blocco sugli assi X e Z, poi muoverlo in cima al blocco lungo l'asse Y:

Questo si fa con una sola chiamata a translate:

matrices.translate(0.5, 1, 0.5);

Ecco che abbiamo completato la tranlazione, mancano la rotazione e la scala.

Per impostazione predefinita il testo viene disegnato sul piano XY, quindi dobbiamo ruotarlo di 90 gradi attorno all'asse X perché sia orientato verso l'alto sul piano XZ:

Il PoseStack non ha una funzione rotate, invece dobbiamo usare multiply e Axis.XP:

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

Ora il testo è nella posizione corretta, ma è troppo grande. Il BlockEntityRenderer mappa l'intero blocco ad un cubo [-0.5, 0.5], mentre il TextRenderer usa come coordinate Y [0, 9]. Per questo dobbiamo rimpicciolirlo di un fattore di 18:

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

Ora la trasformazione completa ha questo aspetto:

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

Disegnare Testo

Come detto prima, il Context passato nel costruttore del nostro renderer ha un TextRenderer che possiamo usare per misurare il testo (width), che è utile per centrarelo.

Per disegnare il testo, dovremo fornire i dati necessari alla coda di renderizzazione. Siccome stiamo disegnando del testo, possiamo usare il metodo submitText fornito attraverso l'istanza di OrderedRenderCommandQueue passata nel metodo render.

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
);

Il metodo submitText prende molti parametri, ma i più importanti sono:

• la FormattedCharSequence da disegnare;
• Le sue coordinate x e y;
• Il valore RGB di color;
• La Matrix4f che descrive come deve essere trasformato (per ottenerne una da un PoseStack, possiamo usare .last().pose() per ottenere la Matrix4f per la voce in cima).

Dopo tutto questo lavoro, eccone il risultato: