Storyboard Dokumentation (public)

Hallo!

Wir arbeiten hart an der Dokumentation für das Storyboard. Ein wenig dauert es aber noch.

Wenn du in der Zwischenzeit Hilfe brauchst, schreib uns doch einfach! hallo@adventurekingz.de

Grüße von den AdventureKingz!

Funktionen

Funktionen

Wegpunkte (Geolocation)

waypoint_mockup.png

 

Wir sind dran!

Funktionen

QR-Codes

QR-Code-Scanner.png

Funktionen

NFC-Tags

nfc.png

Funktionen

Inventar (virtuel)

Inventar.png

Funktionen

Hinweise

Hinweise.png

Funktionen

Medien (Grafik, Video, Audio)

Medien.png

UI-Elemente

UI-Elemente

Buttons

Buttons sind wesentliche Bestandteile interaktiver Benutzeroberflächen, die es Nutzern ermöglichen, spezifische Aktionen durch einfaches Klicken oder Antippen auszulösen.

Ein Button kann einfach innerhalb einer Sektion als Funktion hinzugefügt werden.

spaces_evJsTSfpscGbW0tisxAu_uploads_szNopzWXk3wolBgGaebY_grafik.webp

Button werden standardmäßig immer unterhalb des Textes und weiteren UI-Elementen innerhalb der Sektion angezeigt. Es gibt kein Limit für die Anzahl von Button.
<div class="customButtonPosition"></div>

Beispiele und Hacks


Beispiele und Hacks

Passwort-Abfrage innerhalb einer Szene

Wenn du eine eigene Passwort- oder Wertabfrage implementieren möchtest, dann erstelle zunächst eine neue, leere Szene.

  1. Füge die Funktion "Javascript" hinzu:
    window.passwort = function () {
    
    let content = '<input type="text" id="passwort" name="name" required size="10" placeholder="Passwort?">'
    
    $.confirm({
        title: 'Bitte gib ein gültiges Passwort ein:',
        content: content,
        buttons: {
            'Flug suchen': {
                text: 'Passwort prüfen',
                btnClass: 'btn-blue',
                action: function () {
                    var passwort = this.$content.find('#passwort').val();
                    if(!passwort){
                        $.alert('Bitte gib ein Passwort ein!');
                        return false;
                    }
                    if(passwort == "123456") {
                        // do something!
                        $.alert('Richtig!');
                        window.story.go('ZIELSZENE'); // Hier den Titel deiner Ziel-Szene eingeben
                    } else {
                        $.alert('Das Passwort ' + name + ' ist leider falsch!');
                    }
                }
            },
            'Abbrechen': function () {
                //close
            },
        },
        onContentReady: function () {
            // bind to events
            var jc = this;
            this.$content.find('form').on('submit', function (e) {
                e.preventDefault();

            });
        }
    });
    };

2. Editiere in deiner Szene den HTML Code und füge folgenden Coder an einer beliebigen Stelle ein:

<button name="test" onClick="window.passwort();">Passwort</button>

 

Beispiele und Hacks

Typewriter Effekt

Demo

 

Wenn der Text in einer Szene wie von einer Schreibmaschine getippt werden soll, dann kann dieser Effekt mit einem Javascript Code in einer globalen Sektion erreicht werden:

Globale Sektion -> Funktion Javascript

window.showSpeechBubble = function (text) {
    var output = document.getElementById("output");

    // Sprechblase erstellen
    var bubble = document.createElement("div");
    bubble.classList.add("speech-bubble");
    output.appendChild(bubble);

    // Text Typing Effekt
    let index = 0;
    bubble.style.opacity = 1; // Blendet die Sprechblase ein
    
    function typeWriter() {
        // HTML-Interpretation sicherstellen
        bubble.innerHTML = text.substring(0, index);

        if (index < text.length) {
            index++;
            setTimeout(typeWriter, 50); // Geschwindigkeit des Tippens
        }
    }

    typeWriter();
}

Globale Sektion -> Stylesheet

*optional, damit sieht der Text ähnlich wie eine Sprechblase aus.

.speech-bubble {
    position: absolute;
    top:100px;
    left: 5%;
    max-width: 90%;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    border: 2px solid black;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    font-family: mom;
    font-size: 14px;
    color: black;
    line-height: 1.4;
    opacity: 0; /* Startet unsichtbar */
    transition: opacity 0.5s; /* Sanftes Einblenden */
}

.speech-bubble::after {

    position: absolute;

    left: 5%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    border-left: 0;
    margin-left: -5px;
}

Szene -> Funktion Javascript

setTimeout(function() {
    window.showSpeechBubble('HIER DER TEXT, DER GETIPPT WERDEN SOLL');
},2000);


Release Informationen