So erstellen Sie ein Story-Spiel mit Javascript

Wenn Sie kein Javascript oder was das ist, kennen, machen Sie sich keine Sorgen! Sie können ganz nebenbei dazulernen oder sogar ganz darauf verzichten. Was wir untersuchen werden, ist ein Open-Source-Tool zum Erstellen interaktiver Geschichten – Schnur(oder siehe es Webseite).

Es erlaubt uns, nichtlineare Geschichten zu machen. Es können Präsentationen, Fiktion oder Textadventure-Spiele sein. Kurz gesagt, Twine erstellt eine HTML-Datei mit dem gesamten Inhalt. Es sieht also aus wie eine gewöhnliche Webseite, und das Werkzeug ist der Konstruktor. Sie können eine solche „Website“ im Internet oder auf mobilen Plattformen hochladen, dh überall dort, wo HTML analysiert werden kann.

Ein Beispiel für eine nicht-lineare Geschichte (interaktive Fiktion)

Wenn Sie sich besonders für Spiele / interaktive Fiktion interessieren, finden Sie unter an umfangreiche Sammlung davon. Welche Art von Spielen sind also möglich? Alle von ihnen, da wir Javascript hinzufügen können. Der einfachste Weg ist jedoch, Text-Adventure-Spiele zu machen. Wieso den? Sie müssen nichts oder viel programmieren. Du fügst Storys hinzu und verbindest sie sinnvoll über Links. Dh wenn Sie „A“ wählen, wird die Geschichte „AA“ angezeigt, wenn Sie „B“ wählen, wird die Geschichte „BB“ angezeigt.

Siehe auch was du erschaffen kannst mit dem Tool aus ihren Dokumenten.

Ein Beispiel für eine tatsächliche Twine-Seite mit einer Geschichte

Das Erstellen einer solchen Seite dauert einige Minuten die Twine-Website(Sie können das online tun). Sie können Javascript, Videos, Musik, Bilder hinzufügen, Stile über CSS anpassen und das Verknüpfen und Herumspielen erledigen. Es ist eine großartige Möglichkeit, um anzufangen. Als Nächstes zeige ich Ihnen einen anderen Ansatz, wenn Sie es gewohnt sind, in einem Entwickler-Editor zu programmieren, und eine Versionskontrolle wünschen.

Versuchen Sie es zuerst online, besonders wenn Ihre Geschichte/Ihr Spiel klein ist und nur ein wenig benutzerdefinierte Funktionalität benötigt.

Warum Sie möglicherweise Javascript benötigen

Sie können darauf verzichten und sich wohlfühlen. Aber wenn Sie benutzerdefinierte Sachen haben, verwenden Sie einige Makros und Skripte. Was sind Sie? Stellen Sie sich Twine als Kern vor, aber es hat verschiedene Engines, die die Dinge anders machen. Es unterstützt vier solcher Engines (Story-Formate), um den Erstellungsprozess zugänglicher zu machen. Jeder von ihnen ist unterschiedlich komplex. In diesem Artikel werde ich verwenden Zuckerwürfel.

Dieses Story-Format hat viele eingebaute Dinge, die Sie vielleicht brauchen. Zum Beispiel:

  1. Speichern eines Spiels, Fortsetzen von einem gespeicherten Spiel.
  2. Verschiedene Ereignisse, auf die reagiert werden kann. B. wenn eine Story gerendert wird, mit dem Rendering begonnen wird usw.
  3. Makros, dh nützliche eingebaute Blöcke/Funktionen. Zum Beispiel Schaltflächen, benutzerdefinierte Links, bedingtes Rendering, Setzen von Variablen, DOM-Manipulationen usw.
  4. Audio-Handhabung.
  5. Und viele andere wertvolle Dinge.

Lassen Sie uns ein einfaches Projekt erstellen, in dem wir benutzerdefinierte Javascript- und CSS-Stile verwenden möchten, aber was noch wichtiger ist – wir möchten Versionskontrolle haben! Ich verwende die Online- oder Desktop-Version des Tools nicht, da ich Geschichten nur als Dateien verwalten und ihre Versionen per Commit haben kann.

