<commit_before>---
title: getting started
description: 
tags:
    - section
topic: getting started
index: 1
---

# Getting Started

## Your Profile

Once you've signed in you will be greeted with your profile page. Your profile page shows you all the Depots you have access to, this includes all Depots you have created and any that you have been given permission to access.

A Depot is a collection of:

* Packs - An collection Entities used to build up a part of your game. A Pack could be a single level or your entire game. It depends 
* Assets - 3D Models, textures, images, sound files and anything other assets you use in your game.
* Code - Your source code, is provided either as a link to a source control repository, such as Git or Mercurial, or a uploaded folder of code.
* Exports and published apps - Your applications can be exported to archives ready to be deployed, or published directly to PlayCanvas servers.

![Depot List][depot_list]

## Creating a New Depot

On your profile page, press the add button. This takes you to the 'Create new depot' page where you set the details of your new depot:

* Name - The name is used to build the URL for your project. For example, if user 'joebloggs' created a depot called 'spacewar', the depot can be found at http://platform.playcanvas.com/joebloggs/spacewar
* Description - A short description of your project that will appear on the main depot page.
* Website - The site associated with your project. Using the example above, this could be http://www.spacewaregame.com/
* Privacy - The depot visibility. By default, new depots are private (only visible to yourself) but deselecting this option allows others to browse the depot.

On confirming the new depot details, you are taken to the depot home page.

## Adding Collaborators

![Collaborators][collaborators]

PlayCanvas is all about collaborative development. Once you have a new depot, you can start adding additional team members and give them access rights. From the depot home page, select 'Settings'. Under the Collaborators section you can add new team members, enter the e-mail address they use to access PlayCanvas Platform and select the access level you wish to give them. The access levels are:

* Read - The collaborator can load, run and export the contents of the depot.
* Write - In addition to read privileges, the collaborator can edit and save to the depot.
* Administrator - In addition to write privileges, the collaborator can modify the settings of the depot.

Once you have assigned a permission, select 'Add' and the depot will be added to the list of depots on the new collaborator's profile page.

## A Simple Example: Spinning Cube

Now we're ready to build a simple 3D web app: a spinning cube!

The first thing to do is create a new pack. A pack represents the data required to bootstrap the PlayCanvas engine. It could represent an entire game or perhaps a single level of a game. It's up to you, but you will require at least one pack. Therefore, on the depot home page select the 'packs' tab and then select 'New Pack' at the bottom of the pack lister. This opens a new browser tab and fires up the visual editor: PlayCanvas Designer.

Before you can begin editing, you must name the pack. Let's call this pack 'cube'.

### Packs, Entities and Components

A PlayCanvas Pack is effectively a collection of 'things' that make up your app. We call these things Entities and they represent the functional objects in your app: a vehicle, a character, a light, a camera, etc. Entities are shown in the 'Pack Explorer' panel in Designer's interface. It's represented by a tree control because entities are hierarchical. You can parent one to another and if the parent moves, the children move with it.

![Pack Explorer][pack_explorer]

Entities are built from Components. A Component powers an Entity with a particular piece of functionality. For example, a Component can add a graphical model to an Entity, it can animate the model, it can add a light source to an Entity, it can add an audio source, and so the list goes on.

For our spinning cube experiment, we will need 3 Entities:

* A cube.
* A camera (to view the cube).
* A light (to give some definition to the cube).

Here are the steps to create the cube:

* Select the root node 'cube' in the Pack Explorer.
* Select 'New Entity' from the 'Entity' menu. This creates a new child entity of 'cube' in the Pack Explorer.
* Select the new entity called 'Untitled' in the Pack Explorer. This activates the Attribute Editor, allowing you to edit the entity.
* Change the 'Name' field to 'Cube'.
* Select 'Add Component' from the 'Entity' menu.
* Select 'primitive' from the list and hit OK. This creates a 1x1x1 unit box primitive at the location of the entity (the world space origin).

Now let's create the camera:

* Select the root node 'cube' in the Pack Explorer.
* In the 'Entity' menu, expand the 'New ...' submenu and select 'New Camera'. This creates a new child camera entity of 'cube' in the Pack Explorer.
* Select the new camera entity in the Pack Explorer to activate the Attribute Editor.
* Change the 'Name' field to 'Camera'.
* In the Attribute Editor, set 'Translate:' to 0, 0, 5.

Finally, let's create the light:

