decentraland/builder

🍉 Build scenes for Decentraland

Decentraland Builder

You can create beautiful scenes for Decentraland even if you don't own a parcel.

How to run

The builder is a SPA or single page application built with create-react-app. It uses an .env file as configuration for a few things, you'll need to create that first.

After that, to run this app you have two options:

• Development Server: run npm start from the root path
• Production: run npm run build and host the resulting index.html file with your server of choice, for example python -m SimpleHTTPServer 5000

For more information, check the create-react-app repo.

Environment

This project depends on a few environment variables to work, as well as external services for some features. The front-end connects to these services via URLs set via environment variables.

Creating an environment file

You'll need Create an .env file on the root folder and fill it following the .env.example file found there.

You will need to specify NODE_PATH to be src.

Here are the basic requirements to run the project:

# .env

NODE_PATH=src

builder's Issues

Scene tree state

Test scenario templates

Create a test case system to easily start the application in a specific state

Scaffold World view

The Editor view should load a preview instance (first person mode).

CI config to deploy environments

Setup project with CRA

We need to kickstart a new Create React App

Create custom build projects

Depends on #17

Translation gizmo and hooks

We need to be able to move stuff with a translation gizmo

The gizmos should affect the client entities and report back the state changes for the builder to update its internal representation of the scene. Only the client side hooks should be implemented for this issue.

Add option to edit project layout

Edit:

We need to investigate the possibility of adding an option to allow the user to edit the scene size. Say you pick a 2x3 scene but decide you want it to be 2x2 later, you need to redo the entire scene.

List categories from state on item drawer

Item drawer list mode buttons

We need a set of buttons to toggle between the different list view modes. These modes are already implemented by #30

Editor module

The editor domain as seen in #29

Implement decentraland styles

• npm install decentraland-ui
• Create css variable file
• Figure out initial styles hehe

Publish/Deploy to LAND

Projects should be deployable to a LAND or Estate. There should be a button in the top toolbar for this.

Update list mode styles

We need to update the styles to use the new background & styles

Import/Export project

Using a custom save file

Zoom control buttons

Play mode

The play mode should place the user in first person view (similar to the CLI).

Undo/Redo

We need the client to report the simplified node that was changed together with a path to that specific node. Then, we can store the reference to previous redux states to perform time travel undo/redo.

Project template card component

It should have:

• Thumbnail
• Name
• Dimensions

Modal state

There should be a modal reducer for all modals in the app:

• Contest modal
• New project modal
• Deployment (publish) modal

Add intercom

Already available on decentraland-dapps

Fix list view for the item drawer

Delete action button

The topbar should include a button that deletes the current selected item

Basic editor camera orientation

We should change the basic editor camera to look up from above. No need for complex rotation features for this one.

Project creation templates

We should support project creation templates for:

• 1x1
• 2x2
• 3x2
• Custom builds up to 32 parcels (+ modal)

Depends on #60

Save and display projects locally

Projects should be saved to localstorage and displayed in the home page for users to continue work without exporting/re-importing data.

Refactor category domain

Categories can be derived from already existing state and will make filtering/searching easier

Asset pack state

  category: {
    [name]: {
      name: string,
      assets: string[] // assetId
    }
  },
  assetPack: {
    [assetPackId]: {
      id: string, // id=title-version?
      title: string,
      assets: string[]
    }
  },
  asset: AssetDescriptor & { id: string, assetPackId: string }[]

App state

Redux state

{
  wallet: {
    /*(...)*/
  },
  camera: {
    zoom: number,
    origin: Vector2,
    rotation: Vector4
    // position => caculated on the fly
  },
  scene: {
    [sceneId]: {
      id: string,
      metrics: {
        triangles: number,
        materials: number
      },
      tree: SimplifiedNode // what we send to the client
    }
  },
  project: { // current project from URL
    [projectId]: {
      id: string,
      title: string,
      description: string,
      ownerEmail: string,
      parcels: {x:number, y:number}[],
      scene_id: string
    }
  },
  ui: {
    sidebarVisible: boolean,
    viewport: 'preview' | 'editor',
    modal: (...)
  },
  editor: {
    mode: 'move' | 'rotate' | 'scale'
    selectedEntity: string // instance of asset
  },
  category: {
    [name]: {
      name: string,
      assets: string[] // assetId
    }
  },
  assetPack: {
    [assetPackId]: {
      id: string, // id=title-version?
      title: string,
      assets: string[]
    }
  },
  asset: AssetDescriptor & { id: string, assetPackId: string }[]
}

