--- title: HUD layout: default root: ../.. idx: 4.6 description: Lernen Sie, wie man HUD-Elemente anzeigt redirect_from: /de/chapters/hud.html --- ## Einleitung Heads Up Display (HUD) Elemente ermöglichen es Ihnen, Text, 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) - [Scoreboard](#scoreboard) - [Textelemente](#textelemente) - [Parameters](#parameter) - [Unser Beispiel](#unser-beispiel) - [Image Elements](#image-elements) - [Parameter](#parameter-1) - [Scale](#scale) - [Changing an Element](#changing-an-element) - [Storing IDs](#storing-ids) - [Other Elements](#other-elements) ## Positionierung ### Position und Versatz Bildschirme gibt es in verschiedenen Größen und Auflösungen, und das 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. 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.
### 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. 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: Im obigen Screenshot haben alle Elemente die gleiche prozentuale Position (100%, 50%) - aber unterschiedliche Versätze. So kann das Ganze am rechten Fensterrand verankert werden auf der rechten Seite des Fensters zu verankern, aber die Größe ohne Bruch zu ändern. ## 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: ## Image Elements Image elements are created in a very similar way to text elements: ```lua player:hud_add({ hud_elem_type = "image", position = {x = 1, y = 0.5}, offset = {x = -220, y = 0}, text = "score_background.png", scale = { x = 1, y = 1}, alignment = { x = 1, y = 0 }, }) ``` You will now have this: ### Parameters The `text` field is used to provide the image name. If a co-ordinate is positive, then it is a scale factor with 1 being the original image size, 2 being double the size, and so on. However, if a co-ordinate is negative, it is a percentage of the screen size. For example, `x=-100` is 100% of the width. ### Scale Let's make the progress bar for our score panel as an example of scale: ```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 = "score_bar_empty.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 = "score_bar_full.png", scale = { x = percent, y = 1}, alignment = { x = 1, y = 0 }, }) ``` We now have a HUD that looks like the one in the first post! There is one problem however, it won't update when the stats change. ## Changing an Element You can use the ID returned by the `hud_add` method to update it or remove it later. ```lua local idx = player:hud_add({ hud_elem_type = "text", text = "Hello world!", -- parameters removed for brevity }) player:hud_change(idx, "text", "New Text") player:hud_remove(idx) ``` The `hud_change` method takes the element ID, the property to change, and the new value. The above call changes the `text` property from "Hello World" to "New text". This means that doing the `hud_change` immediately after the `hud_add` is functionally equivalent to the following, in a rather inefficient way: ```lua local idx = player:hud_add({ hud_elem_type = "text", text = "New Text", }) ``` ## Storing IDs ```lua score = {} local saved_huds = {} function score.update_hud(player) local player_name = player:get_player_name() -- Get the dig and place count from storage, or default to 0 local meta = player:get_meta() local digs_text = "Digs: " .. meta:get_int("score:digs") local places_text = "Places: " .. meta:get_int("score:places") local percent = tonumber(meta:get("score:score") or 0.2) local ids = saved_huds[player_name] if ids then player:hud_change(ids["places"], "text", places_text) player:hud_change(ids["digs"], "text", digs_text) player:hud_change(ids["bar_foreground"], "scale", { x = percent, y = 1 }) else ids = {} saved_huds[player_name] = ids -- create HUD elements and set ids into `ids` end end minetest.register_on_joinplayer(score.update_hud) minetest.register_on_leaveplayer(function(player) saved_huds[player:get_player_name()] = nil end) ``` ## Other Elements Read [lua_api.txt](https://minetest.gitlab.io/minetest/hud/) for a complete list of HUD elements.