Quick start

The Decentraland SDK is a powerful tool that lets you create scenes by writing in Typescript (Javascript + Types).

This mini-tutorial walks you through how to get set up, and shows you the basic parts of a Decentraland scene.

Install the editor #

The Decentraland Editor is a Visual Studio extension, that allows you to build, preview and deploy Decentraland scenes.

To install the Decentraland Editor:

Install Visual Studio Code, if you don’t have it already.
Open Visual Studio Code, and open the extensions marketplace. Search for the Decentraland Editor extension and click Install. You’ll then need to restart Visual Studio to use the extension.

Create your first scene #

To create your first scene using the Decentraland Editor, follow these steps.

Make sure you’ve installed the Decentraland editor, then:

Open a Visual Studio Code window on an empty folder.
Select the Decentraland tab on Visual Studio’s left margin sidebar
Click Create Project
The editor will prompt you about what kind of project to create. Select Scene.

Preview the 3D scene by clicking Run Scene in the Decentraland tab of Visual Studio Code.

Read more about the scene preview in preview a scene.

Edit the scene #

Open the src/game.ts file from your scene folder.

Change anything you want from this code, for example change the x position of the first cube entity that’s spawned (on line 42). If you kept the preview running in an open tab, you should now see the changes show in the preview.

Tip:

Visual Studio Code helps you by marking syntax errors, autocompleting while you write and even showing smart suggestions that depend on context. Also click on an object to see the full definition of its class.

Download this 3D model of an avocado from the scene’s GitHub repo in glTF format. link.

Create a new folder under your scene’s directory named /models. Extract the downloaded file and drop all of its contents in that folder. Note that there are several files that make up the 3D model, all of them must be in the same path.

At the end of your scene’s code, add the following lines:

let avocado = new Entity()
avocado.addComponent(new GLTFShape("models/avocado.gltf"))
avocado.addComponent(
  new Transform({
    position: new Vector3(3, 1, 3),
    scale: new Vector3(10, 10, 10),
  })
)
engine.addEntity(avocado)

You can also download the finished scene from its GitHub repo.

Check your scene preview once again to see that the 3D model is now there too.

The lines you just added create a new entity, give it a shape based on the 3D model you downloaded, and set its position and scale.

Note that the avocado you added rotates, just like all other entities in the scene. That’s because the RotatorSystem system that was defined in the default code of this scene is iterating over every entity in the scene and rotating it. If you remove this system, entities stop rotating.

The Utils library #

The Decentraland ESC Utils library includes a number of helper functions and specialized components that make it easier to carry out a lot of common use cases.

To use any of the helpers provided by the Utils library:

Install it as a dependency of your scene. At the bottom of the Decentraland tab, in Visual Studio Code, click the + icon on the Dependencies section. Then write the name of the dependency you wish to install:
```
@dcl/ecs-scene-utils
```

Add this line at the start of your game.ts file:

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

Further down in the game.ts file, write utils. and let the suggestions show the available helpers. You’ll see there are a number of functions you can run and of components that can be added to entities.
Add the following component from the utils library to your avocado entity to make it slowly grow. The provided arguments make it grow from a scale of 1 to a scale of 5 over a period of 10 seconds:
```
avocado.addComponent(new utils.ScaleTransformComponent(
	new Vector3(1,1,1), 
	new Vector3(5, 5, 5), 
	10
))
```
The ScaleTransformComponent requires the following parameters:
- start: Starting scale.
- end: Ending scale.
- duration: Duration (in seconds) of start to end scaling.
TIP: Your code editor will hint this information to you once you typed new utils.ScaleTransformComponent(.
Notice that the ScaleTransformComponent component also takes two other optional more advanced parameters that you can play around with:
- onFinishCallback: A function that is called when the transition ends.
- interpolationType: Type of interpolation to be used.
```
avocado.addComponent(new utils.ScaleTransformComponent(
	new Vector3(1,1,1), 
	new Vector3(5, 5, 5), 
	4,
	()=>{ log("FINISHED") },
	utils.InterpolationType.EASEOUTELASTIC
))
```
In the fourth parameter, a very simple function prints the text “FINISHED” to the browser console once the transition is over.

TIP: To read the message that is printed to the console, in Chrome go to View > Developer > Javascript console.

The final parameter tells the component to perform the transition using an ease-out elastic interpolation, which results in a speed curve that goes from fast to slow and ends with a bouncy effect.

To learn more about the ECS Utils library, read its full documentation here.

Engage with other developers #

Visit Discord, join a lively discussion about what’s possible and how!

To debug any issues, we encourage that you post issues to the SDK Support category Decentraland Forum.

You can also post to Stack Overflow, using the tags decentraland or decentraland-ecs.

You can also ask in Discord. In the Support section, the #sdk channel is for questions regarding code, the #builder-and-3d channel is for questions regarding 3D models and art. #code-contribution is for discussing PRs to the SDK codebase.

3D Art Assets #

A good experience will have great 3D art to go with it. If you’re keen on creating those 3D models yourself, you’re encouraged to, see the 3D Modeling section of our docs for more info. But if you prefer to focus on the coding or game design side of things, you don’t need to create your own assets!

Here are a few tips to get great 3D models that you can use in a Decentraland scene:

Build a scene in the Decentraland Builder and export it, together with all its assets, to keep working on it with the SDK.
Download all the 3D assets available in the Builder from this repo
SketchFab
Clara.io
Archive3D
SketchUp 3D Warehouse
Thingiverse (3D models made primarily for 3D printing, but adaptable to Virtual Worlds)
ShareCG
CGTrader

📔 Note: Models must be in the supported .gltf or .glb formats, and must have a number of triangles, textures and materials that adhere to the scene limitations. If getting models from a third party site, pay attention to the licence restrictions that the content you download has.

Publish your scene #

If you own LAND, or have permissions given by someone that does, you can upload your scene to Decentraland. See publishing.

If you don’t own land, you can still upload your scene for free to third party services, so you can easily share your creations with others as a link. See Deploy to third party.