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 inside a scene using javascript code, it can be found on the 4th category in the tool bar.

Scripts 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 commented.

Scripts have access to the following properties:

Initialization and update

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;
	}
}

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;
}

HTML 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);
}