Sie müssen installieren Zweiego, ein Tool, das Geschichten als Dateien in jedem beliebigen Texteditor parsen kann. Beachten Sie jedoch die Einschränkungen:

  1. Als ich diesen Artikel schrieb, war das letzte Update von Tweego zwei Jahre her.
  2. Daher stehen Ihnen möglicherweise nicht alle Funktionen der unterstützten Story-Formate (z. B. Sugarcube) zur Verfügung.

Jetzt müssen Sie einen Projektordner erstellen:

$ mkdir twine-project
$ cd twine-project
$ git init

Sie können die ausführbare Tweego-Datei auch in diesen Ordner verschieben und hinzufügen .gitignore

Es liegt an Ihnen, wie Sie Dateien jetzt organisieren! Eine beispielhafte Struktur könnte wie folgt aussehen:

.gitignore
README.md
bin/
src/
├─ config.tw
├─ styles/
│ ├─ menu.css
│ ├─ main.css
├─ modules/
│ ├─ menu/
│ │ ├─ menu.tw
│ │ ├─ menu.js

In dem bin Ordner haben Sie die ausführbare Tweego-Datei, um die Ausgabe in HTML zu erstellen (dazu kommen wir noch). Der gesamte auf die Geschichte (Spiel) bezogene Code ist unter src Mappe. Tweego wird alle Twine(.tw)-Dateien, CSS-Stile, Javascript-Skripte in einem HTML. Daher spielt es keine Rolle, welche Projektstruktur Sie haben.

Twine-Format

Nun, näher an der Codierung: was ist config.tw? Hier befindet sich Ihr Code im Twine-Format. Werfen Sie einen Blick auf die Spezifikation. Sie können diese Datei beliebig benennen. Es heißt config für Lesbarkeit. Dort legen wir die Einstellungen für unser Spiel fest:

:: StoryTitle
My first game

:: StoryData
{
  "ifid": <a serial number of your game>,
  "format": "SugarCube",
  "format-version": "2.30.0",
  "start": <a name of the story that will be shown first>
}

:: StoryAuthor
<your name if you want>

<<script>>
// in case you'll need to have 3rd-party scripts
// remove this <<script>> section at all for now
importScripts(
  '
)
<</script>>

Sie müssen eine Seriennummer für Ihr Spiel generieren, dh IFID. Lesen Sie mehr darüber, wie das geht hier. Aber jetzt können Sie verwenden 0000A000-A0E0-00C0-00B0-CF000E000D0E um diesen langweiligen Schritt zu überspringen.

format teilt Tweego mit, welches Story-Format verwendet werden soll. Wir werden verwenden SugarCube. format-version ist eine Version für dieses Story-Format, die derzeit unterstützt wird 2.30.0 nur. Es gibt jedoch neuere Versionen (eine Einschränkung von Tweego).

start ist eine Geschichte, die zuerst gezeigt wird. Lassen Sie uns eine Datei erstellen start.tw mit diesem Inhalt:

:: StartOfMyGame

This is the first screen of my game, yay!

[[Start playing]]
[[Read about the author]]

Das :: hier gibt die ID Ihrer Passage (dh einer Seite) an. Es kann alles sein, z. :: start-of-my-game oder :: something like this. Jetzt, da Sie die ID haben, ändern Sie Ihre config.tw haben:

"start": "StartOfMyGame"

Nach der ID der Passage (Seite) können Sie tun, was Sie wollen. In unserem Fall haben wir geschrieben, “Das ist der erste Bildschirm meines Spiels, yay!”, und es wird als normaler Text gerendert, das war’s! Das [[Start playing]] Sache ist ein Verknüpfung zu einer anderen Passage (Seite).

Um das in HTML zu erstellen, führen Sie Tweego aus (es wird nach Dateiänderungen Ausschau halten):

$ ./bin/tweego -w src -o ./output/index.html

Hier sagen wir ihm, dass er sich das ansehen soll src Ordner und erstellen Sie eine Ausgabe-HTML in die output Ordner als index.html. Führen Sie diesen Befehl aus, und Sie sehen die HTML-Ausgabe in diesem Ordner. Vergessen Sie nicht hinzuzufügen output zu .gitignore. Offen output/index.html in einem Browser und Sie sehen so etwas (mit einer dunkleren Hintergrundfarbe):

