What are some tips for creating scenes in Decentraland for newcomers?

What strategies can I employ, and what expertise/documentation/tools are necessary to construct scenes for Decentraland and deploy them on my property?

I've been experimenting with the DCL Builder since it seems like the only thing I can actually do. I must admit, I find the Builder quite addictive!

The whole triangle concept is meant to facilitate easier loading on VR headsets, right? So when creating, should I adhere to those limitations?

I tried downloading a recent scene I created as a zip file, but after unzipping it, I couldn't locate any recognizable files that I could share visually. I was hoping to showcase some of my creations with you and the community. Any assistance would be greatly appreciated. Thank you.

Is it advisable to use the Builder for construction, or should I explore A-Frame and give that a shot?

I'm aware that I lack coding skills - I have no understanding of the Decentraland SDK. However, in terms of design and construction, I am eager to dive in and learn as much as possible. Given my background in painting, I believe I might have a natural inclination for this.

I own some linked private land parcels in Decentraland and have contributed land to the Vegas district.

Answer №1

Absolutely, I completely agree with the potential of the Decentraland Builder. During the Decentraland Builder Hackathon, I had the opportunity to create multiple scenes using it, and I must say, it was not only easy but also incredibly engaging and enjoyable. As an artist, having the ability to craft 3D creations and explore them in a virtual environment opens up a whole new world of possibilities.

When it comes to developing scenes for Decentraland, there are various approaches available - from utilizing the Decentraland Builder and the Decentraland SDK to exploring third-party tools. Below, I'll outline these methods, starting from the simplest to the more advanced ones.

You can use these techniques to construct scenes and test them locally on your computer before uploading them to your land. Once you're satisfied with your creation, you can utilize either the Builder or the SDK to upload your scenes to your designated land within Decentraland. To acquire land, visit .

If you aspire to work as an artist or developer for other landowners, there's a "hiring" channel accessible on the Decentraland Discord server at

1. Constructing Scenes using the Decentraland Builder To commence building a scene, navigate to , select the size of the scene you wish to develop in parcels, and start creating your scenes. Browse through the Items catalog to choose elements for your scene. Simply drag and drop the desired items onto your scene. To preview your local scene and see how it would appear in Decentraland, click on the eye button (Preview). Click on X to return to the Builder. While the scene is saved in your browser memory, it's advisable to back it up securely by downloading the scene as a local zip file. Later on, you can re-upload the scene by importing this zip file using the "UPLOAD SCENE" function on the main builder page.

Furthermore, you can leverage the files from the downloaded zip to generate an SDK-compatible version of the scene for additional customization, if required, and optionally deploy it to your land in Decentraland. For this process, proceed to approach 2.

An upcoming feature that allows direct uploading of your scene from the Builder is on the horizon and may already be implemented by the time you access this information.

You also have the option in the builder to "Publish" your scene to a pool utilized by landowners or districts to populate their land.

2. Developing and Deploying Scenes Using the Decentraland SDK The Decentraland SDK provides the flexibility to incorporate custom content and, when necessary, scripted dynamic behavior into your scene.

For comprehensive Decentraland documentation, refer to . Ensure that your scenes remain simple enough to comply with the published scene limitations. Particularly, focus on managing the "triangle count", essential for optimal performance when coexisting alongside numerous other scenes "in world".

To begin, install the SDK following the provided instructions.

There exists a growing repository of script modules developed by Decentraland builders. Explore the builder channel in the Decentraland Discord, MetaVRS.io, or study and adapt sample code from the Decentraland examples available at Decentraland scripting employs Typescript, an extension of JavaScript. The primary entry point for a scene is the games.ts file located in the src subdirectory.

Once the SDK is set up, you can initiate an entirely new scene by establishing a new working scene directory and executing dcl init. Alternatively, create a working directory, extract the contents of the zip file into it, and then enter npm i in that directory.

When ready to preview your scene via the SDK, type dcl start

