Cómo crear un árbol de habilidades al estilo de Borderlands en 5 minutos

Al crecer, pasé mi tiempo libre haciendo lo que la mayoría de los programadores hacían: jugar videojuegos cada momento de vigilia. Me encantaban los juegos de aventuras y qué tiempo de hundimiento eran. Si el tiempo era el Mary Rose y yo el francés, mi artillería eran juegos como Kingdom Hearts, Ōkami y Borderlands.

¿Por qué yo y otros pasamos tanto tiempo libre explorando, sobreviviendo, muriendo y (tanto, tanto) moliendo? Cientos de factores contribuyen a crear una experiencia atractiva, pero en el que me voy a centrar es en la noción de progresión.

La idea de la gamificación no es nueva. Muchas aplicaciones populares (como todoist o challenge timer) han incorporado algún tipo de esquema de progresión para hacer que nosotros, los consumidores, usemos su aplicación, les demos dinero y entreguemos nuestros datos personales. Así que decidí seguir mi manera de permitir que otros hagan precisamente eso, ¡a través de hermosos árboles de habilidades! Nota: No espero dinero ni datos de quienes usan mis árboles de habilidades.

Las últimas semanas me han visto trabajar duro para crear lo que espero sea un agradable paquete de React plug'n'play para ayudarlo a crear emocionantes árboles de habilidades. Puede probarlo usted mismo siguiendo el tutorial. Espero que sea una experiencia sin fricciones.

Esperamos tener algo parecido al árbol de habilidades a continuación:

[email protected]

Toma el repositorio de inicio usando git clone [email protected]:andrico1234/borderlands-skill-tree.git

Entrar en el directorio y ejecutar la secuencia de partida, yarn start. Dale un giro al sitio, no verás nada más que el logotipo y el entorno de Borderlands.

beautiful-skill-treeexpone tres componentes: el SkillProvider, SkillTreeGroupy los SkillTreecomponentes.

SkillProvider: Esto no incluye accesorios y proporciona a los niños el contexto del árbol de habilidades. Este cachorro maneja todos los datos globales relacionados con el árbol de habilidades.

SkillTreeGroup: Está más involucrado en que puede tomar una themepropiedad opcional , donde podemos pasar algunos estilos personalizados, para hacer que nuestro árbol de habilidades se sienta muy Borderlands. El SkillTreeGrouptambién usa el patrón de niños como función para darnos acceso a algunas funcionalidades imperativas de la API, como el restablecimiento del árbol de habilidades, el contador de habilidades seleccionadas, etc. No necesitamos preocuparnos por ninguno de ellos para el alcance de este artículo.

SkillTree: Esta es la exportación más emocionante del paquete, a menos que sea un fanático de las mecanografías (que también se exportan, para todos los fanáticos de TS). El SkillTreeNO se hace niños, pero requiere de 3 apoyos: treeId, title, y data. El treeIddebe ser un identificador que es único para cada árbol de habilidades, sino que debe ser persistente en todas las sesiones de usuario, ya que se utiliza como la clave para obtener y establecer los datos para almacenamiento local. No voy a explicar qué hace el titleutilería, les dejo experimentar. El dataes el recipiente de mezcla de la aplicación. Pasará la estructura de datos de su árbol de habilidades que la aplicación utilizará para representar un archivo beautiful-skill-tree. Hagamos un árbol básico real antes de pasar a nuestro espectacular Borderlands de múltiples árboles y múltiples ramas.

En App.tsx, importe los 3 componentes así:

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

Colóquelo debajo de su imgetiqueta, fuera del div contenedor de la imagen, pero dentro del div exterior. Agregue el SkillProvider, pasando el SkillTreeGroupcomo un niño. Antes de hacer lo mismo con el SkillTree, recuerde que como SkillTreeGroupusa el patrón de función como hijo, deberá representar una función que devuelva los componentes secundarios. Devuelve un single SkillTreey dale un treeIdy un titleapoyo. Pase una matriz vacía al dataaccesorio para que se App.tsxvea así:

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

Vaya a localhost: 3000 para ver la aplicación en ejecución. Debería ver el logotipo, el fondo y un rectángulo gris. Si se encuentra con algún error, vuelva a leer la introducción y verifique si hay algún error de sintaxis o importaciones incorrectas.

A continuación, creemos un árbol básico real. Solo 3 elementos que se mueven en una línea lineal. La estructura de datos de datatiene este aspecto:

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

Cada habilidad requiere cuatro propiedades, una de las cuales es opcional. También debe notar que la childrenpropiedad es de tipo recursivo, lo que significa que toma una matriz de la misma estructura de datos, que utiliza para representar los elementos secundarios de la habilidad. Esto puede continuar infinitamente y dar lugar a árboles realmente complicados y sinuosos. Crearé la primera habilidad para ti, y confiaré en ti para continuar con los siguientes dos elementos.

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. ]}

Agregue el fragmento de código anterior al App.tsxarchivo y reemplace la matriz vacía dentro de la propiedad SkillTree's datacon nuestra datadefinición. Cargue su página y debería tener un nodo interactivo. Dale un desplazamiento y un clic y debería estar reaccionando a tus acciones. Si las cosas están funcionando, le asignaré la tarea de crear dos (o más) nodos secundarios. Experimente con niños y hermanos, para ver qué se le ocurre. (Si también rompes mi precioso paquete, déjame un problema de GitHub para que pueda arreglar las cosas).

Una vez que se sienta cómodo con la creación de un árbol de habilidades, sigamos adelante y creemos nuestro árbol de habilidades de Borderlands. Afortunadamente, he hecho todo el trabajo tedioso por usted y ya he creado las estructuras de datos y acumulado las imágenes.

Deberá importar los tres árboles del dataarchivo, lo que se puede hacer a través de

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

El siguiente paso es crear dos adicionales SkillTreesjunto con el actual. Deberá envolverlos en un React.Fragmentya SkillTreeGroupque ahora intentará renderizar 3 componentes de nivel superior. Pase los datos en consecuencia y, si no está seguro, he publicado el fragmento de código a continuación.

Continúe y compruebe su navegador web, debería estar listo para todo. Tenemos las habilidades renderizadas, pero el estilo se siente un poco deslucido. No se siente muy Borderlands. Afortunadamente para ti, soy un Neil Buchanan habitual y preparé un tema personalizado. Importar el tema y pasarla a través de la SkillTreeGroup's themeprop. El objeto de tema se exporta a través de import theme from './data/theme';. ¡Fácil!

Una vez que haya hecho lo anterior, revise el producto terminado. Si aún no está satisfecho con los estilos, consulte el objeto de tema y personalícelo usted mismo, hay un montón de atributos adicionales cuyos estilos se pueden ajustar, así que solo eche un vistazo a los tipos del paquete.

Mencioné anteriormente que hay algunas propiedades y valores adicionales que se pueden usar para modificar el árbol de habilidades, así que límpiate y conéctame a cualquier árbol genial que crees. Me encantaría agregarlo a la creciente lista de árboles que se encuentran aquí. Aquí hay un ejemplo del árbol de habilidades que inició esta obsesión.

Espero que hayas disfrutado jugando con el beautiful-skill-treepaquete. Siempre estoy agregando nuevas funciones y actualizando, ¡así que dale una estrella en github! Puede encontrar una demostración en línea del árbol de habilidades de Borderlands aquí

¡Puedes encontrarme en Instagram o GitHub si quieres chatear con código, música o fitness!