Wir erstellen die Links, aber wir müssen auch solche Seiten erstellen. Also müssen wir die ändern start.tw:

:: StartOfMyGame

This is the first screen of my game, yay!

[[Start playing]]
[[Read about the author]]

:: Start playing
<<back>>
It's another page called "Start playing".

:: Read about the author
<<back>>
I'm the author. This is my page.

Wir haben zwei weitere Seiten hinzugefügt, sodass Sie jedes Mal, wenn Sie beispielsweise auf „Spielen beginnen“ klicken, zur Passage „Spielen beginnen“ weitergeleitet werden:

Wir sehen hier einen neuen Link – “Zurück”! <<back>> ist ein SugarCube Makro die einen Benutzer zur vorherigen Passage weiterleitet (StartOfMyGame). Dies ist bequemer, als jedes Mal einen Navigationsverlauf zu speichern.

Wir könnten diese beiden neuen Passagen in den anderen Dateien erstellen oder alle Spielpassagen in einer Datei erstellen. Das spielt keine Rolle, da Tweego alle Dateien in einer einzigen HTML-Datei zusammenfasst. Sie müssen sich nicht darum kümmern, etwas zu importieren!

Hinzufügen von Javascript zu Twine-Geschichten

Stellen wir uns vor, wir möchten einige Informationen über die Entscheidungen eines Spielers speichern. Es gibt zwei Ansätze:

  1. Wir können die verwenden <<set>> Makro.
  2. Wir können Javascript verwenden.

Beim Benutzen <<set>>:

:: StartOfMyGame

This is the first screen of my game, yay!

<<link "Start playing" "StartPlaying">>
  <<set $choice to "StartPlaying">>
<</link>>
<<link "Read about the author" "AboutTheAuthor">>
  <<set $choice to "AboutTheAuthor">>
<</link>>

:: StartPlaying
<<back>>
It's another page called "Start playing".
The choice is <<= $choice>>

:: AboutTheAuthor
<<back>>
I'm the author. This is my page.
The choice is <<= $choice>>

Hier ein paar neue Sachen:

  1. <<link>>Makro macht das gleiche wie [[]], aber es fügt mehr Anpassbarkeit hinzu. In unserem Fall haben wir den Linktext beibehalten, aber eine andere Passagen-ID angegeben (StartPlaying, z.B). Außerdem können wir etwas tun, wenn ein Link gedrückt wird, z. B. a <<set>> Anleitung unten.
  2. <<set>> Makro speichert eine Variable.
  3. <<= $choice>> ist ein Makro zum Auswerten von Ausdrücken. In unserem Fall wird es angezeigt $choice Variable, die wir vorher gesetzt haben.

Wir können dasselbe mit Javascript erreichen (in diesem Beispiel erscheint es jedoch unnötig kompliziert):

:: StartOfMyGame

This is the first screen of my game, yay!

<<link "Start playing" "StartPlaying">>
  <<script>>
    State.setVar('$choice', 'StartPlaying (Javascript)')
  <</script>>
<</link>>

:: StartPlaying
<<back>>
It's another page called "Start playing".
The choice is <<= $choice>>
  1. Wir machen immer noch das Scripting im Inneren <<link>> Makro. Aber wir verwenden <<script>> Makro jetzt. Darin verwenden wir ein globales Objekt State‘s Methode setVar was das gleiche tut wie <<set>> im vorherigen Beispiel.
  2. Wir zeigen immer noch die $choice Variable, die kein Javascript verwendet, aber wir könnten diesen HTML-Block mithilfe von jQuery (das in SugarCube-Skripts integriert ist) finden und dann den Wert davon auf setzen $choiceaber es ist unnötig.

Wenn Sie Javascript verwenden, haben Sie Zugriff auf die APIs des Story-Formats, sodass es besser anpassbar ist. In Ihrem Spiel werden Sie jedoch möglicherweise nicht auf eine solche Komplexität stoßen.


Das war es fürs Erste! Natürlich gibt es in einem Spiel noch mehr Dinge zu tun. Aber Sie haben die Dokumentation und die Tools, um selbstständig mehr zu entdecken und zu lernen.

Quelle

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *