So erstellen Sie in 5 Minuten einen Fähigkeitsbaum im Borderlands-Stil

Als ich aufwuchs, verbrachte ich meine Freizeit damit, das zu tun, was die meisten Programmierer taten: jeden wachen Moment Videospiele zu spielen. Ich liebte Abenteuerspiele und was für eine Zeitsenke sie waren. Wenn die Zeit die Mary Rose war und ich die Franzosen, war meine Artillerie Spiele wie Kingdom Hearts, Ōkami und Borderlands.

Warum habe ich und andere so viel Zeit damit verbracht, zu erforschen, zu überleben, zu sterben und (so viel) zu mahlen? Hunderte von Faktoren tragen zu einer ansprechenden Erfahrung bei, aber ich werde mich auf den Begriff des Fortschritts konzentrieren.

Die Idee der Gamifizierung ist nicht neu. Viele beliebte Anwendungen (wie Todoist oder Challenge Timer) haben ein Fortschrittsschema integriert, mit dem wir als Verbraucher ihre App verwenden, ihnen Geld geben und unsere persönlichen Daten übergeben können. Also beschloss ich, meinen Weg zu gehen, um anderen zu ermöglichen, genau das durch wunderschöne Fähigkeitsbäume zu tun! Hinweis: Ich erwarte weder Geld noch Daten von denen, die meine Fähigkeitsbäume verwenden.

In den letzten Wochen habe ich mich die Mühe gemacht, ein angenehmes Plug-and-Play-Reaktionspaket zu erstellen, mit dem Sie aufregende Fähigkeitsbäume erstellen können. Sie können es selbst testen, indem Sie dem Tutorial folgen. Ich hoffe, es wird eine reibungslose Erfahrung.

Wir hoffen, etwas zu haben, das dem folgenden Fähigkeitsbaum ähnelt:

[email protected]

Schnapp dir das Starter Repo mit git clone [email protected]:andrico1234/borderlands-skill-tree.git

Gehen Sie in das Verzeichnis und führen Sie das Startskript aus yarn start. Geben Sie der Site einen Wirbel, Sie werden nichts als das Borderlands-Logo und die Umgebung sehen.

beautiful-skill-treemacht aus drei Komponenten: die SkillProvider, SkillTreeGroupund die SkillTreeKomponenten.

SkillProvider: Dies nimmt keine Requisiten auf und liefert den Kindern den Kontext des Fähigkeitsbaums. Dieser Welpe verarbeitet alle globalen Daten, die sich auf den Fähigkeitsbaum beziehen.

SkillTreeGroup: Ist mehr daran beteiligt, dass es eine optionale themeEigenschaft erfordern kann, bei der wir ein benutzerdefiniertes Styling übergeben können, damit sich unser Fähigkeitsbaum wie Borderlands anfühlt. Das SkillTreeGroupverwendet auch das Children-as-a-Function-Muster, um uns Zugriff auf einige wichtige API-Funktionen zu gewähren, wie z. B. das Zurücksetzen des Fertigkeitsbaums, den Zähler für ausgewählte Fertigkeiten usw. Artikel.

SkillTree: Dies ist der aufregendste Export des Pakets, es sei denn, Sie sind ein Trottel für Schreibvorgänge (die auch exportiert werden, für alle TS-Fans). Das SkillTreenimmt keine Kinder , sondern erfordert 3 Requisiten: treeId, title, und data. Die treeIdID sollte eine ID sein, die für jeden Skill-Baum eindeutig ist, aber über Benutzersitzungen hinweg dauerhaft sein sollte, da dies als Schlüssel zum Abrufen und Festlegen der Daten für den lokalen Speicher verwendet wird. Ich werde nicht erklären, was die titleRequisite macht, ich überlasse es Ihnen zu experimentieren. Das dataist der Mischtopf der Anwendung. Sie übergeben Ihre Skill Tree-Datenstruktur, die die App zum Rendern von a verwendet beautiful-skill-tree. Lassen Sie uns einen echten Grundbaum in Gang bringen, bevor wir zu unserem spektakulären Borderlands mit mehreren Bäumen und Zweigen übergehen.

Importieren Sie in App.tsx die 3 Komponenten wie folgt:

import { SkillProvider, SkillTreeGroup, SkillTree } from 'beautiful-skill-tree';

Platzieren Sie es unter Ihrem imgTag außerhalb des Container-Divs des Bildes, aber innerhalb des äußeren Div. Fügen Sie das hinzu SkillProviderund übergeben Sie es SkillTreeGroupals Kind. Bevor Sie dasselbe mit dem tun SkillTree, denken Sie daran, dass Sie bei SkillTreeGroupVerwendung des Musters "Funktion als untergeordnetes Element" eine Funktion rendern müssen, die die untergeordneten Komponenten zurückgibt. SkillTreeGib eine Single zurück und gib ihr eine treeIdund eine titleRequisite. Übergeben Sie ein leeres Array in die dataRequisite, damit Sie so App.tsxaussehen:

function App() { return ( // {() => { return (  ) }} ); }

Gehen Sie zu localhost: 3000, um zu sehen, wie die Anwendung ausgeführt wird. Sie sollten das Logo, den Hintergrund und ein graues Rechteck sehen. Wenn Sie auf Fehler stoßen, lesen Sie die Einführung erneut und prüfen Sie, ob Syntaxfehler oder falsche Importe vorliegen.

Als nächstes erstellen wir einen echten Grundbaum. Nur 3 Elemente, die sich in einer linearen Linie bewegen. Die Datenstruktur für datasieht folgendermaßen aus:

type Skill = { id: string; icon?: string; title: string; tooltip: { description : string; }, children: Skill[]; }

Jede Fertigkeit erfordert vier Eigenschaften, von denen eine optional ist. Sie sollten auch beachten, dass es sich bei der childrenEigenschaft um einen rekursiven Typ handelt. Dies bedeutet, dass ein Array mit derselben Datenstruktur verwendet wird, mit dem die untergeordneten Elemente der Fertigkeit gerendert werden. Dies kann unendlich weitergehen und zu einigen wirklich komplizierten, gewundenen Bäumen führen. Ich werde die erste Fähigkeit für dich erschaffen und dir vertrauen, dass du die nächsten beiden Gegenstände weiter machst.

const data = [{ id: 'first-skill', title: 'The root node', tooltip: { description : "The parent node, all of the descendants will be locked until it's selected", }, children: [ // rinse and repeat; always repeat. ]}

Fügen Sie das obige Snippet zur App.tsxDatei hinzu und ersetzen Sie das leere Array innerhalb der Eigenschaft SkillTree's datadurch unsere dataDefinition. Laden Sie Ihre Seite und Sie sollten einen interaktiven Knoten haben. Bewegen Sie den Mauszeiger und klicken Sie darauf, und es sollte auf Ihre Aktionen reagieren. Wenn die Dinge funktionieren, werde ich Sie damit beauftragen, zwei (oder mehr) untergeordnete Knoten zu erstellen. Experimentieren Sie mit Kindern und Geschwisterlängen, um zu sehen, was Sie sich einfallen lassen können. (Wenn Sie auch mein wertvolles Paket zerbrechen, hinterlassen Sie mir ein GitHub-Problem, damit ich Dinge reparieren kann).

Sobald Sie mit dem Erstellen eines Skill-Baums vertraut sind, erstellen wir unseren Borderlands-Skill-Baum. Zum Glück habe ich die ganze mühsame Arbeit für Sie erledigt und bereits die Datenstrukturen erstellt und die Bilder gesammelt.

Sie müssen die drei Bäume aus der dataDatei importieren , was über möglich ist

import { motion, harmony, cataclysm } from "./data/data";

Der nächste Schritt besteht darin, SkillTreesneben dem aktuellen zwei weitere zu erstellen . Sie müssen sie in eine einbinden, React.Fragmentda Sie SkillTreeGroupjetzt versuchen, 3 Komponenten der obersten Ebene zu rendern. Geben Sie die Daten entsprechend weiter, und wenn Sie sich nicht sicher sind, habe ich das folgende Codefragment veröffentlicht.

Überprüfen Sie Ihren Webbrowser, er sollte fast fertig sein. Wir haben die Fähigkeiten gerendert, aber das Styling fühlt sich ein wenig glanzlos an. Es fühlt sich nicht sehr Borderlands an. Zum Glück bin ich ein normaler Neil Buchanan und habe ein benutzerdefiniertes Thema vorbereitet. Importieren Sie das Thema und gibt sie bis zum SkillTreeGroup‚s themeprop. Das Designobjekt wird über exportiert import theme from './data/theme';. Einfach!

Wenn Sie die oben genannten Schritte ausgeführt haben, überprüfen Sie das fertige Produkt. Wenn Sie mit den Stilen immer noch nicht zufrieden sind, überprüfen Sie das Designobjekt und passen Sie es selbst an. Es gibt eine Reihe zusätzlicher Attribute, deren Stile angepasst werden können. Schauen Sie sich also einfach die Typisierungen des Pakets an.

Ich habe bereits erwähnt, dass es einige zusätzliche Eigenschaften und Werte gibt, mit denen Sie den Fertigkeitsbaum optimieren können. Machen Sie sich also Sorgen und verknüpfen Sie mich mit allen coolen Bäumen, die Sie erstellen. Ich würde es gerne zur wachsenden Liste der hier gefundenen Bäume hinzufügen. Hier ist ein Beispiel für den Fähigkeitsbaum, der diese Besessenheit ausgelöst hat.

Ich hoffe, Sie haben es genossen, an dem beautiful-skill-treePaket zu basteln . Ich füge immer neue Funktionen hinzu und aktualisiere sie, also gib ihr einen Stern auf Github! Eine Online-Demo des Borderlands Skill Tree finden Sie hier

You can find me on Instagram or GitHub if you want to chat code, music, or fitness!