1.1 Hello Cube MagicScript

Hello Cube with MagicScript logo

Now that you have your MagicScript environment setup, you can create your first MagicScript app. The MagicScript CLI Tool includes a process, magic-script init, which creates a pre-configured project for MagicScript apps. Let's look at what options are available and then create a Hello Cube app.

Pre-requisites

MagicScript Setup

MagicScript Project Setup

When magic-script init is run, the following prompts will appear:

  1. What is the name of your application? The name displayed on Magic Leap Launcher (60 character limit).
  2. What is the app ID of your application? The unique, lower-case, alpha-numeric ID for your app. No spaces or special characters. Suggested format: com.<yourcompany>.<appname>
  3. In which folder do you want to save this project? Specifies the name for the new folder created in your current directory. This folder contains the project's files
  4. What app type do you want? Options are Landscape, Immersive, and Components. Landscape and Immersive options create a MagicScript application, and Components creates a MagicScript Components Landscape application.
  5. What platform do you want to develop on? This prompt is only for the Components app type. Multiple options can be selected. Options are Lumin, iOS, and Android
  6. Use TypeScript? TypeScript is a strict syntactical superset of JavaScript that adds optional static typing to the language. Options for the prompt are Y (Yes) or N (No)

Important App Files

The following files appear in the MagicScript project:

lumin/app.package

The .package file is used to package your app. The file is used by mabu to lay out executable and data files and create a signed package. Packages are the main method of installing apps on devices.

Note: The app.package file is used to build your app. If you want to rename your output, you can either rename the app.package file or add OUTNAME = newName to the .package file.

lumin/manifest.xml

The manifest declares all components in your app and your app's metadata, including all privileges required by your app. If your app needs additional privileges, update the manifest file. See Declare your manifest for more information.

Note: Including privileges in the manifest file does not automatically grant them to your app. Some privileges require your app to explicitly request users to enable them. See Privileges for more information.

lumin/src/main.js

This file is required to build an app successfully using the magic-script build command. Here you can specify the size of your app's space, called a prism.

Hello MagicScript Cube

Let's create a Hello Cube app with MagicScript Components.

  1. In The Lab, open the Activity Bar and select the CLI link ( >_ ). A command-line environment will open!

    Expand the Action Bar and then select the command-line icon

  2. In the command line session navigate to the directory where you want to create the application folder.

  3. Enter in the command line:

    magic-script init

  4. Respond as follows to the prompts:

    1. What is the name of your application? Hello Cube
    2. What is the app ID of your application? com.<yourcompany>.hellocube
    3. In which folder do you want to save this project? helloCube
    4. What app type do you want? Components
    5. What platform do you want to develop on? (Press <space> to select, <a> to toggle all, <i> to invert selection) Lumin
    6. Use TypeScript? (y/N) n
  5. Download the MagicScriptCube.glb file and place it in the newly created helloCube/assets folder.

  6. The default generated MagicScript Components application is setup to show text. Let's change the text component to a 3D model component. For a list of all supported components, see http://components.magicscript.org/docs/components. Open the helloCube/src/app.js file in an editor and modify it as follows:

    1. Delete the Text component in the render method and add a Model component. Point the model path to the cube that was just added in the helloCube/assets folder. Change your render function to look like this:

      render () {
      return (
      <View name="main-view">
      <Model modelPath={require("../assets/MagicScriptCube.glb")}
      ></Model>
      </View>
      );
      }
    2. Change the import statement from import { View, Text } to:

      import { View, Model } from 'magic-script-components';
  7. In the command line session, navigate to the app folder, helloCube, and build the app using the command:

    magic-script build

    The default target for MagicScript is for the Magic Leap device. To target the Simulator without a device, go to the next section

  8. Attach your Magic Leap device to your computer with a USB cable. Enter the following command in the command line session to install the application on device:

    magic-script build -i

  9. Launch the Hello Cube application in the device.

This displays a 3D cube where all faces of the cube are the MagicScript logo.

Hello Cube with MagicScript logo