Preview your scene

Once you take built a new scene or downloaded a scene example y’all can preview it locally.

Earlier you begin

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

            npm
              install
              -g
              decentraland
            
          

Run into the Installation Guide for more than details instructions.

Preview a scene

To preview a scene run the following control on the scene’s principal folder:

Whatsoever dependencies that are missing are installed so the CLI opens the scene in a new browser tab automatically. It creates a local web server in your organisation 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 control again.

Annotation: Some scenes depend on an external server to store a shared state for all players in the scene. When previewing one of these scenes, you’ll probable have to also run the server locally on some other port. Cheque the scene’s readme for instructions on how to launch the server also every bit the scene.

Upload a scene to decentraland

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

Parameters of the preview control

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

  • --port
    to assign a specific port to run the scene. Otherwise it volition employ whatever port is available.
  • --no-debug
    Disable the debug console, that shows scene and performance stats
  • --no-browser
    to foreclose the preview from opening a new browser tab.
  • --w
    or
    --no-watch
    to not open up watch for filesystem changes and avert hot-reload
  • --c
    or
    --ci
    To run the parcel previewer on a remote unix server
  • --web3
    Connects preview to browser wallet to employ the associated avatar and business relationship
  • --skip-version-checks
    Avoids checking if the scene’s ECS library version matches your CLI version, and launches the preview anyway.

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

Preview scene size

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

