Spielsysteme

Einführungs-Tutorials: eine Tour über die echten Bildschirme

Wie die fertigen Tutorials von iDos Games funktionieren: Einführungsabläufe, die jedes Element des Spiels hervorheben, ein Hinweis mit Weiter und Überspringen, Schritte, die auf eine echte Aktion warten, eine Belohnung und ein Funnel, und wie du sie im Dashboard einrichtest.

Tutorials sind Einführungsabläufe über die echten Bildschirme des Spiels: Jeder Schritt hebt ein Element hervor, dunkelt den Rest ab und zeigt einen Hinweis. Ein Schritt kann auf die echte Aktion des Spielers warten, und jeder gezeigte Schritt geht in den Funnel, sodass du siehst, wo neue Spieler aussteigen.

Was der Spieler sieht

  • Das hervorgehobene Element eines beliebigen Bildschirms mit abgedunkeltem Rest; die Hervorhebung folgt dem Element, wenn sich das Layout ändert.
  • Eine Hinweisblase mit „Weiter“ bei Schritten, die der Spieler schließt, und „Überspringen“, wenn der Ablauf es erlaubt.
  • Schritte, die auf eine echte Aktion warten: Der Hinweis bleibt, bis der Spieler sie im Spiel ausführt.
  • Die Belohnung am Ende des Ablaufs und die Liste „Tutorials“, um erlaubte Abläufe zu wiederholen.
Lobby
12 450
320
Shop
Ränge
Spielen
Schritt 3 von 5

Tippe auf „Spielen“, um deine erste Runde zu starten!

Überspringen
Weiter
Belohnung der Tour: 50 Edelsteine
Der Schritt hebt jedes Element jedes Bildschirms hervor; der Rest wird abgedunkelt.
Eine Hinweisblase mit „Weiter“ und „Überspringen“, wenn der Ablauf es erlaubt.
Eine Belohnung am Ende; jeder gezeigte Schritt geht in den Funnel.
Beispiel. Ein Tutorial-Schritt über der Lobby: ein hervorgehobener Knopf und ein Hinweis.

So funktioniert es

  • Ein Schritt zeigt über seinen Anker auf ein Element: data-tutorial-anchor an jedem Element jedes Moduls.
  • Abläufe können von selbst starten, wenn der Titel es festlegt, zum Beispiel beim ersten Besuch.
  • Jeder gezeigte Schritt wird gemeldet, daraus entsteht der Einführungs-Funnel in der Analyse des Dashboards.

Schritt 01Das System zum Projekt hinzufügen

Bitte den KI-Coder: „Füge eine Einführungstour durch die Lobby hinzu“. Er installiert das fertige System mit einer fünfstufigen Willkommenstour und einer Belohnung in Edelsteinen.

Schritt 02Im Dashboard einrichten

Öffne das Dashboard, wähle dein Projekt und geh zu Live-Betrieb → v2 → Tutorial.

  • Lege einen Ablauf an: seine Schritte, den Anker jedes Schritts und den Hinweistext.
  • Wähle, wie ein Schritt endet: Der Spieler schließt ihn, oder eine echte Aktion im Spiel.
  • Lege fest, wann der Ablauf startet, ob er übersprungen oder wiederholt werden kann, und die Belohnung.

Der Knopf KI auf der Seite öffnet einen Assistenten: Beschreibe, was du brauchst, er schlägt Änderungen vor, du prüfst sie und drückst Speichern.

Schritt 03Testen und veröffentlichen

Prüfe das System in der Testversion deiner App. Einstellungen gehen mit einer eigenen Aktion an die Live-App, siehe Veröffentlichen und Links.

Für Entwickler

Tutorials arbeiten über client.tutorial in @idosgames/core; das Overlay findet Elemente über ihre Anker.

TypeScript
// Jedes Element jedes Moduls kann ein Tutorial-Anker sein
<button data-tutorial-anchor="play:start">Play</button>
// Lobby-Tabs sind tab:{featureID}, der Profilknopf lobby:profile,
// der Knopf „Spielen“ eines Spiels play:{modeID}
  • Markiere die Elemente, auf die ein Ablauf zeigt; ein Anker ohne Element wartet einfach, bis es erscheint.
  • Schritte werden mit reportStepShown gemeldet und mit completeStep abgeschlossen: Das erledigt das Overlay für dich.

Jedes Feld ist im Skill tutorial-system beschrieben, den der MCP-Server des SDK bereitstellt.

Häufige Fragen

Kann ein Schritt auf eine echte Aktion warten?

Ja. Ein Schritt kann statt mit „Weiter“ mit einem Spielereignis enden, sodass der Spieler durch Tun lernt.

Sehe ich, wo Spieler aussteigen?

Ja. Jeder gezeigte Schritt wird gemeldet, daher zeigt der Funnel des Ablaufs den Ausstieg Schritt für Schritt.

Siehe auch

Erstelle dein eigenes Spiel

Beschreibe die Idee in einem Satz: Der KI-Coder baut das Spiel, und es geht unter eigenem Link online.