Back

First script

Script object

In nunuStudio scripts are written using the javascript language, javascript is the language used for developing web pages and its a easy language to learn, no programming knowledge is required for this tutorial. But I recommend that you learn the basics of programming in javascript before moving on to the next tutorial.

The script object is used to control objects using javascript code, and behave in the same way any other object does, they have a position, scale and rotations, they can have children and be used as a container.

After creating a script object its possible to open the script editor by double clicking the script object in the object explorer (right side). The script editor opens in a new tab. New scripts have a basic code template with spaces to write code.

To allow easier access to program elements, scripts also have access to the following attributes

Script functions

There are some reserved function names, that are used by the nunuStudio runtime to run scripts code. In this tutorial we will be working only with the initialize, update and dispose methods.

Moving an object

To move an object we start by attaching that object as a children of the script object, we can do that by dragging the desired object to the script object, in this tutorial we will use the cube object on the default scene. Lets start by testing the following code

function initialize()
{
	self.position.x += 2;
}

This code will move the cube 2 points in the x axis when the program is started, but, after the object the object is moves it stays static.

To animate an object we can instead move our code to the update method, instead of playing with the object position lets try to change now the object rotation by testing the following code.

function update()
{
	self.rotation.y += 0.01;
}

If everything works as expected you should see the following animation. To try this example in the editor you can download the project file or open it on the Web Editor.

Keyboard and Mouse input

Its possible to use the keyboard and mouse to move objects around. This can be done using the Keyboard and Mouse objects inside scripts. The code bellow rotates an object in the y axis using the mouse delta, and moves the object aroud using keyboard arrow keys.

function update()
{
	self.rotation.y += Mouse.delta.x * 0.01;

	if(Keyboard.keyPressed(Keyboard.LEFT))
	{
		self.position.x -= 0.1;
	}
	if(Keyboard.keyPressed(Keyboard.RIGHT))
	{
		self.position.x += 0.1;
	}
}

If everything works as expected you should be able to move the cube around using the keyboard arrow keys and rotate it using the mouse as shown bellow. To try this example in the editor you can download the project file or open it on the Web Editor.

Getting objects

Its possible to access other objects and resources with scripts, in the example bellow we use the scene.getObjectByName() method to get an object by its name (in this case an object named box), if multiple objects with the same name are found the first one is returned.

Resources are stored in the program, similarly the methods program.getMaterialByName(), program.getTextureByName(), etc can be used to get them, (check the ResourceManager API documentation page for more information).

var object;

function initialize()
{
	object = scene.getObjectByName("box");
}

function update()
{
	object.rotation.y += 0.01;
}

Another way to access objects its by navigating the tree structure, every object has a parent and children, the parent points to the object above and children is an array of all objects bellow.

In the following code we get the first object placed inside the scripts and make it rotate without rotating the script itself. Be careful when accessing children or parent objects directly since it depends on the object placement in the project a change can break the code.

var object;

function initialize()
{
	object = self.children[0];
}

function update()
{
	object.rotation.y += 0.01;
}

DOM Elements

Its possible to attach dom elements to the program created. To do this we can use the division property of the program that gives us access to a DOM division element (parent of the canvas element used to draw content) where we can add HTML elements.

The example below demonstrates how to create a new red division with size 50 x 50 add it to the program and remove it when the program is being closed.

var element = document.createElement("div");
element.style.width = "100px";
element.style.height = "100px";
element.style.position = "absolute";
element.style.top = "0px";
element.style.backgroundColor = "#FF0000";

function initialize()
{
	program.division.appendChild(element);
}

function dispose()
{
	program.division.removeChild(element);
}

Libraries

To add external libraries to your script first you need to import the js file into the project, you can just simply drag the JS source file into the asset explorer or go to Import/Text and select the js file.

After importing the file into the project you can now include it in your script using the include(name) method preferabily at the top of your code. There are multiple include modes available by default the script objects use Evaluate mode the library is evaluated and executed in your script context, the Append mode appends the code of your library on top of your script code, this makes compiling a bit slower but local defined code becomes available to your script. Script mode can be selected in the Script object panel.

include("moment.min.js"); //https://momentjs.com/

var date, hour;

function initialize()
{
	date = program.getObjectByName("date");
	date.setText(moment().format("MMM Do YY"));
	
	hour = program.getObjectByName("hour");
}

function update()
{
	var text = moment().format('LTS');
	if(text !== hour.text)
	{	
		hour.setText(text);
	}
}

function dispose()
{
	delete moment;
}

The code above demonstrates how to use momentjs to display date and time on a text object. The library is available for free at https://momentjs.com/. To try this example in the editor you can download the project file or open it on the Web Editor.