The mml editor tour

1 - Elements Panel - Allows you to drag and drop MML elements into the scene

1.1 - Assets Panel - A tab next to the scene panel. This allows you to manage all the assets in you MML scene.

2 - Hierarchy View - A text representation of all the elements in the scene

3 - Editor Window - A window to edit the scene using

4 - Code Window - A window to edit the scene via code and add logic to the scene

5 - Debug Window - A window that displays any debug information from the play scene

6 - Play Window - A live view of your MML scene. This is what would be rendered in experience.

7 - Element Inspector - A visual inspector to edit an MML elements

Elements Panel

With these panels, you can easily see all the MML elements you can add to the scene. For example, if we click the cube button, we will add a cube element to the scene.

This is normally a good place to start when making something new

Assets Panel

The assets panel shows all the assets associated with your project. You can use this to manage the GLB files you will use for your MML scene. When you have uploaded an object, you can drag it into the scene. It will then be created as an m-model element.

Hierarchy View

The hierarchy view shows all the elements in your MML scene. You can use this to select objects and create sub hierarchies. When an element is a sub-element of another, it will move in relation to it. This is similar to a game engine such and Unity or Unreal. For example I have added a cube to the scene and dragged it to be a sub item of the model in the scene. Now when I move the model the cube will also move.

This is reflected in the code window, with the cube nested in the m-model element, similar to how you would see it in a HTML webpage.

This concept is useful for creating hierarchies of things that should be associated and moving around the scene together.

Editor Window

The editor window is where you can visualize and edit with your scene. You can select the elements in the scene to edit their properties with the element inspector. You can also move objects around the scene; if you select them, you will see gadgets to move the elements. These work similar to game engines or 3d editor tools.

Code Window

The code window allows you to edit the scene through code. The language we use is MML which is very similar to HTML using tags and javascript.

Here we have added a small amount of javascript to rotate the cube when we click it. You can learn more about using MML in this guide or by looking at the MML resources or going to the MML website.

Debug Window

The debug window will displays any errors or console output linked to your scene. This is used for debugging a scene through console prints and errors. You use this as you would a normal web browser console (eg using console.log()).

For example the code above we have added a console.log statement when we click the cube.

<m-model src="https://mmlstorage.com/c448d8059fbd074c31de266a4432c3e9a1acb95d6f3ba4d8662ec81606020172" x="1" y="2">
  <m-cube id="cube" y="3" onclick="spinCube()" color="#d80e0e"></m-cube>

</m-model>

<script>
  let counter = 1;
  // Let's make the cube spin
  function spinCube() {
    // Gets the cube object based it's id
    console.log("you clicked the cube")
    const cube = document.getElementById("cube");
    // Sets the  cube objects ry value (changes it's rotation). This will spin it by 36 degrees each time we click it
    cube.setAttribute("ry", (counter / 10 * 360) % 360);
    counter = counter + 1
  }
</script>

We can then click the cube in the play window. Which will output it to the console:

Play Window

The play window renders your scene as a client would see it. This means that if it were viewed in a web browser or in an experience, this is what it would look like. You can also test interactions by clicking on elements in this scene. This view has a floating camera, which you can move with WASD and rotate by left-clicking the mouse.

Element Inspector

Once you have selected an element in the editor window, you can modify its properties with the inspector. This shows all the properties of the MML elements in a visual way. It's very useful if you don't remember a specific code tag or want to edit the scene in a more visual way.

Here we have edited the color of the cube by clicking the color element and selecting the red color. There are many tags which can be seen in the MML Reference Docs.