Getting Started Tutorial


Nesting Entities Using a Solar System


30 minutes

Posted on: October 9, 2017

Learn Sumerian
Nesting Entities Using a Solar System

Tags

entities
transformation
state machine
after effect
bloom

In this tutorial you will learn about:

Adding and transforming entities
materials
state machine
hierarchy
after effects

In this tutorial, we make a solar system by using the State Machine and the hierarchy system in Sumerian. We describe the relationship between child and parent entities, inherited Transformation, and local and global coordinates.

You’ll learn about:

  • Adding and transforming entities
  • Materials
  • State Machine
  • Nesting hierarchy
  • After effects

This is the scene we will build in this tutorial. For best results, be sure you are using the latest version of your browser.

Prerequisites

Before you begin, you should have completed the following tasks and tutorials:

Download the following image assets::

Step 1: Create a New Scene

  1. From the Dashboard, create a scene using the Empty Scene template. This scene will only come with a Camera.
  2. Rename the scene “Solar System”.

Step 2: Add Three Spheres and the Light of the Sun

The three spheres we will add will represent the Sun, Earth, and Moon.

  1. To add a sphere, choose the Create Entity button at the top of the interface, and then select Sphere.

  2. This will be our Sun entity, so let's rename the entity “Sun”. To rename an entity, choose the first tab in the Inspector panel, in this case Sphere, and then give it a new name.

  3. Open the Geometry component. To make the edges smoother, increase the X Samples and Y Samples to 64.

  4. Now add the Earth by adding another Sphere. Rename it “Earth”.

  5. Under the Geometry component, again increase the X Samples and Y Samples to 64.

  6. Change the Transform component settings, and then set the X Translation to 5 and Scale for X,Y,Z to 0.4.

  7. To add the Moon, add another Sphere, rename it “Moon”, and increase the Geometry X Sample and Y Sample to 64. Then go to the Transform component settings again and set the X Translation to 3 and Scale X,Y,Z to 0.1.

    Note: The Moon will appear to be very close to the Sun. Once we nest the Moon as a child entity to the Earth entity, it will look correct again. We nest the entities as one of the last steps in the tutorial.

  8. Next, we add a Point Light entity to make the Sun appear to shine light on Earth and the Moon.

  9. To add a Point Light, create a new entity and select Point. This new light will be inside the Sun because they both have the same Translation coordinates (0, 0, 0). But it will shine through the Sun entity onto the Earth and the Moon.

  10. Change the Intensity of the light to 3.

Step 3: Add Materials

To make the Sun, Earth, and Moon look realistic, we're going to use Textures, which you downloaded at the beginning of this tutorial. To assign the Sun Texture in the material settings, do the following.

  1. Choose the Sun entity.

  2. Open the Material component, and then expand the Color (Diffuse) property.

  3. Drag the sun.png file onto the color Texture input.

  4. Repeat this step for the Earth and the Moon entities using their respective texture images, which you downloaded at the beginning of this tutorial.

Note: If you have trouble selecting the Moon entity, remember that you can always select an entity using the Entities panel to the left.

Notice that the Sun looks pretty dark. To make our Sun entity look more like a Sun, do the following:

  1. Expand the Emissive property in the Material component, and change the color to #fff966.

  2. Expand the Ambient property and change the color to #f9ff21.

  3. Also, the Earth has a reflection from the light. Because this doesn’t look very realistic, change the Specular property in the Material component of the Earth entity and change the color to black (#000000).

Step 4: Adding a Rotation to the Spheres

To rotate the Earth around the Sun and the Moon around the Earth, we use the State Machine. First, we add rotation to the Sun.

  1. Select the Sun in the Entities panel or choose it in the scene. Add a component and select the State Machine Component.

  2. In your new State Machine component, add a new Behavior (click the + button).

  3. Select State 1, and change the name to “Rotate.”

  4. Choose Add Action. Search for and then add the Rotate action.

  5. Change the Y value to 20. This value is the amount of degrees the entity rotates per second around the Y axis.

  6. Press the play button at the bottom of the canvas to see what happens. If you zoom in on the Sun, you can see that it rotates.

Now we add rotation to the Earth by reusing the rotate behavior that we made for the Sun.

  1. Select the Earth entity in the Entities panel or choose it in the scene.

  2. Add a State Machine component.

  3. Instead of making a new Behavior, we drag the behavior we've made for the Sun from the Assets panel (panel in the bottom left corner) to the Drop behavior input. Because we never changed the name, it is named “Behavior.”