minetest_modding_book/_de/players/hud.md

---
title: HUD
layout: default
root: ../..
idx: 4.6
description: Lernen Sie, wie man HUD-Elemente anzeigt
redirect_from: /de/chapters/hud.html
---

## Einleitung <!-- omit in toc -->

Heads Up Display (HUD) Elemente ermöglichen es Ihnen, Texte, Bilder und andere grafische Elemente anzuzeigen.

Das HUD akzeptiert keine Benutzereingaben; dafür sollten Sie eine [formspec](formspecs.html) verwenden.

- [Positionierung](#positionierung)
	- [Position und Versatz](#position-und-versatz)
	- [Ausrichtung](#ausrichtung)
	- [Anzeigetafel](#anzeigetafel)
- [Textelemente](#textelemente)
	- [Parameter](#parameter)
	- [Unser Beispiel](#unser-beispiel)
- [Bild-Elemente](#bild-Elemente)
	- [Parameter](#parameter-1)
	- [Scale](#scale)
- [Ein Element verändern](#ein-element-verändern)
- [IDs speichern](#ids-speichern)
- [Andere Elemente](#andere-elemente)

## Positionierung

### Position und Versatz

<figure class="right_image">
    <img
        width="300"
        src="{{ page.root }}//static/hud_diagram_center.svg"
        alt="Diagramm mit einem zentrierten Textelement">
</figure>

Bildschirme gibt es in verschiedenen Größen und Auflösungen. Ein HUD muss auf allen
Bildschirmtypen gut funktionieren.

Die Lösung von Minetest besteht darin, die Position eines Elements sowohl durch
einer prozentualen Position und einem Versatz festzulegen.
Die prozentuale Position bezieht sich auf die Bildschirmgröße, d. h. um ein Element
in der Mitte des Bildschirms zu platzieren, müssen Sie eine prozentuale Position von der Hälfte
des Bildschirms, z. B. (50%, 50%), und einen Versatz von (0, 0) angeben.

Der Versatz wird dann verwendet, um ein Element relativ zur Prozentposition zu verschieben.

<div style="clear:both;"></div>

### Ausrichtung

Die Ausrichtung gibt an, wo das Ergebnis von Position und Versatz auf dem Element liegt -
zum Beispiel `{x = -1.0, y = 0.0}` lässt das Ergebnis von Position und Versatz
auf die linke Seite der Elementbegrenzung liegen. Dies ist besonders nützlich, wenn Sie
ein Textelement links-, mittel- oder rechtsbündig ausrichten wollen.

<figure>
    <img
        width="500"
        src="{{ page.root }}//static/hud_diagram_alignment.svg"
        alt="Diagramm zur Ausrichtung">
</figure>

Das obige Diagramm zeigt 3 Fenster (blau), jedes mit einem einzelnen HUD-Element (gelb)
und jeweils einer anderen Ausrichtung. Der Pfeil ist das Ergebnis der Berechnung von Position
und Versatzberechnung.

### Anzeigetafel

In diesem Kapitel werden Sie lernen, wie Sie eine Anzeigetafel
positionieren und aktualisieren können:

<figure>
    <img
        src="{{ page.root }}//static/hud_final.png"
        alt="Screenshot vom uns angestrebten HUD">
</figure>

Im obigen Screenshot haben alle Elemente die gleiche prozentuale Position
(100%, 50%) - aber unterschiedliche Versätze. Dadurch wird das Ganze am rechten Rand des Fensters verankert, kann aber in der Größe verändert werden, ohne einen Bruch zu benutzen.

## Textelemente

Sie können ein HUD-Element erstellen, sobald Sie eine Kopie des Spieler-Objekts haben:

```lua
local player = minetest.get_player_by_name("benutzername")
local idx = player:hud_add({
     hud_elem_type = "text",
     position      = {x = 0.5, y = 0.5},
     offset        = {x = 0,   y = 0},
     text          = "Hallo Welt!",
     alignment     = {x = 0, y = 0},  -- mittig Ausrichtung
     scale         = {x = 100, y = 100}, -- Später behandelt
})
```

Die Funktion `hud_add` gibt eine Element-ID zurück - diese kann später verwendet werden, um ein
HUD-Element zu modifizieren oder zu entfernen.

### Parameter

Der Typ des Elements wird mit der Eigenschaft `hud_elem_type` in der Definitionstabelle angegeben
Tabelle angegeben. Die Bedeutung der anderen Eigenschaften hängt von diesem Typ ab.

`scale` ist die maximale Begrenzung des Textes; Text außerhalb dieser Begrenzung wird abgeschnitten, z. B.: `{x=100, y=100}`.

`number` ist die Farbe des Textes in [hexadezimaler Form] (http://www.colorpicker.com/), z. B.: `0xFF0000`.


### Unser Beispiel

Lassen Sie uns fortfahren und den gesamten Text in unserer Punkte-Tafel platzieren:

```lua
-- Holt sich die Anzahl der Abbauungen und Platzierungen aus dem Speicher, oder setzt den Wert auf standardmäßig 0
local meta        = player:get_meta()
local abbau_text   = "Abgebaut: " .. meta:get_int("score:digs")
local platzier_text = "Platziert: " .. meta:get_int("score:places")

player:hud_add({
    hud_elem_type = "text",
    position  = {x = 1, y = 0.5},
    offset    = {x = -120, y = -25},
    text      = "Statistiken",
    alignment = 0,
    scale     = { x = 100, y = 30},
    number    = 0xFFFFFF,
})

player:hud_add({
    hud_elem_type = "text",
    position  = {x = 1, y = 0.5},
    offset    = {x = -180, y = 0},
    text      = abbau_text,
    alignment = -1,
    scale     = { x = 50, y = 10},
    number    = 0xFFFFFF,
})

player:hud_add({
    hud_elem_type = "text",
    position  = {x = 1, y = 0.5},
    offset    = {x = -70, y = 0},
    text      = platzier_text,
    alignment = -1,
    scale     = { x = 50, y = 10},
    number    = 0xFFFFFF,
})
```

Daraus ergibt sich das Folgende:

<figure>
    <img
        src="{{ page.root }}//static/hud_text.png"
        alt="Screenshot des HUD, den wir anstreben">
</figure>


## Bild-Elemente

Bild-Elemente werden auf sehr ähnliche Weise wie Text-Elemente erstellt:

```lua
player:hud_add({
    hud_elem_type = "image",
    position  = {x = 1, y = 0.5},
    offset    = {x = -220, y = 0},
    text      = "punkte_hintergrund.png",
    scale     = { x = 1, y = 1},
    alignment = { x = 1, y = 0 },
})
```

Sie werden jetzt dies haben:

<figure>
    <img
        src="{{ page.root }}//static/hud_background_img.png"
        alt="Screenshot des bisherigen HUDs">
</figure>

### Parameter

Das Feld `text` wird für die Angabe des Bildnamens verwendet.

Wenn eine Koordinate positiv ist, handelt es sich um einen Skalierungsfaktor, wobei 1
die ursprüngliche Bildgröße, 2 die doppelte Größe usw. ist.
Ist eine Koordinate jedoch negativ, handelt es sich um einen Prozentsatz der Bildschirmgröße.
Zum Beispiel ist `x=-100` 100% der Breite.

### Scale

Lassen Sie uns den Fortschrittsbalken für unser Score-Panel als Beispiel für die Skala erstellen:

```lua
local percent = tonumber(meta:get("score:score") or 0.2)

player:hud_add({
    hud_elem_type = "image",
    position  = {x = 1, y = 0.5},
    offset    = {x = -215, y = 23},
    text      = "punkte_balken_leer.png",
    scale     = { x = 1, y = 1},
    alignment = { x = 1, y = 0 },
})

player:hud_add({
    hud_elem_type = "image",
    position  = {x = 1, y = 0.5},
    offset    = {x = -215, y = 23},
    text      = "punkte_balken_voll.png",
    scale     = { x = percent, y = 1},
    alignment = { x = 1, y = 0 },
})
```

Wir haben jetzt ein HUD, der wie der im ersten Abschnitt aussieht!
Es gibt jedoch ein Problem: Es wird nicht aktualisiert, wenn sich die Statistiken ändern.

## Ein Element verändern

Sie können die von der Methode `hud_add` zurückgegebene ID verwenden, um es später zu aktualisieren oder zu entfernen.

```lua
local idx = player:hud_add({
     hud_elem_type = "text",
     text          = "Hallo Welt!",
     -- Parameter der Kürze halber entfernt
})

player:hud_change(idx, "text", "Neuer Text")
player:hud_remove(idx)
```

Die Methode `hud_change` nimmt die Element-ID, die zu ändernde Eigenschaft und den
neuen Wert. Der obige Aufruf ändert die Eigenschaft `text` von "Hallo Welt!" in "Neuer Text".

Das bedeutet, dass die Ausführung von `hud_change` unmittelbar nach `hud_add` funktionell
äquivalent zu folgendem ist, und zwar auf eine ziemlich ineffiziente Weise:

```lua
local idx = player:hud_add({
     hud_elem_type = "text",
     text          = "Neuer Text",
})
```

## IDs speichern

```lua
punkte = {}
local gespeicherte_huds = {}

function punkte.update_hud(player)
    local player_name = player:get_player_name()

    -- Holt die Anzahl der Abbauungen und Orte aus dem Speicher, oder setzt ihn auf standardmäßig 0
    local meta        = player:get_meta()
    local abbau_text   = "Abbauungen: " .. meta:get_int("score:digs")
    local platier_text = "Platzierungen: " .. meta:get_int("score:places")
    local prozent     = tonumber(meta:get("score:score") or 0.2)

    local ids = gespeicherte_huds[player_name]
    if ids then
        player:hud_change(ids["platzierungen"], "text", places_text)
        player:hud_change(ids["abbauungen"],   "text", digs_text)
        player:hud_change(ids["balken_vordergrund"],
                "scale", { x = prozent, y = 1 })
    else
        ids = {}
        gespeicherte_huds[player_name] = ids

        -- Erstellt HUD-Elemente und setzt die IDs in `ids`
    end
end

minetest.register_on_joinplayer(punkte.update_hud)

minetest.register_on_leaveplayer(function(player)
    gespeicherte_huds[player:get_player_name()] = nil
end)
```


## Andere Elemente

Lesen Sie [lua_api.txt 🇬🇧](https://minetest.gitlab.io/minetest/hud/) für eine vollständige Liste der HUD-Elemente.