Zum Inhalt springen
Craftium

Anleitung: Kiko 3D-Maskottchen einrichten

Etwa fünf Minuten. Du brauchst ein kostenloses StreamElements-Konto und deine persönlichen Dateien von unserer Lizenzseite (Link in deinem Etsy-Download, Bestellnummer bereithalten).

Bevor es losgeht

  • Ein kostenloses StreamElements-Konto, angemeldet mit dem Kanal, auf dem du streamst.
  • Die Einrichtung auf der Lizenzseite: Nach Bestellnummer und Kanal zeigt sie einen Kopieren-Knopf für jeden Reiter (HTML, CSS, JS, Fields). Dein Lizenzschlüssel steckt schon im Fields-Code.
  • Ein Computer mit Chrome, Edge oder Firefox und einer Grafikkarte der letzten Jahre: Kiko ist echtes 3D. Auf dem Handy funktioniert der StreamElements-Editor schlecht.
  • Für den Avatar-Modus: OBS Studio ab Version 28 (OBS WebSocket ist eingebaut) und deine Webcam als Quelle in OBS.

Kiko in StreamElements einrichten

  1. Overlays öffnen

    Melde dich bei streamelements.com an und klicke links im Menü auf Overlays. Du nutzt schon ein anderes Craftium-Widget? Dann setz Kiko ins selbe Overlay und mach mit Schritt 3 weiter.

  2. Neues Overlay anlegen

    Auf New overlay klicken, 1080p (1920 × 1080) wählen und Start. Die Einführungstour schließen und dem Overlay einen Namen geben.

  3. Custom Widget hinzufügen

    Auf Add widget (das +) klicken, dann Static / Custom und Custom widget. Oben links erscheint ein kleiner Kasten.

  4. Code-Editor öffnen

    Das neue Widget ist ausgewählt: links auf Open editor klicken. Du siehst fünf Reiter: HTML CSS JS Fields Data.

  5. Alle vier Reiter ersetzen

    Für HTML, CSS, JS und Fields: den passenden Knopf auf der Lizenzseite drücken (zum Beispiel HTML kopieren) oder die Datei aus dem ZIP kopieren, in den Reiter klicken, alles markieren und einfügen. Data so lassen und auf Done klicken.

    Alle vier ersetzen, auch wenn ein Reiter harmlos aussieht. StreamElements füllt CSS und JS mit einem Beispiel-Widget.

  6. Kasten einstellen

    Ein neues Custom Widget ist nur 290 × 180 Pixel groß. Öffne Position, size and style und lege den Kasten dorthin, wo Kiko stehen soll, zum Beispiel 500 × 700 in eine untere Ecke.

    Kiko füllt den Kasten. Mit Sprechblasen bleibt oben Platz für die Blase. Breiter als hoch geht auch, Kiko steht dann in der Mitte.

  7. Speichern und testen

    Auf Save klicken. Kiko lädt, beim ersten Mal ein paar Sekunden. Dann auf Test: Kiko says hi, Test: new sub oder Test: raid klicken.

    Testknöpfe gehen erst nach dem ersten Speichern und nur im Editor. Für Knöpfe und Einrichtungshinweise auch in OBS Test buttons and setup hints also in OBS einschalten.

Was Kiko macht

Co-Host oder Avatar: Unter What Kiko does braucht der Co-Host keine Kamera: Kiko steht neben dir, bewegt sich selbst und reagiert auf deinen Stream. Avatar macht Kiko zu dir: Er folgt deinem Gesicht aus der Kamera in OBS (siehe Avatar-Modus). Framing zeigt ganze Figur, Oberkörper oder Kopf, Liveliness when idle bestimmt, wie oft er sich umsieht, nickt und lächelt.

Bewegungen für deine Ereignisse: Unter Events: what Kiko does wählst du je Ereignis eine von 19 Bewegungen: Follow, Abo, Geschenk-Abos, Bits, Trinkgeld, Raid und eine Kanalpunkte-Belohnung (deren Name kommt unter Reward names). Nothing schaltet ein Ereignis aus. Bits, Trinkgeld und Raids haben einen Mindestwert.

Sprechblase: Mit Kiko talks in a speech bubble on events bedankt sich Kiko mit dem Namen des Zuschauers in einer Manga-Blase, auf Deutsch, Englisch, Spanisch, Portugiesisch oder Französisch. Ereignisse warten in einer Reihe, immer eine Blase nach der anderen.

Chatbefehl: Zuschauer schreiben !kiko winken, !kiko tanzen, !kiko daumen hoch, !kiko klatschen, !kiko hüpfen … Englisch geht auch (!kiko wave). Who can use it und Cooldown for viewers halten es ruhig; du und deine Mods habt keine Abklingzeit. Nur du und deine Mods: !kiko stopp, !kiko autopilot aus und !kiko autopilot an.

