Hilfeknopf in Roblox Studio: PC, Telefon und Gamepad

Eine kleine Hilfe mit klarer Rückkehr #

Stell dir ein eigenes Übungsprojekt vor: Man sieht die Szene und einen kleinen Knopf „Hilfe“. Die Aktivierung öffnet eine Erklärung, „Schließen“ gibt den Blick wieder frei. Das ist ein Bildschirmmenü, kein Hinweis an einem Objekt der Welt. Es braucht weder ProximityPrompt noch Serverbelohnung oder Kaufprüfung. Wir ändern nur lokale Sichtbarkeit und Leseposition.

Die Übung verändert keine der fünf Spiele des Websiteautors. Baue die Struktur in einem eigenen Studio-Projekt. Notiere zuerst drei erwartete Ergebnisse: Hilfe öffnet sich, der Text ist vollständig erreichbar, und jeder unterstützte Eingabeweg ermöglicht das Schließen. Ein hübsches Rechteck auf einem großen Monitor beweist nichts davon. Die folgenden Größen sind Ausgangswerte; die tatsächlichen Beobachtungen trägst du selbst ein.

1. Erstelle die Struktur mit genauen Namen #

Erstelle ScreenGui HelpGui in StarterGui. Darin liegen TextButton HelpButton, Frame HelpPanel und ein normaler LocalScript HelpController. HelpButton enthält UISizeConstraint ButtonBounds. HelpPanel enthält UISizeConstraint PanelBounds, UIPadding PanelPadding, TextLabel Title, ScrollingFrame Body sowie die drei TextButtons ScrollUp, ScrollDown und CloseButton. TextLabel HelpText liegt innerhalb von Body.

Übersetze diese Objektnamen nicht mit den sichtbaren Beschriftungen. Der Code sucht HelpPanel und Body, keine ähnlich benannten Objekte. StarterGui ist die Vorlage; beim Spielstart landet die Oberfläche im PlayerGui des Spielers. Nur die Bearbeitungsansicht zu betrachten reicht deshalb nicht. Bei wartendem WaitForChild prüfst du Namen und übergeordnetes Objekt, bevor du Abmessungen oder das Ereignis änderst.

2. Halte Platz für die Systemoberfläche frei #

Für HelpGui wähle ScreenInsets=CoreUISafeInsets und ClipToDeviceSafeArea=true. Enabled bleibt true. ResetOnSpawn=false erhält diese Oberfläche beim erneuten Erscheinen der Figur; es speichert keinen Fortschritt zwischen Besuchen. Die aktuelle Einstellung berücksichtigt Roblox-Systemoberfläche und Gerätebereiche. Beginne nicht mit dem pauschalen Rat IgnoreGuiInset=true: Er verändert das Verhalten der Abstände, löst aber nicht jedes Layoutproblem.

Der sichere Bereich weiß nicht, wo dein eigener Timer, deine Karte oder dein Shop liegt. Er trennt auch nicht automatisch alle Bildschirmelemente. Beginne ohne eigene HUD und prüfe anschließend die tatsächlichen Nachbarn der vorgesehenen Oberfläche. Verdeckt ein anderes ScreenGui den Knopf, untersuche Darstellungsreihenfolge und Ebenen. Eine kleinere Schrift beseitigt keine fremde Überlagerung, und ein größerer Rand erklärt ihre Ursache nicht.

3. Warum die Hilfe oben in der Mitte liegt #

HelpButton erhält AnchorPoint=(0.5,0), Position=(0.5,0,0,12) und Size=(0.28,0,0,44). ButtonBounds erhält MinSize=(96,44), MaxSize=(160,44). Das sind unsere Ausgangswerte innerhalb von HelpGui, keine optimalen Maße für jedes Display. Die horizontale Position folgt der Mitte des Containers, der obere Abstand ist eine Pixelzugabe.

Eine gelegentliche Hilfe halten wir von den unteren Touch-Zonen für Bewegung und Sprung fern. Häufig nach oben zu greifen kann unbequem sein, besonders auf einem Tablet. Deshalb ist dies eine gelegentlich gelesene Erklärung, kein neuer Kampfknopf. Prüfe auch eigene obere Anzeigen und Chat. Muss die Hilfe ständig geöffnet werden, ändere ihre Platzierung nach Beobachtungen auf echten Geräten. Der sichere Bereich allein beweist keine angenehme Daumenreichweite.

4. Begrenze das Fenster sinnvoll #

