101: Decentraland SDK

Con el anuncio de Facebook (ahora meta) a fines del 2021 sobre armar un Metaverso se genero todo un auge y crecimiento GIGANTESCO en los previamente creados. Por lo que hoy vamos a ver como utilizar la SDK de Decentraland para formar parte de este nuevo mundo.

Primero que nada para quienes no lo sepan, SDK significa Software Development Kit y como su nombre lo indica, son una serie de funcionalidades que nos abren para poder interactuar directamente con el producto en cuestión.

Bueno, pero ¿qué vamos a hacer? Vamos a crear una escena de Decentraland e interactuar un poco con la misma.

Para arrancar tenemos que instalar el CLI que nos va a ayudar a interactuar con toda el ecosistema de desarrollo de Decentraland. Para eso vamos a correr el comando npm install -g decentraland.Si, para eso tienen que tener Node y NPM instalados (si no saben como, pueden verlo aca: https://courseit.io/articulo/como-instalar-nodejs-en-linux-sh2m5ayc9)

Teniendo las dependencias instaladas ahora vamos a crear una nueva carpeta y posicionarnos adentro para crear el scaffolding básico por lo que vamos a escribir el siguiente comando mkdir first-scene && cd first-scene && dcl init y seleccionamos la opción “Scene”

Una vez que termine podemos correr el comando dcl start para levantar una preview en nuestro navegador y ver algo como esto:

basic-scene

Si por alguna razón 127.0.0.1:8000 te rechaza la conexión, proba cambiando a localhost:8000

Ahora vamos a abrir en nuestro editor el scaffolding base que se nos creo al generar esta escena para poder hacer algunos cambios en nuestro archivo game.ts

Primero que nada vamos a borrar todo lo que viene relacionado al ejemplo del cubo, borrando absolutamente todo el contenido que tiene ese archivo

Ahora lo que vamos a hacer es agregar nuestro nombre en 3D adentro de nuestra escena, para eso tenemos que escribir el siguiente código:

// Instanciamos una nueva entidad
const nameEntity = new Entity(); 

// Instanciamos un texto con el valor @JuaniGallo
const myName = new TextShape("@JuaniGallo");

// Asociamos nuestro nombre a la entidad que creamos al principio
nameEntity.addComponent(myName); 

// Posicionamos nuestra entidad principal
nameEntity.addComponent(new Transform({ position: new Vector3(8, 1, 8) })); 

// Asociamos la entidad al engine
engine.addEntity(nameEntity);

Si volvemos a entrar a nuestra escena, vamos a ver que ahora tenemos algo del siguiente estilo

name-scene

Pero... Que fue todo eso que escribimos y por que funciona? Bueno, la arquitectura de las escenas de Decentraland funciona de la siguiente forma:

flow

En donde nosotros creamos componentes con sus propiedades (en este caso TextShape), los cuales asociamos a entidades (en nuestro ejemplo nameEntity) y estas ultimas las asociamos al Engine quien efectivamente va a estar renderizando las cosas en nuestra escena. Si quieren saber mas de la arquitectura de Decentraland pueden leerlo aca: https://docs.decentraland.org/development-guide/entities-components/ pero por ahora volvamos a nuestro código.

Ahora vamos a crear un cubo que al clickearlo haga que nuestro nombre empiece a rotar, por ende vamos a hacer que interactúen dos entidades distintas. Para eso, vamos a tener que instalar una nueva dependencia utilitaria de Decentraland con el siguiente comando:

npm install @dcl/ecs-scene-utils -B

Después tenemos que buildear nuestro proyecto para terminar de instalar nuestra dependencia con el siguiente comando:

dcl build

Por ultimo, vamos a reemplazar todo nuestro game.ts por el siguiente y ejecutar el comando dcl start

import * as utils from "@dcl/ecs-scene-utils";

//Text
const nameEntity = new Entity();
const myName = new TextShape("@JuaniGallo");

nameEntity.addComponent(myName);
nameEntity.addComponent(new Transform({ position: new Vector3(8, 1, 8) }));

nameEntity.addComponent(
  new utils.ToggleComponent(utils.ToggleState.Off, (value) => {
    if (value == utils.ToggleState.On) {
      nameEntity.addComponentOrReplace(
        new utils.KeepRotatingComponent(Quaternion.Euler(0, 45, 0))
      );
    } else {
      nameEntity.getComponent(utils.KeepRotatingComponent).stop();
    }
  })
);

//Button
const buttonEntity = new Entity();
buttonEntity.addComponent(new BoxShape());
buttonEntity.addComponent(
  new Transform({ position: new Vector3(3, 1, 8), scale: new Vector3(2, 2, 2) })
);

buttonEntity.addComponent(
  new OnPointerDown(() => {
    nameEntity.getComponent(utils.ToggleComponent).toggle();
  })
);

//Engine
engine.addEntity(nameEntity);
engine.addEntity(buttonEntity);

utils.addLabel("Clickeame", buttonEntity);

Si todo salió bien, deberíamos estar viendo un resultado similar al siguiente:

final-scene

Este último código es bastante mas complejo que el primero que teníamos pero vamos a tratar de explicarlo.

Primero que nada tenemos dos entidades: nameEntity y buttonEntity . La primera es para manejar el TextShape con nuestro nombre y la segunda para manejar un BoxShape (cubo) el cual vamos a usar como botón.

Después de eso nos encontramos con este bloque de código:

nameEntity.addComponent(
  new utils.ToggleComponent(utils.ToggleState.Off, (value) => {
    if (value == utils.ToggleState.On) {
      nameEntity.addComponentOrReplace(
        new utils.KeepRotatingComponent(Quaternion.Euler(0, 45, 0))
      );
    } else {
      nameEntity.getComponent(utils.KeepRotatingComponent).stop();
    }
  })
);

En donde usamos la librería que instalamos para poder manejar un toggle y por otro lado para manejar la rotación de nuestro texto. Si quieren leer mas sobre las utils de Decentraland pueden hacerlo aca: https://docs.decentraland.org/development-guide/utils/

Por ultimo, tenemos la parte en donde manejamos el click de nuestro botón

buttonEntity.addComponent(
  new OnPointerDown(() => {
    nameEntity.getComponent(utils.ToggleComponent).toggle();
  })
);

en donde llamamos al método toggle para que nuestro nombre empiece o deje de girar.

Eso va a ser todo por ahora, pero como siempre, si quieren meterse mas a fondo pueden revisar la documentacion oficial de Decentraland

101: Decentraland SDK

Juani Gallo

@Juani