Setting up the Decentraland Development Environment and Building Your First Scene

Overview: In this tutorial, we will go over how to set up the Decentraland development environment and walk through coding a basic scene comprising of textured spheres.

To get started on building your first scene using the Decentraland SDK, you will need to install these dependencies first.

• Node.js (Download from https://nodejs.org/en/)
• Decentraland Command Line Interface (CLI) (run npm install -g decentraland)

Once the dependencies have been installed, create an empty directory that you’ll want to store your scene in. Next, navigate to the directory using the command line and run:

dcl init

Using a source code editor of your choice, open up the game.ts file in the newly created src folder. You will find that default code has already been created for you in the game.ts file. For the sake of this tutorial, delete the initial code so that the file is empty.

Decentraland scenes are comprised of entities which have individual components that give them different characteristics. In this example, we will use a primitive SphereShape as our basis. Other examples of primitive shapes in the SDK include BoxShape, PlaneShape, CylinderShape, and ConeShape.

We will begin by creating a spawnBall function that will create a sphere and add it to our scene so that it is visible to users.

/// — — Spawner function — -
function spawnBall(x: number, y: number, z: number) {
// This will create the entity.
const ball = new Entity()
/* First we will use a variable to hold the value of the scale in size each ball will have. Next, we add a Transform component to the entity and assign it the position passed through the spawnBall function and set the scale. */
let scaleVal = Math.random() + .07
ball.addComponent(new Transform({
position: new Vector3(x, y, z),
scale: new Vector3(scaleVal, scaleVal, scaleVal)
}))
// This gives our entity shape. In this case we are using a SphereShape.
ball.addComponent(new SphereShape())
// A Material is what gives our entity texture. Here we give the ball a random color and set its metallic and roughness values.
const myMaterial = new Material()
myMaterial.albedoColor = Color3.Random()
myMaterial.metallic = 0.9
myMaterial.roughness = 0.1
ball.addComponent(myMaterial)
// This spawns another ball whenever a ball is clicked on.
ball.addComponent(
new OnClick(() => {
spawnBall(Math.random() * 20 + 1, Math.random() * 20, Math.random() * 20 + 1)
})
)
// Here we add the entity to the engine.
engine.addEntity(ball)
return ball
}

Finally, we will insert a line of code that spawns the initial ball in our scene at the position (10, 1, 5).

/// — — Spawn a ball — -
const ball = spawnBall(10, 1, 5)

Now that the code is complete, you can start your scene by running the following from the command line in the same directory you ran the initialization command:

dcl start

Your internet browser should automatically open and load your scene. You should see a colored sphere near you.

If you look back to the scene’s code, you’ll see that the ball has an onClick component. This enables us to spawn another ball when we click on a ball. If you do this repeatedly you’ll find yourself surrounded by more of these colored balls.

For further experimenting you can try changing the ball’s Material values or replacing the primitive SphereShape with other primitive shapes and seeing how the scene is altered.