HelpPanel erhält AnchorPoint=(0.5,0.5), Position=(0.5,0,0.5,0), Size=(0.88,0,0.86,0) und Visible=false. PanelBounds nutzt MaxSize=(520,420), MinSize=(0,0). PanelPadding gibt auf jeder Seite 12 Pixel. Scale bezeichnet einen Anteil des Containers, Offset eine zusätzliche Pixelzahl; vier UDim2-Werte sind nicht vier absolute Bildschirmkoordinaten.

Der mittige AnchorPoint hält die Mitte bei Größenänderungen stabil. Eine maximale Breite verhindert einen riesigen Textstreifen auf dem Monitor. Auf schmalen Bildschirmen wird das Fenster kleiner, weshalb seine Inhalte gesondert geprüft werden müssen. Die Tabelle nennt weitere genaue Startwerte. Reicht die nutzbare Höhe nicht für Titel und Knöpfe, ändere die Anordnung. Weder Größenbegrenzung noch Prozentwerte garantieren die Nutzbarkeit in jedem denkbaren Fenster.

5. Trenne lesbaren Text und Sichtfenster #

HelpText nutzt TextWrapped=true, TextScaled=false, TextSize=18 und AutomaticSize=Y. Seine Breite folgt Body, seine Höhe wächst mit dem Inhalt. Body nutzt AutomaticCanvasSize=Y, CanvasSize=(0,0,0,0), ScrollingDirection=Y und ScrollingEnabled=true. Das Sichtfenster bleibt begrenzt, der Inhalt darf höher sein. Hoch und Runter bieten einen zusätzlichen Weg zu langen Erklärungen.

Verkleinere einen langen Absatz nicht bis zur Unlesbarkeit. Verbessere zuerst den Inhalt: eine Handlung, ihr erwartetes Ergebnis und die Rückkehr. Probiere anschließend eine absichtlich längere Übungsfassung. Der Code erstellt keine echte Aufgabe; du ersetzt den Beispieltext selbst. Halte Titel und Knopfnamen kurz. Textumbruch im Haupttext behebt keinen überfüllten Knopf, und sichtbare Anfangszeilen beweisen nicht, dass das Ende erreichbar ist.

6. Wähle die Sprache dieses lokalen Beispiels #

UI_LANGUAGE akzeptiert ru, en, de, es, zh oder ar. Wähle beispielsweise "de". Das Wörterbuch verändert die sichtbaren Beschriftungen; HelpController und CloseButton bleiben Objektnamen. AutoLocalize=false lässt die gewählten Texte unverändert. Dies stellt eine Übungssprache auf dem Client ein, keine vollständige automatische Sprachauswahl jedes Spielers im veröffentlichten Spiel.

Der arabische Haupttext wird rechts ausgerichtet. Gemischte Schrift, Zahlen, Satzzeichen und Umbruch brauchen trotzdem Sichtprüfung. Schließen und längere deutsche Erklärungen können Probleme zeigen, die das kurze Close verdeckt. Prüfe alle sechs Fassungen in einem schmalen Fenster. Verbreitere keinen Knopf, bis sein Nachbar verschwindet. Bei echter Lokalisierung prüfst du Bedeutung, Schrift und ein eigenes Übersetzungssystem; unser kleines Wörterbuch ersetzt diesen Prozess nicht.

7. Verbinde einen LocalScript #

Füge den eigenen Beispielcode in HelpController ein. Er findet vorbereitete Objekte, wählt Texte, setzt die Auswahlreihenfolge und verbindet Activated. setOpen ändert HelpPanel.Visible und HelpButton.Visible. Das geöffnete Fenster verbirgt seinen Öffnungsknopf, das Schließen zeigt ihn wieder. Es gibt kein RemoteEvent, keine Serveranfrage und keinen DataStore-Eintrag.

GuiNavigationEnabled und AutoSelectGuiEnabled sind für das separate Projekt ausdrücklich aktiviert. Sie beeinflussen allgemein die Client-Navigation; in einem bestehenden Spiel müssen sie zu vorhandenen Menüs passen. Eine zweite Handlerkopie repariert keinen falsch geschriebenen Namen. Das Fenster hält die Figur nicht an und pausiert das Serverspiel nicht. Ein modales Menü mit gesperrter Bewegung wäre ein zusätzliches Verhalten mit eigener Prüfung. Halte das erste Ergebnis überschaubar.

local GuiService = game:GetService("GuiService")
local gui = script.Parent
local help = gui:WaitForChild("HelpButton")
local panel = gui:WaitForChild("HelpPanel")
local title = panel:WaitForChild("Title")
local body = panel:WaitForChild("Body")
local bodyText = body:WaitForChild("HelpText")
local up = panel:WaitForChild("ScrollUp")
local down = panel:WaitForChild("ScrollDown")
local close = panel:WaitForChild("CloseButton")