An excellent tool for editing SDK scene scripts is "Microsoft Visual Studio Code," offering syntax highlighting and error detection features. While working on game.ts or other supplementary code modules, the editor recognizes the SDK's classes, functions, and any additional imported code modules, facilitating accurate coding practices.

If you've designed your scene using the Decentraland Builder and prefer not to further customize it due to lack of expertise, you can still preview it as mentioned above. When prepared to deploy an SDK scene to your land, utilize dcl deploy. Ensure to sign the deployment using MetaMask or a similar crypto wallet to verify land ownership. Edit the "scene.json" file to specify the parcel(s) you intend to upload the scene to by adjusting the "parcels" list and the "base parcel" coordinates.

3. Crafting Scenes with JanusVR and Converting Them to the SDK JanusVR serves as an effective tool widely employed for developing 3D/VR scenes. Download JanusVR for free from . The "" code ("JML markup") within the JanusVR scene's code editor can be transferred to the corresponding markup in a scene constructed within JanusVR's hosting platform, , enabling an upgrade to Vesta UV Pro. This upgrade offers a feature to export the Vesta scene to a Decentraland SDK compatible file set (Convert to DCL) Both JanusVR and/or the Vesta client can be directed towards the Vesta URL by individual collaborators, promoting collaborative design efforts. Stick to low-poly gltf or glb model files when building in JanusVR as only these formats are recognized in the Decentraland SDK.

4. Creating Scenes in Unity and Exporting Them to the SDK While I haven't personally attempted this method, you can explore: https://github.com/decentraland/DecentralandUnityPlugin Again, adhere to low poly models and ensure they are in gltf or glb format to integrate effectively with the SDK.

5. Designing Scenes in A-Frame and Migrating them to the SDK If proficient in both A-Frame markup scripts and SDK typescript scripting and have cultivated scenes in A-Frame suitable for transition to Decentraland, unravel the steps involved in converting A-Frame markup for models and primitives into SDK games.ts syntax. Although requiring effort, I've successfully transformed several scenes using this technique. Once again, utilize glb or gltf versions of the models, emphasizing compliance with triangle and other constraints.

I trust this guidance will assist you and fellow enthusiasts in initiating an exciting journey of constructing and deploying scenes in Decentraland.

Answer №2

Utilizing the builder tool, I construct the foundation of the setting before downloading it. Through the command line interface (CLI), you can easily install the SDK by following this guide: . Rest assured, navigating the Viewer on your computer within the scene is straightforward. Personally, when crafting something unique, I find using Blender or Google Sketchup ideal for beginners in 3D modeling. After creating a building or initiating the modeling process, exporting the model to .glb format becomes essential. Both tools have extensions available; you will also need Atom or Visual Studio to edit the .ts file for importing your 3D model (my preference is Atom). Nevertheless, delving into the extensive documentation provided by DCL at is crucial for mastering the art of creation and learning.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

I am currently working with oracledb npm to request data in JSON format and here is the select block example I am using: const block = 'BEGIN ' + ':response := PK.getData(:param);' + 'END;'; The block is ...

Trouble with selectionChange event in mat-select component in Angular 13

I'm having trouble getting the selectionChange event to fire in my mat-select when the value is changed. html file <mat-select (selectionChange)="changeCategory()"> <mat-option *ngFor="let category of categ ...

Issue with default selection persisting in Angular 9 when using ngModel

I'm encountering an issue where I am able to successfully autofill a text box based on the state from another component. However, when I attempt to add ngModel to the text box in order to capture the value upon form submission, the value is getting cl ...

The outcome from using Array.reduce may not always match the expected result

After discovering an unexpected behavior in Typescript's type-inference, I suspect there may be a bug. Imagine having a list of the MyItem interface. interface MyItem { id?: string; value: string; } const myItemList: MyItem[] = []; It's ...

Tips for utilizing express in your typescript projects