* Select the root node 'cube' in the Pack Explorer.
* In the 'Entity' menu, expand the 'New ...' submenu and select 'New Directional Light'. This creates a new child Entity of 'cube' in the Pack Explorer with a Directional Light Component added to it.
* Select the new entity called 'Untitled' in the Pack Explorer. This activates the Attribute Editor, allowing you to edit the entity.
* Change the 'Name' field to 'Light'.
* In the Attribute Editor, set 'Rotate:' to -30, 0, 30 to reorient the light.

You should now have someone similar to the following in the 3D View:

<img alt="Cube in 3D View" width="640" src="/media/images/platform/designer_cube.jpg"></img>

### Save your work

Commit you changes to the server by selecting 'Save' from the 'Pack' menu. Or clicking on the disk icon on the toolbar.

### Previewing Your Work

From Designer, you can quickly preview your work at any time. To do this, press either the 'Launch' or 'Launch Local' button (more on these later) on the toolbar. 

![Launch Buttons][launch_buttons]

This will open a new tab and fire up your embryonic web app. Based on the steps above, you should see something similar to what is shown below:

<img alt="Cube in engine" width="640" src="/media/images/platform/designer_cube_preview.jpg"></img>

Once you are done with previewing your pack, you can switch back to Designer and stop your application (the Launch option will display a Stop icon while the app is running).

### Scripting Entities

So far, we've managed to render a cube. Now, let's animate it.

The real power and versatility of PlayCanvas comes from the ability to assign scripted behaviour to individual entities. This is done by assigning a script component to an entity and then specifying the Javascript file that executes in relation to that entity. In order to get the cube to spin, we need to write some code that executes every frame, rotating the cube on its vertical axis by a small amount at a time.

Open your editor of choice and add the following to a file called 'spinner.js':

~~~javascript~~~
pc.script.create("spinner", function (context) {

    var Spinner = function (entity) {
        // Cache the entity that this script instance affects
        this.entity = entity;
    };

    Spinner.prototype.update = function (dt) {
        // Retrieve the transformation matrix of the entity
        var transform = this.entity.getLocalTransform();

        // Create rotation matrix of 1 degree around the y axis
        var angle = Math.PI / 180.0; 
        var axis = pc.math.vec3.create(0, 1, 0);
        var rotate = pc.math.mat4.makeRotate(angle, axis);

        // Pre-multiply the rotation against the entity xform
        pc.math.mat4.multiply(transform, rotate, transform);
    };

    return Spinner;
});
~~~~~~~<commit_msg>Updated getting started code.<commit_after>---
title: getting started
description: 
tags:
    - section
topic: getting started
index: 1
---

# Getting Started

## Your Profile

Once you've signed in you will be greeted with your profile page. Your profile page shows you all the Depots you have access to, this includes all Depots you have created and any that you have been given permission to access.

A Depot is a collection of:

* Packs - An collection Entities used to build up a part of your game. A Pack could be a single level or your entire game. It depends 
* Assets - 3D Models, textures, images, sound files and anything other assets you use in your game.
* Code - Your source code, is provided either as a link to a source control repository, such as Git or Mercurial, or a uploaded folder of code.
* Exports and published apps - Your applications can be exported to archives ready to be deployed, or published directly to PlayCanvas servers.

![Depot List][depot_list]

## Creating a New Depot

On your profile page, press the add button. This takes you to the 'Create new depot' page where you set the details of your new depot:

* Name - The name is used to build the URL for your project. For example, if user 'joebloggs' created a depot called 'spacewar', the depot can be found at http://platform.playcanvas.com/joebloggs/spacewar
* Description - A short description of your project that will appear on the main depot page.
* Website - The site associated with your project. Using the example above, this could be http://www.spacewaregame.com/
* Privacy - The depot visibility. By default, new depots are private (only visible to yourself) but deselecting this option allows others to browse the depot.

On confirming the new depot details, you are taken to the depot home page.

## Adding Collaborators

![Collaborators][collaborators]

PlayCanvas is all about collaborative development. Once you have a new depot, you can start adding additional team members and give them access rights. From the depot home page, select 'Settings'. Under the Collaborators section you can add new team members, enter the e-mail address they use to access PlayCanvas Platform and select the access level you wish to give them. The access levels are:

* Read - The collaborator can load, run and export the contents of the depot.
* Write - In addition to read privileges, the collaborator can edit and save to the depot.
* Administrator - In addition to write privileges, the collaborator can modify the settings of the depot.

Once you have assigned a permission, select 'Add' and the depot will be added to the list of depots on the new collaborator's profile page.

## A Simple Example: Spinning Cube

Now we're ready to build a simple 3D web app: a spinning cube!

