294 lines
8.8 KiB
Markdown
294 lines
8.8 KiB
Markdown
---
|
|
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.
|