Overlay in OBS einbinden

  1. In deiner Overlay-Liste auf StreamElements das Menü … des Overlays öffnen und Copy URL wählen. Diesen Link niemandem zeigen: Er enthält einen Schlüssel zu deinem Konto.
  2. In OBS Studio unter Sources (Quellen) auf + klicken und Browser wählen. Den Link als URL einfügen, Breite 1920 und Höhe 1080.
  3. Shutdown source when not visible und Refresh browser when scene becomes active ausgeschaltet lassen, sonst lädt Kiko bei jedem Szenenwechsel neu.

Streamlabs Desktop: Add Source → Browser Source, gleicher Link, gleiche Einstellungen (Co-Host; der Avatar-Modus braucht OBS Studio).

Avatar-Modus: OBS verbinden

  1. In OBS Tools → WebSocket Server Settings öffnen, den Haken bei Enable WebSocket server setzen und mit Show Connect Info das Passwort kopieren.
  2. In den Widget-Einstellungen Connect to OBS einschalten, das Passwort bei OBS WebSocket password einfügen und What Kiko does auf Avatar stellen. Speichern.
  3. Deine Webcam muss als Quelle in der Szene liegen, die gerade läuft. Ausgeblendet ist erlaubt. Kiko findet sie selbst; bei mehreren Kameras den Namen bei Avatar: camera source name eintragen.
  4. Kiko folgt Kopf, Augen, Blinzeln und Mund. Gehst du aus dem Bild, übernimmt der Autopilot, bis du wieder da bist.

Das Gesichts-Tracking läuft auf deinem Computer: OBS gibt das Kamerabild an das Widget auf demselben Rechner, kein Kamerabild wird irgendwohin geschickt.

Weitere Einstellungen

Im Overlay-Editor von StreamElements auf das Widget klicken. Die Einstellungen stehen links. Nach Änderungen auf Save klicken.

EinstellungWirkung
Language of the speech bubblesEnglish, Deutsch, Español, Português oder Français.
FramingGanze Figur, Oberkörper oder Kopf.
Seconds per bubble2 bis 15 Sekunden je Blase; Ereignisse warten in einer Reihe.
Bubble size50 bis 150 % der Blasengröße.
Color themeKlassische, Nacht- oder Pastellfarben der Blase.
Calm modeBlasen blenden sanft ein statt aufzuploppen.
Avatar: mirror your movementsAn: Kiko bewegt sich wie dein Spiegelbild. Aus: wie von der Kamera gesehen.
Avatar: microphone name for the mouthLeer = automatisch. Nur nötig, wenn der Mund der falschen Tonquelle folgt.

Hilfe

Kiko erscheint nicht
  • Alle vier Reiter ersetzt und Save geklickt?
  • Kasten größer als 290 × 180?
  • Internet an? Kiko lädt von craftium-3d.pages.dev; klappt das nicht, zeigt der Editor einen Hinweis.
  • In OBS: Browserquelle mit 1920 × 1080 und dem Link des richtigen Overlays?
Ein Ereignis kam, aber Kiko hat nichts gemacht

Prüfe die Bewegung dieses Ereignisses unter Events: what Kiko does (nicht Nothing) und den Mindestwert. Blasen warten in einer Reihe.

Der Chatbefehl tut nichts

Steht bei Command das Wort, das du schreibst? Prüfe Who can use it und die Abklingzeit. Unbekannte Bewegungen werden absichtlich überhört, damit Chat-Spam nichts auslöst.

Der Avatar folgt meinem Gesicht nicht

Der Editor zeigt, was fehlt: WebSocket-Server in OBS aus, falsches Passwort oder keine Kamera in der laufenden Szene. Gutes Licht auf dem Gesicht hilft.

Kiko ruckelt

Kiko ist echtes 3D. Schließ andere schwere Programme und streame am Laptop mit Netzteil.

Immer noch Probleme?

Schreib uns über Etsy-Nachrichten oder an craftium.berlin@gmail.com. Nenn deinen Modus, dein Streaming-Programm und was du siehst. Den Overlay-Link nie mitschicken.

Updates

Updates für Version 1.x installieren sich beim Laden des Overlays selbst, deine Einstellungen bleiben. Nur wenn der Editor einen Update-Hinweis zeigt:

  1. Das Overlay in StreamElements öffnen, das Widget anklicken und Open editor wählen.
  2. HTML, CSS, JS und Fields durch die neuen Dateien ersetzen, genau wie in Schritt 5.
  3. Data nicht anfassen: Dort stehen deine Einstellungen.
  4. Auf Done und Save klicken.

Aktuelle Version: 1.0.0