Endpoint responses

/api/assetPacks
returns AssetPack[]

type AssetPack = {
  // Asset pack manifest version (1 by default)
  version: number
  // Asset pack title
  title: string
  assets: AssetDescriptor[]
}

type AssetResource = {
  // Asset display name
  name: string
  // Resource URL (content server)
  url: string
  thumbnail: string
}

type AssetDescriptor = AssetResource & {
  id: string
  // Tag list
  tags: string[]
  category: string
  variations: AssetResource[]
} 

Notes

• Colissions toggle is internal state
• Toolbar:
  • No scalling
  • No skins
  • The rest of the "left" buttons are internal state
  • The "guy" icon (spawn point) won't be there no more
• Asset detail:
  • We won't have a description, dimensions or creator for now
• Probably not for the MVP:
  • Search
  • Variations

TODO

• Who controls client window sagas?
  Possible answer: have a client? module that hooks the events and fires actions. The other modules listen to the actions and don't use window

Duplicate Action button

The topbar should include a button that duplicates the current selected item

Topbar modes buttons

Should include:

• Select mode
• Translation mode
• Rotation mode

Depends on #7

Keyboard shorcut reference

We need a modal that can display all the active shortcuts. This modal should be displayed by clicking a button at the bottom-right of the editor viewport.

Depends on #17

Run tslint in CI

Scaffold Editor layout

We require:

• A topbar
• A sidebar

The initial layout with initial background colors is enough

Scaffold Homepage view

We need a route for the project creation page, with a navbar and a footer.

Topbar toggle buttons

These two buttons should:

• Toggle play/edit mode
• Toggle sidebar visibility

All functionality implementation is required for this issue as buttons should already be implemented by #46 and the sidebar should be already implemented by #30, lastly the play mode should already be implemented by #12

Working Project module

The business logic domain for the current opened project:

Settings reducer

• Project name
• Parcels
  (And any other scene.json fields that are relevant)

Scene reducer

• Scene tree (simplified nodes)

Undo limit toast notification

We need to inform the user when the limit is hit

Load AssetPacks from content server

The assetpack manifest should contain an asset as follows:

      {
        "id": "abc-def-fgh",
        "name": "Test",
        "thumbnail": "<direct content server url>",
        "url": "Tree/Tree_StarterPack.gltf",
        "tags": ["test"],
        "category": "test",
        "variations": [],
        "mappings": {
           "Tree/Tree_StarterPack.gltf': 'https://content.decentraland.today/contents/QmdmNp5MuRxkNAAsyFd7z3nFGYcPaeZQRjFDm4AphE7K4V',
           "Tree/texture.png": '<content server url>'
         }
      }

All model dependencies must be listed in the dependencies field of the asset pack

The mappings sent to the client should be defined as follows:

{
  '<assetpack-uuid>/Tree/Tree_StarterPack.gltf': 'https://content.decentraland.today/contents/QmdmNp5MuRxkNAAsyFd7z3nFGYcPaeZQRjFDm4AphE7K4V'
}

Where the asetpack id servers as a namespace to avoid conflicts with assets that share the same name

Implement decentraland dapps

• npm i decentraland-dapps
• add translations
• add location

Later

• wallet
• storage
• analytics

Go back button (to the homepage) on editor page

Limits detail view UI

We need a widget at the bottom of the editor viewport where users can display the current count towards the parcel limits. The count should be displayed in <metric>: x/y format as in "Materials: 5/10" and a link to the docs should be displayed after the list.

Disable editor update flickering

Obtain scene limits from client

The client should expose a way to consult material/triangle/etc usage on demand.

Disable unnecessary preview features

We need to disable:

• Metamask requirement
• FPS meter overlay
• Metrics overlay

Editor interoop enhancements

We should optimize the mappings sent to the editor, we are sending all of them when only a few are needed.

We should optimize the js code generation, creating randomly named variables is good enough but we can use an array and be sure that we will never have naming collisions. Also we should only use ES5 syntax.

Project card thumbnails

Toggle colliders view

There should be a button to toggle/display colliders

Decoration Palette

There should be a palette where decorative items packs can be displayed based on their category and searched based on their tags (may be name as well?).

Report height metric