local UI_LANGUAGE = "en" -- One chosen language for this local exercise.
local labels = {
    ru = {help="Помощь", title="Подсказка", up="Выше", down="Ниже", close="Закрыть", body="Это учебная панель. Прочитай подсказку и закрой её, чтобы снова видеть сцену. Здесь можно объяснить одно действие: что выбрать, какой результат ожидать и куда вернуться.\n\nЕсли текст не помещается, используй кнопки Выше и Ниже. Закрытие панели не завершает задание и не выдаёт награду."},
    en = {help="Help", title="Quick help", up="Up", down="Down", close="Close", body="This is a practice panel. Read the hint and close it to see the scene again. Explain one action here: what to select, which result to expect and where to return.\n\nIf the text does not fit, use Up and Down. Closing the panel does not complete a task or grant a reward."},
    de = {help="Hilfe", title="Kurze Hilfe", up="Hoch", down="Runter", close="Schließen", body="Dies ist ein Übungsfenster. Lies den Hinweis und schließe es, um die Szene wieder zu sehen. Erkläre hier eine Handlung: was auszuwählen ist, welches Ergebnis erwartet wird und wohin man zurückkehrt.\n\nWenn der Text nicht passt, nutze Hoch und Runter. Das Schließen erfüllt keine Aufgabe und vergibt keine Belohnung."},
    es = {help="Ayuda", title="Ayuda breve", up="Arriba", down="Abajo", close="Cerrar", body="Este es un panel de práctica. Lee la indicación y ciérralo para volver a ver la escena. Explica una acción: qué seleccionar, qué resultado esperar y adónde regresar.\n\nSi el texto no cabe, usa Arriba y Abajo. Cerrar el panel no completa una misión ni entrega una recompensa."},
    zh = {help="帮助", title="简短提示", up="上翻", down="下翻", close="关闭", body="这是练习面板。读完提示后关闭它，再次查看场景。这里可以解释一个动作：选择什么、预期结果是什么，以及之后回到哪里。\n\n如果文字显示不全，请使用上翻和下翻按钮。关闭面板不会完成任务，也不会发放奖励。"},
    ar = {help="مساعدة", title="إرشاد قصير", up="أعلى", down="أسفل", close="إغلاق", body="هذه لوحة تدريب. اقرأ الإرشاد ثم أغلقها لرؤية المشهد مجدداً. اشرح فعلاً واحداً: ماذا يختار اللاعب، وما النتيجة المتوقعة، وإلى أين يعود.\n\nإذا لم يظهر النص كله، استخدم أعلى وأسفل. إغلاق اللوحة لا يكمل مهمة ولا يمنح مكافأة."},
}
local words = assert(labels[UI_LANGUAGE], "Unknown UI_LANGUAGE")
for object, key in {[help]="help", [title]="title", [up]="up", [down]="down", [close]="close", [bodyText]="body"} do
    object.AutoLocalize = false
    object.Text = words[key]
end
bodyText.TextXAlignment = UI_LANGUAGE == "ar" and Enum.TextXAlignment.Right or Enum.TextXAlignment.Left
GuiService.GuiNavigationEnabled = true
GuiService.AutoSelectGuiEnabled = true
help.SelectionOrder = 1
up.SelectionOrder = 2
down.SelectionOrder = 3
close.SelectionOrder = 4
up.NextSelectionRight = down
down.NextSelectionLeft = up
down.NextSelectionRight = close
close.NextSelectionLeft = down
panel.Visible = false
help.Visible = true

local function fromGamepad(input)
    return input ~= nil and input.UserInputType.Name:match("^Gamepad") ~= nil
end
local function setOpen(open, controller)
    local selected = GuiService.SelectedObject
    panel.Visible = open
    help.Visible = not open
    if controller then
        GuiService.SelectedObject = open and close or help
    elseif selected == help or selected == up or selected == down or selected == close then
        GuiService.SelectedObject = nil
    end
end
local function scrollPage(direction)
    local height = body.AbsoluteWindowSize.Y
    local limit = math.max(0, body.AbsoluteCanvasSize.Y - height)
    local nextY = math.clamp(body.CanvasPosition.Y + direction * height * 0.8, 0, limit)
    body.CanvasPosition = Vector2.new(0, nextY)
end
help.Activated:Connect(function(input) setOpen(true, fromGamepad(input)) end)
close.Activated:Connect(function(input) setOpen(false, fromGamepad(input)) end)
up.Activated:Connect(function() scrollPage(-1) end)
down.Activated:Connect(function() scrollPage(1) end)

