Beginner Tutorial


Scripting Basics


10 minutes

Posted on: November 5, 2017

Learn Sumerian
Scripting Basics

Tags

scripting
transformComponent

In this tutorial you will learn about:

Adding script to entity
moving entity by using script

Note: The Amazon Sumerian Scripting API was updated July 2019! While the new preview API is available for use, Sumerian still supports the legacy API. Documentation is available for the preview API and the legacy API. This tutorial uses the legacy API.

In this tutorial, we introduce you to scripting in Amazon Sumerian. You will add a script that will cause a sphere to move back and forth.

You’ll learn about:

  • Adding a script to an entity
  • Move an entity by using a script
  • Script Editor

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

You should have completed the following tasks and tutorials:

What Is Scripting?

Scripting is a method to drive logic using JavaScript. Everything in Amazon Sumerian can be controlled by scripting, whether you’re creating camera controls, lighting, or animations. In fact, within Sumerian, all interactions and actions are built with scripts. Scripting is everything that’s working “under the hood”.

Step 1: Create a Scene and Add a Sphere

  1. From the Dashboard, create a new scene using the Default Lighting scene.

  2. From the Create Entity menu, choose a Sphere entity.

Step 2: Add a Script Component and Add a Script to the Sphere

  1. In the Inspector panel, choose Add Component, and then select Script.

  2. You can see a new Script component tab in the Inspector panel. To add a script to the Script component, click the + button.

  3. You are shown several preset scripts. However, for this tutorial, we want to write our own script. Choose Custom (Legacy Format).

  4. In the Script component, click the edit button (pencil icon) next to the script that you just created. The Script Editor opens.

Step 3: Add Some Code to the Script

The script has three functions in it: setup, update, and cleanup. For our simple script, we only need to worry about the update function. This function is called on every render frame, which is perfect for a simple animation.

  1. Copy the following code into the update function:
    ctx.entity.transformComponent.setTranslation(Math.sin(ctx.world.time), 0, 0);
    

    This line of code sets the X position of the sphere to the sine of the current time. This value will oscillate between -1 and 1 as time goes by, making the sphere entity move back and forth.

  2. Click Save in the Script Editor to save the update.