Sign up for our upcoming Hackathon! Over $250,000 USD in prizes in MANA and LAND.
X
Hello! Please choose your
desired language:
Dismiss

Preview your scene

Once you have built a new scene or downloaded a scene example you can preview it locally.

Before you begin

Please make sure you first install the CLI tools by running the following command:

npm install -g decentraland

See the Installation Guide for more details instructions.

Preview a scene

To preview a scene run the following command on the scene’s main folder:

dcl start

Any dependencies that are missing are installed and then the CLI opens the scene in a new browser tab automatically. It creates a local web server in your system and points the web browser tab to this local address.

Every time you make changes to the scene, the preview reloads and updates automatically, so there’s no need to run the command again.

Preview a remote scene

Remote scenes depend on an external server to store a shared state for all users of the scene, making it possible to have multiplayer interaction.

When previewing a remote scene locally, you’ll often have to also run the server locally on another port. Check the scene’s readme for instructions on how to launch the server as well as the scene.

You can point other browser tabs to the same local address and this will add new users to the scene. If the actions of a user affect the scene state, which is hosted on the server, all users should see the effects of this.

Upload a scene to decentraland

Once you’re happy with your scene, you can upload it and publish it to Decentraland, see publishing ) for instructions on how to do that.

Parameters of the preview command

You can add the following flags to the dcl start command to change its behavior:

  • --no-browser to prevent the preview from opening a new browser tab.
  • --port to assign a specific port to run the scene. Otherwise it will use whatever port is available.
  • --w or --no-watch to not open watch for filesystem changes
  • --c or --ci To run the parcel previewer on a remote unix server

Note: To preview old scenes that were built for older versions of the SDK, you must set the corresponding version of decentraland-ecs in your project’s package.json file.

Preview scene size

The scene size shown in the preview is based on the scene’s configuration, you set this when building the scene using the CLI. By default, the scene occupies a single parcel (16 x 16 meters).

If you’re building a scene to be uploaded to an estate that occupies more parcels than the preview shows, you can edit the scene.json file to reflect this, listing multiple parcels in the “parcels” field.

 "scene": {
    "parcels": [
      "0,0",
      "0,1",
      "1,0",
      "1,1"
    ],
    "base": "0,0"
  },

Tip: While running the preview, the parcel coordinates don’t need to match those that your scene will really use, as long as they’re adjacent and are arranged into the same shape. You will have to replace these with the actual coordinates later when you deploy the scene.

Debug a scene

Running a preview provides some useful debugging information and tools to help you understand how the scene is rendered. The preview mode provides indicators that show parcel boundaries and the orientation of the scene.

If the scene can’t be compiled, you’ll just see the grid on the ground, with nothing rendered on it.

If this occurs, there are several places where you can look for error messages to help you understand what went wrong:

  1. Check your code editor to make sure that it didn’t mark any syntax or logic errors.
  2. Check the output of the command line where you ran dcl start
  3. Check the JavaScript console in the browser for any other error messages. For example, when using Chrome you access this through View > Developer > JavaScript console.
  4. If you’re running a preview of a multiplayer scene together with a local server, check the output of the command line window where you run the local server.

If an entity is located or extends beyond the limits of the scene, it will flash with red color to indicate this. Nothing in your scene can extend beyond the scene limits. This won’t stop the scene from being rendered locally, but it will stop it from being deployed to Decentraland.

Using the console

If your scene outputs messages to console (using log()) you can view these messages as they are generated by opening the JavaScript console of your browser. For example, when using Chrome you access this through View > Developer > JavaScript console.

You can also add debugger commands or use the sources tab in the developer tools menu to add breakpoints and pause execution while you interact with the scene in real time.

Viewing scene stats

The upper-left corner of the preview informs you of the following:

  • FPS : frames per second
  • MS : network ping delay in milliseconds
  • MB : memory usage in megabytes

Click on the graph to switch through these metrics.

Click the P key to open the Panel. This panel displays the following information about the scene, and is updated in real time as things change:

  • Processed Messages
  • Pending on Queue
  • Scene location (preview vs deployed)
  • Poly Count
  • Textures count
  • Materials count
  • Entities count
  • Meshes count
  • Bodies count
  • Components count

The processed messages and message queue refers to the messages sent by your scene’s code to the engine. These are useful to know if your scene is perhaps running more operations than the engine can support. If many messages get queued up, that’s usually a bad sign.

The other numbers in the panel refer to the usage of resources, in relation to the scene limitations. Keep in mind that the maximum allowed number for these values is proportional to the amount of parcels in the scene. If your scene tries to render an entity that exceeds these values, for example if it has too many triangles, it won’t be rendered.

Note: Keeping this panel open can negatively impact the frame rate and performance of your scene, so we recommend closing it while not in use.

Connecting to Ethereum network

If your scene makes use of transactions over the Ethereum network, for example if it prompts you to pay a sum in MANA to open a door, you must manually add an additional parameter to the preview URL: &ENABLE_WEB3

So for example if your scene opens in the following URL: http://127.0.0.1:8000/?SCENE_DEBUG_PANEL&position=0%2C0

Add the parameter at the end, like this: http://127.0.0.1:8000/?SCENE_DEBUG_PANEL&position=0%2C0&ENABLE_WEB3

Using the Ethereum test network

You can avoid using real currency while previewing the scene. For this, you must use the Ethereum Ropsten test network and transfer fake MANA instead. To use the test network you must set your Metamask Chrome extension to use the Ropsten test network instead of Main network. You must also own MANA in the Ropsten blockchain, which you can acquire for free from Decentraland.

Any transactions that you accept while viewing the scene in this mode will only occur in the test network and not affect the MANA balance in your real wallet.