Initialising Script Files

SJay_747 · December 29, 2016, 9:20pm

Hello

I am new to the playcanvas environment. Recently I have started watching tutorials on YouTube, trying to learn how to use the environment.

I was making good progress until I came onto script files. I am having issues getting the script files to run on my own projects.
Here is a run down and an example of what I am doing:

Creating a new project and adding a cube to the middle of the canvas.
Adding a script component to the cube in the Hierarchy section.
Adding a script titled “move.js” to the cube.
Typing in the following code (which I acquired from this tutorial -> https://www.youtube.com/ watch?v=VpJxc_iRmeM):

pc.script.create(‘move’, function (app) {
// Creates a new Move instance
var Move = function (entity) {
this.entity = entity;
};

Move.prototype = {
// Called once after all resources are loaded and before the first update
initialize: function () {
},

// Called every frame, dt is time in seconds since last update
update: function (dt) {
if(app.keyboard.isPressed(pc.i nput.KEY_RIGHT)){
this.entity.translateLocal(0.1 ,0,0);
}

if(app.keyboard.isPressed(pc.i nput.KEY_LEFT)){
this.entity.translateLocal(-0. 1,0,0);
}

if(app.keyboard.isPressed(pc.i nput.KEY_UP)){
this.entity.translateLocal(0,0 .1,0);
}

if(app.keyboard.isPressed(pc.i nput.KEY_DOWN)){
this.entity.translateLocal(0,- 0.1,0);
}
}
};

return Move;
});

I am then launching the project and the tutorial says that while pressing the arrow keys the cube should move however nothing is happening.

I have tried to run several script files on different elements and nothing is working. I am launching the programs and then opening my Google Chrome navigator to see what files are running on the page and none of my script files are running.
I am following the exact instructions given on tutorials on your site as well as the YouTube video; could you please explain what could be the potential problem or even have a look at my public project to see what is going on? Here is a link to my project -> https://playcanvas.com/ project/447098/overview/move

I am very eager to get rolling and adding script files to my environment and really appreciate your time and insight and look forward to hearing back from you guys!

Thank you so much,
Suraj Tirupati

steven · December 30, 2016, 4:20pm

It looks like that tutorial series is using the old scripting system (legacy) rather than Scripts 2.0. We have a series of tutorials, sample projects and the User Manual on our own website which you can find here.

I’ve converted that script to the new scripting system for you to get you started:

var Mover = pc.createScript('mover');

Mover.prototype.initialize = function () {
};

// Called every frame, dt is time in seconds since last update
Mover.prototype.update = function (dt) {
    var app = pc.app;
    
    if (app.keyboard.isPressed(pc.KEY_RIGHT)) {
        this.entity.translateLocal(0.1, 0, 0);
    }

    if (app.keyboard.isPressed(pc.KEY_LEFT)) {
        this.entity.translateLocal(-0.1, 0, 0);
    }

    if (app.keyboard.isPressed(pc.KEY_UP)) {
        this.entity.translateLocal(0, 0.1, 0);
    }

    if (app.keyboard.isPressed(pc.KEY_DOWN)) {
        this.entity.translateLocal(0, -0.1, 0);
    }
};

SJay_747 · December 30, 2016, 11:54pm

Hi,

I used the code that you gave me and added to a cube that I created in my environment however nothing happened when I pressed the keys?

What could be the problem? Does the code work for you when you add it to an element?

steven · December 31, 2016, 12:20am

As you have copied the code into an existing javascript file, you need to parse that file for it to be used in the editor as at the moment, it still thinks there is script object called ‘move’

Select the move.js file in the assets pane and in the inspector pane on the right, there should be a ‘parse’ button (1).

The scripts listing should change from ‘move’ to ‘mover’ (2) (‘move’ is reserved in the engine hence the name change on my part).

.

Then reselect the box entity and you will find a red ‘!’ on the ‘move’ script (3) as it now no longer exists. Remove it and add the ‘mover’ script (4)

SJay_747 · January 19, 2017, 11:25pm

Hello again,

So I did what you told me on the file that I posted and it worked so thank you for that.

Through analysing the code that you sent me and comparing it to the original; I tried to convert some other code I found online that was using the old scripting method. The code is designed to make a ball roll smoothly (I found it on the tutorial demo project).
Here is the code that I found:

pc.script.create(‘movement’, function (app) {

// Creates a new Movement instance
var Movement = function (entity) {
    this.entity = entity;
    this.force = new pc.Vec3();
};

Movement.prototype = {        
    // Called every frame, dt is time in seconds since last update
    update: function (dt) {
        var forceX = 0;
        var forceZ = 0;
        
        // calculate force based on pressed keys
        if (app.keyboard.isPressed(pc.KEY_LEFT)) {
            forceX = -this.speed;
        } 
        
        if (app.keyboard.isPressed(pc.KEY_RIGHT)) {
            forceX += this.speed;
        }
        
        if (app.keyboard.isPressed(pc.KEY_UP)) {
            forceZ = -this.speed;
        } 
        
        if (app.keyboard.isPressed(pc.KEY_DOWN)) {
            forceZ += this.speed;
        }
                    
        this.force.x = forceX;
        this.force.z = forceZ;
        
        // if we have some non-zero force
        if (this.force.length()) {
            
            // calculate force vector
            var rX = Math.cos(-Math.PI * 0.25);
            var rY = Math.sin(-Math.PI * 0.25);
            this.force.set(this.force.x * rX - this.force.z * rY, 0, this.force.z * rX + this.force.x * rY);
            
            // clamp force to the speed
            if (this.force.length() > this.speed) {
                this.force.normalize().scale(this.speed);
            }
        }
        
        // apply impulse to move the entity
        this.entity.rigidbody.applyImpulse(this.force);
    }
};

return Movement;

});

Through trying to copy what you did with the files I sent you I came up with this;

var Movement = pc.createScript (“Movement”);

Movement.prototype.update = function(dt) {        
    // Called every frame, dt is time in seconds since last update
    
        var forceX = 0;
        var forceZ = 0;
        
        // calculate force based on pressed keys
        if (app.keyboard.isPressed(pc.KEY_LEFT)) {
            forceX = -this.speed;
        } 
        
        if (app.keyboard.isPressed(pc.KEY_RIGHT)) {
            forceX += this.speed;
        }
        
        if (app.keyboard.isPressed(pc.KEY_UP)) {
            forceZ = -this.speed;
        } 
        
        if (app.keyboard.isPressed(pc.KEY_DOWN)) {
            forceZ += this.speed;
        }
                    
        this.force.x = forceX;
        this.force.z = forceZ;
        
        // if we have some non-zero force
        if (this.force.length()) {
            
            // calculate force vector
            var rX = Math.cos(-Math.PI * 0.25);
            var rY = Math.sin(-Math.PI * 0.25);
            this.force.set(this.force.x * rX - this.force.z * rY, 0, this.force.z * rX + this.force.x * rY);
            
            // clamp force to the speed
            if (this.force.length() > this.speed) {
                this.force.normalize().scale(this.speed);
            }
        }
        
        // apply impulse to move the entity
        this.entity.rigidbody.applyImpulse(this.force);
    };

Whenever I parsed this file and added it to the ball entity in my own code it does not work and when I launch the project I get the following error at the bottom of the screen:

Can you advise me on what I am doing wrong?
Is my fundamental understanding of converting the scripting style wrong?
Also by removing the following lines from the original code how does the script know to execute the code on the entity I attach it to?

var Movement = function (entity) {
    this.entity = entity;
    this.force = new pc.Vec3();
};

Thanks so much.

steven · January 20, 2017, 11:44am

Two issues of the code from what I can see:

            forceZ += this.speed;
        }

App is no longer a global variable in the new scripting system IIRC. Change this (and other lines to):

        if (pc.app.keyboard.isPressed(pc.KEY_DOWN)) {
            forceZ += this.speed;
        }

Tutorials on input will help more in how some of this works: http://developer.playcanvas.com/en/tutorials/?tags=input

You don’t have this.force defined in the script. So you will need to define this in the initialize function of the script similar to how the old scripting system did on the constructor.

Movement.prototype.initialize = function() {        
    this.force = new pc.Vec3();
}

Refer to the user manual on scripts for more information: http://developer.playcanvas.com/en/user-manual/scripting/anatomy/

The new scripting system assigns the entity automatically when it gets created at runtime.