8. Activated braucht einen Weg zum Knopf #

Activated unterstützt Mausklick, Bildschirmtippen und die Gamepad-Aktivierung eines ausgewählten GUI-Knopfs. Starte die Navigation über Select, finde die markierte Hilfe und drücke und löse A. A ohne ausgewähltes GUI verspricht keine Öffnung. Alle vier Knöpfe brauchen Selectable=true; Hintergrund und Text sollen die Auswahl nicht übernehmen.

Öffnen per Controller wählt CloseButton. Nach links geht es zu ScrollDown, dann ScrollUp, nach rechts zurück. Schließen per Controller wählt wieder HelpButton. Maus oder Touch erzeugen keinen neuen Controllerfokus; eine vorhandene Auswahl auf unseren Knöpfen wird beim Wechsel der Ansicht entfernt. Andere Menüs sollen durch einen gewöhnlichen Hilfeklick keinen neuen Fokus bekommen. Diese Logik muss noch mit echter Eingabe geprüft werden, statt aus dem Diagramm auf funktionierende Navigation zu schließen.

Bild in voller Größe öffnen ↗

9. So funktionieren die Leseknöpfe #

scrollPage misst die sichtbare Höhe und verschiebt CanvasPosition um ungefähr 80 Prozent davon. Der überlappende Rest hilft beim Finden der Fortsetzung. Die Position bleibt zwischen null und Inhaltshöhe minus Fensterhöhe. Ohne nötiges Scrollen ist die Grenze null. Wiederholtes Aktivieren soll den Text nicht hinter sein Ende verschieben.

Die Bewegung bleibt lokal und verändert weder Text noch Aufgabenstatus. Wir versprechen nicht, dass jeder Stick automatisch ein ausgewähltes ScrollingFrame bewegt; die eigenen Knöpfe schaffen einen eindeutigen Auswahlweg. Prüfe zusätzlich Mausrad und Ziehen im Feld auf dem Telefon. Beim Schließen bleibt die Leseposition erhalten, weil unser Code sie nicht bei jeder Öffnung zurücksetzt. Wenn du zum Anfang zurückkehren möchtest, ergänze diese Regel bewusst statt sie aus der Sichtbarkeit abzuleiten.

10. Erst emulieren, dann ein echtes Display prüfen #

Starte Test/F5 mit Spieler in Studio. Run/F8 ohne Figur ersetzt keine Prüfung des PlayerGui im Spiel. Device Simulator hilft bei Größen und Orientierungen, Controller Emulator bei frühen Navigationsprüfungen. Menünamen können übersetzt sein. Vergleiche schmale und breite Darstellung, Hoch- und Querformat, kurzen und langen Text sowie geöffneten und geschlossenen Zustand.

Prüfe danach ein Telefon und ein gewöhnlich angeschlossenes Gamepad. Laufe und springe auf Touch bei geschlossener Hilfe: Bedienelemente sollen ihren Knopf nicht verdecken. Öffne das Fenster und finde Schließen ohne Suche in den Ecken. Der Emulator misst weder deinen Daumenkomfort auf echter Hardware noch Telefonleistung. Die folgende Tabelle ist ein unausgefüllter Plan. Erwartungen dürfen nicht als bereits beobachtete Spieltestergebnisse ausgegeben werden.

11. Behebe Ursachen und dokumentiere Grenzen #

Fehlt der Knopf, prüfe Enabled, Visible, PlayerGui-Struktur und Überlagerungen. Ist er sichtbar, aber reagiert nicht, prüfe LocalScript, Namen, Active und Output. Fehlt das Textende, prüfe Breite, AutomaticSize, AutomaticCanvasSize und den Weg zur letzten Zeile. Reagiert das Gamepad nicht, untersuche Markierung, Selectable und GuiService.SelectedObject, bevor du Activated durch ein Mausereignis ersetzt.

Materialstruktur, XML der eigenen Zeichnungen und Luau-Syntax wurden geprüft; ein separates lokales Modell prüfte Zustandswechsel und Scrollgrenzen. Der Code lief nicht in Studio, auf Telefon oder physischem Controller. Bewahre Projektversion und eigene Beobachtungen auf. Ein gutes Ergebnis ist lesbare Hilfe mit erreichbarer Rückkehr. Spätere Gestaltung kann darauf aufbauen, ohne visuelle Zustände mit Serverfortschritt zu vermischen oder ungetestete Geräte als Beleg zu verwenden.