I'm curious about the transition of definition files from tsd to typings, and now to @types. How can I incorporate @types in a node/express project? What is currently preferred and what's the reason for moving from tsd to typing and finally to @t ...

Exploring Vue 3.3: Understanding Generics and Dynamic Properties

I'm currently diving into the generics feature in vue 3.3 and I've been pondering about defining the type of an incoming prop based on another prop value. This is my current component structure: export interface OptionProps { id: string | numb ...

What is the best way for me to determine the average number of likes on a post?

I have a Post model with various fields such as author, content, views, likedBy, tags, and comments. model Post { createdAt DateTime @default(now()) updatedAt DateTime @updatedAt id String @id @default(cuid()) author U ...

React-router-dom TypeScript error when defining the type of the prop parameter in the loader

I'm having trouble with the params prop in the loader prop within the routes. I've defined the params in TypeScript, but I'm getting errors that I don't understand. Any help would be appreciated, thanks in advance. I tried to use the Cu ...

Exploring the concept of inheritance and nested views within AngularJS

I've encountered a challenge while setting up nested views in AngularJS. Utilizing the ui-router library has been beneficial, but I'm facing issues with separate controllers for each view without proper inheritance between them. This results in h ...

What is the best way to determine the highest value?

How can I ensure that the data is displayed based on the condition c.date <= this.selectedReport.report_date? The current code snippet if (Math.max(...this.costs.map(c => c.date))){} seems to be causing an issue where no data is being displayed. What ...

Executing the routing component prior to any other tasks

Having an issue where the ProductsService is fetching data from the server and storing it in an Array. The ProductsComponent serves as the parent component, while the ProductsListComponent and ProductListItemsComponent are its children components. The flow ...

Substitute variables in a string and retrieve an array with typescript

I am trying to figure out how to manipulate a string that looks like this - "{var1} apples, {var2} oranges are expensive". in combination with an object, which has the following structure - { var1 : <Link to="xyz">5</Link>, var2 : < ...

In Typescript, mismatched index types do not result in errors being thrown

Why doesn't TypeScript raise an error or warning in the following code snippet? In the index type for map["xx"], it is specified as string, but in the map signature it's defined as number. Should any configuration be set in tsconfig to address th ...

Compile Node.js applications for multiple projects using Grunt

I am looking for an efficient way to build a multi-project application. Currently, my project structure looks like this: Each app is a nodejs application - parent folder (git root) |- app1 |-- app1-backend |-- app1-frontend |- app2 |- app3 Right now, I ...

Bringing in SCSS using Typescript, React, and Webpack

I am trying to utilize .scss classes by importing them and applying them to the className property of a React component. Here is the structure of my project : root/ ... config/ ... webpack.config.js src/ ... global.d.ts app/ ...

List the hours using TypeScript

My data table is displaying records including a column for hours spent and a row showing the total sum of those hours. While the hours are being added correctly, the minutes display as NaN, such as 52:Nan. Can someone assist me in resolving this issue? co ...

Utilizing a TypeScript getter or local variable to reference a service variable within an Angular component

Suppose you have an array of objects stored in a service export class DataService { private _dataSources : Array<DataSource> contructor(private callerService: CallerService){ this._dataSources = this.callerService.getDataSources(); // fetc ...

Generics causing mismatch in data types

I decided to create a Discord bot using DiscordJS and TypeScript. To simplify the process of adding components to Discord messages, I developed an abstract class called componentprototype. Here is how it looks (Please note that Generators are subclasses li ...

Bug in auto compilation in Typescript within the Visual Studios 2015

Currently, I am utilizing Visual Studio Pro 2015 with auto compile enabled on save feature. The issue arises in the compiled js file when an error occurs within the typescript __extends function. Specifically, it states 'Cannot read property prototyp ...

A call signature is missing in the expression type of Typescript, preventing it from being invoked

While I know there are similar questions out there, none of them have provided the answer I'm looking for. My goal is to create a straightforward function in my Angular application. In my app.component.ts file: formClick() { const formContainer ...