If you’re edifice a scene to be uploaded to several adjacent parcels, yous tin edit the
scene.json
file to reflect this, list multiple parcels in the “parcels” field. Placing any entities exterior the bounds of the listed parcels will display them in cerise.

            
              
              
              "scene"
              :
              
              
              {
              
              
              "parcels"
              :
              
              
              [
              
              
              "0,0"
              ,
              
              
              "0,one"
              ,
              
              
              "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 side by side and are bundled into the same shape. You will accept to supplant these with the actual coordinates later when you deploy the scene.

Debug a scene

Running a preview provides some useful debugging data and tools to help you lot empathize 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 but run into the grid on the ground, with nothing rendered on it.

If this occurs, there are several places where y’all can look for error messages to assist you understand what went incorrect:

  1. Check your code editor to make certain that information technology didn’t mark whatsoever syntax or logic errors.
  2. Check the output of the command line where you lot ran
    dcl kickoff
  3. Check the JavaScript console in the browser for any other fault messages. For example, when using Chrome you admission this through
    View > Developer > JavaScript console.
  4. If you’re running a preview of a multiplayer scene that runs together with a local server, check the output of the command line window where you lot run the local server.
Popular:   Sources: MLB players not vaccinated for COVID-19 will not be paid for missed games in Canada under new CBA

If an entity is located or extends beyond the limits of the scene, it will exist displayed in blood-red to betoken this, with a red bounding box to mark its boundaries. Zip in your scene can extend across the scene limits. This won’t stop the scene from being rendered locally, just information technology will finish the offending entities form being rendered in Decentraland.

Tip: Before y’all deploy your scene to the production environment, deploy it to the test environment to endeavour it in a context that is a lot closer to production. See Development Workflow

Employ the console

Output messages to console (using
log()). You can and so view these messages every bit they are generated by opening the JavaScript panel of your browser. For example, when using Chrome you lot access this through
View > Developer > JavaScript panel.

You can also add together
debugger
commands or use the
sources
tab in the developer tools carte to add together breakpoints and interruption execution while you interact with the scene in existent time.

Once you lot deploy the scene, you won’t be able to come across the messages printed to console when you visit the scene in-world. If you demand to bank check these messages on the deployed scene, you tin turn the scene’s console letters back on calculation the following parameter to the URL:
DEBUG_SCENE_LOG.

View scene stats

The lower-left corner of the preview informs y’all of the
FPS
(Frames Per Second) with which your scene is running. Your scene should be able to run above 25 FPS most of the time.

Click the
P
key to open the Panel. This panel displays the post-obit information near the scene, and is updated in real time equally things change:

  • Processed Messages
  • Awaiting 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 refer to the letters sent by your scene’due south code to the engine. These are useful to know if your scene is running more operations than the engine can support. If many messages get queued upward, that’south ordinarily a bad sign.

The other numbers in the panel refer to the usage of resources, in relation to the scene limitations. Keep in heed that the maximum allowed number for these values is proportional to the corporeality 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 in-earth once deployed.

Note: Keeping this console open tin negatively impact the frame rate and performance of your scene, then we recommend endmost it while not in utilize.

Run lawmaking only in preview

You can discover if a scene is running as a preview or is already deployed in production, so that the aforementioned code behaves differently depending on the instance. Y’all can apply this to add debugging logic to your code without the chance of forgetting to remove it and having it show in production.

To utilise this function, import the
@decentraland/EnvironmentAPI
library.

            
              import
              {
              isPreviewMode
              }
              from
              '@decentraland/EnvironmentAPI'
              executeTask
              (
              async
              ()
              =>
              {
              const
              preview
              :
              boolean
              =
              wait
              isPreviewMode
              ()
              if
              (
              preview
              ){
              log
              (
              "Running in preview"
              )
              }
              }
            
          

Note:
isPreviewMode()
needs to be run as an async office, since the response may filibuster in returning data.

Dependency versions

Running a Decentraland scene locally depends on ii main libraries:
decentraland
(the CLI, which is installed globally on your car) and
decentraland-ecs, which is installed on each project folder. Make sure both of those are up to date, equally any issues you’re experiencing might already exist fixed in newer versions. In that location may too be compatibility problems when attempting to run with one of these two outdated and the other upwards to date. You tin run the following commands to update both these libraries to the latest stable version:

If you’re using any of the utils libraries brand sure those are too up to appointment, as older versions of these libraries may not exist compatible with newer versions of
decentraland-ecs.

The
decentraland-ecs
library has in turn a couple of internal dependencies that are installed with it: the
renderer
and the
kernel. Each
decentraland-ecs
version is paired with its corresponding versions of both. In occasions, it may be useful to try switching versions of these dependencies independently, to better pinpoint where an event has originated. You tin force your preview to utilise a different version of the
renderer
or of the
kernel
past merely providing the url parameters
renderer-version
and
kernel-version, pointing at a specific commit.

For example, you can run your preview with the post-obit URL:

http://127.0.0.ane:8000/?position=0%2C0&SCENE_DEBUG_PANEL&renderer-version=1.0.12119-20210830195045.commit-a8be53a

To find out what versions are bachelor to cull from on each dependency, bank check the version history on the NPM pages for the Renderer and for the Kernel. To know what versions of these dependencies are in use by default by a specific
decentraland-ecs
version, you lot tin run the following control, indicating the
decentraland-ecs
version yous’re curious well-nigh:

View bounding boxes

While running a scene preview, open up the debug menu (on the right of the minimap) and click
Bounding Boxes
to toggle the visualization of bounding boxes on and off.

Bounding boxes are displayed every bit thin white boxes around each mesh. Bounding boxes show the limits of the space occupied by a 3d model. Every mesh in a 3d model has its ain bounding box.

When Decentraland’s engine checks if an entity is within the scene limits, it looks at the positions of each corner of the bounding box. Checking the corners of the bounding boxes is an engine optimization, as checking the position of each vertex in the model would be a lot more work. Ideally the bounding box shouldn’t extend beyond the visible vertexes of the model, but it may not be the case if the model wasn’t advisedly built with this in listen.

By visualizing bounding boxes, y’all can debug problems with entities being reported as exterior the scene limits.

Lighting conditions

The in-world time of day has a big impact on how 3d models look. The color of the light source changes subtly, having a bluish tint at night, and a ruddy tint during sunrise and dusk. The management of the calorie-free as well moves across the sky, casting shadows in different directions.

Cheque that your scene looks skillful at all times of twenty-four hours by switching the game clock to unlike values. Open up the settings panel, and in the
General
tab set the
skybox time
to whatever time you prefer. If this slider is grayed out, make sure that the
Dynamic skybox
option is disabled.

In-globe instructions

Your 3d model’s materials might not look the same as they did in the modeling tool you created it with. This is to be expected, equally all 3d rendering engines have subtle differences in how they deal with light and materials.

Avatars and accounts

When you run a preview, you’re assigned a random avatar each time you reload.

To use a consist avatar across your sessions, you can store an avatar profile past adding a
PLAYER
parameter to the URL with whatever string every bit its value. When using this, the preview will store your avatar’s settings locally on your browser, to retrieve them whenever you use the aforementioned cord on the
PLAYER
parameter. For example, every fourth dimension you open up the preview with the URL
http://127.0.0.1:8000/?PLAYER=ringo, you’ll have the same avatar.

To utilize the avatar that’s linked to your active Metamask account, with access to all of your endemic wearables, start the preview with:

Connecting to Ethereum network

If your scene makes use of transactions over the Ethereum network, for case if it prompts yous to pay a sum in MANA to open a door, you must add an additional parameter to the command when launching the preview:

Alternatively, you tin manually add the URL parameter
&ENABLE_WEB3
to the URL in the browser window.

Using the Ethereum examination network

You tin can avoid using existent currency while previewing the scene. For this, you must use the
Ethereum Ropsten exam network
and transfer fake MANA instead. To use the test network you must set your Metamask Chrome extension to apply the
Ropsten test network
instead of
Master network. You must too ain MANA in the Ropsten blockchain, which you can acquire for gratuitous from Decentraland.

Whatever transactions that y’all accept while viewing the scene in this mode will only occur in the examination network and not affect the MANA remainder in your real wallet.

Multiplayer testing

If yous open a second preview window on your machine, you will enter the scene with a different avatar. The avatars on both tabs will be able to see each other and interact, although currently they might have inconsistent names and wearables on.

Note: You tin’t open multiple tabs using the same account. So if your URL has a hardcoded
PLAYER
parameter with the aforementioned string on multiple tabs, or you’re connecting to Metamask on more than than one tab, it won’t be possible to load them all. Each simultaneous tab should load a different account.

If the scene uses the MessageBus to ship letters between players, these will work between the different tabs.

If the scene connects to a third party server via websockets, these connections should besides work independently on each tab, equally separate players.

Source: https://docs.decentraland.org/development-guide/preview-scene/