The first thing to do is create a new pack. A pack represents the data required to bootstrap the PlayCanvas engine. It could represent an entire game or perhaps a single level of a game. It's up to you, but you will require at least one pack. Therefore, on the depot home page select the 'packs' tab and then select 'New Pack' at the bottom of the pack lister. This opens a new browser tab and fires up the visual editor: PlayCanvas Designer.

Before you can begin editing, you must name the pack. Let's call this pack 'cube'.

### Packs, Entities and Components

A PlayCanvas Pack is effectively a collection of 'things' that make up your app. We call these things Entities and they represent the functional objects in your app: a vehicle, a character, a light, a camera, etc. Entities are shown in the 'Pack Explorer' panel in Designer's interface. It's represented by a tree control because entities are hierarchical. You can parent one to another and if the parent moves, the children move with it.

![Pack Explorer][pack_explorer]

Entities are built from Components. A Component powers an Entity with a particular piece of functionality. For example, a Component can add a graphical model to an Entity, it can animate the model, it can add a light source to an Entity, it can add an audio source, and so the list goes on.

For our spinning cube experiment, we will need 3 Entities:

* A cube.
* A camera (to view the cube).
* A light (to give some definition to the cube).

Here are the steps to create the cube:

* Select the root node 'cube' in the Pack Explorer.
* Select 'New Entity' from the 'Entity' menu. This creates a new child entity of 'cube' in the Pack Explorer.
* Select the new entity called 'Untitled' in the Pack Explorer. This activates the Attribute Editor, allowing you to edit the entity.
* Change the 'Name' field to 'Cube'.
* Select 'Add Component' from the 'Entity' menu.
* Select 'primitive' from the list and hit OK. This creates a 1x1x1 unit box primitive at the location of the entity (the world space origin).

Now let's create the camera:

* Select the root node 'cube' in the Pack Explorer.
* In the 'Entity' menu, expand the 'New ...' submenu and select 'New Camera'. This creates a new child camera entity of 'cube' in the Pack Explorer.
* Select the new camera entity in the Pack Explorer to activate the Attribute Editor.
* Change the 'Name' field to 'Camera'.
* In the Attribute Editor, set 'Translate:' to 0, 0, 5.

Finally, let's create the light:

* Select the root node 'cube' in the Pack Explorer.
* In the 'Entity' menu, expand the 'New ...' submenu and select 'New Directional Light'. This creates a new child Entity of 'cube' in the Pack Explorer with a Directional Light Component added to it.
* Select the new entity called 'Untitled' in the Pack Explorer. This activates the Attribute Editor, allowing you to edit the entity.
* Change the 'Name' field to 'Light'.
* In the Attribute Editor, set 'Rotate:' to -30, 0, 30 to reorient the light.

You should now have someone similar to the following in the 3D View:

<img alt="Cube in 3D View" width="640" src="/media/images/platform/designer_cube.jpg"></img>

### Save your work

Commit you changes to the server by selecting 'Save' from the 'Pack' menu. Or clicking on the disk icon on the toolbar.

### Previewing Your Work

From Designer, you can quickly preview your work at any time. To do this, press either the 'Launch' or 'Launch Local' button (more on these later) on the toolbar. 

![Launch Buttons][launch_buttons]

This will open a new tab and fire up your embryonic web app. Based on the steps above, you should see something similar to what is shown below:

<img alt="Cube in engine" width="640" src="/media/images/platform/designer_cube_preview.jpg"></img>

Once you are done with previewing your pack, you can switch back to Designer and stop your application (the Launch option will display a Stop icon while the app is running).

### Scripting Entities

So far, we've managed to render a cube. Now, let's animate it.

The real power and versatility of PlayCanvas comes from the ability to assign scripted behaviour to individual entities. This is done by assigning a script component to an entity and then specifying the Javascript file that executes in relation to that entity. In order to get the cube to spin, we need to write some code that executes every frame, rotating the cube on its vertical axis by a small amount at a time.

Open your editor of choice and add the following to a file called 'spinner.js':

~~~javascript~~~
pc.script.create("spinner", function (context) {

    var Spinner = function (entity) {
        // Cache the entity that this script instance affects
        this.entity = entity;
    };

    Spinner.prototype = {
        update: function (dt) {
            this.entity.rotate(0, 1, 0);
        }
    };

    return Spinner;
});
~~~~~~~
{'fraction_non_alphanumeric': 0.06136102969287626, 'fraction_numerical': 0.0038231171148209505, 'mean_word_length': 3.9308828149544457, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2201147', 'n_tokens_mistral': 4177, 'n_tokens_neox': 3969, 'n_words': 2480}