So, I am new to making games with Playcanvas (and Javascript), so this is probably a stupid question. I am attempting to make a simple game where you are a green box trying to not get hit by the red boxes. I am trying to implement some sort of game over screen when you are hit by a red box. I currently have all of the enemies tagged with, “Enemy” and in my player collision script I am attempting to differentiate collisions from entities with this tag and those without. If it has that tag, then it switches over to the game over screen. Here is my code for my player collision:
var PlayerCollision = pc.createScript('playerCollision');
PlayerCollision.attributes.add("sceneName", {type: "string", default: "GameOver", title: "Scene Name to Load"});
// initialize code called once per entity
PlayerCollision.prototype.initialize = function () {
this.entity.collision.on('collisionstart', this.onCollisionStart, this);
};
PlayerCollision.prototype.onCollisionStart = function (result) {
if (enemies.includes(other)) {
var self = this;
setTimeout(function (){
self.loadScene(self.sceneName);
}, 1);
}
};
PlayerCollision.prototype.loadScene = function (sceneName) {
var enemies = pc.node.findByTag("Enemy");
// Get a reference to the scene's root object
var oldHierarchy = this.app.root.findByName ('Root');
// Get the path to the scene
var scene = this.app.scenes.find(sceneName);
// Load the scenes entity hierarchy
this.app.scenes.loadSceneHierarchy(scene.url, function (err, parent) {
if (!err) {
oldHierarchy.destroy();
} else {
console.error(err);
}
});
};
My problem is that when I start the game it instantly changes the scene without the player colliding with a red box. I think that it is detecting the collision with the floor, however it does not have an enemy tag. Please help! Here is a link to my project: My project. Thanks in advance.
Hello @Magifire and welcome!
From taking a look in your project I can address some issues:
- You need to attach PlayerCollision.js script in an entity, for it to work.
- If you do that, you will see an error “enemies is not defined”. This is because your’re declaring enemies variable inside a function. In this case you cannot reference this variable outside of that particular function. For further reading take a look here: https://www.w3schools.com/js/js_scope.asp
Instead, you can declare a global variable, available all over the script like this:
this.variable = "test variable";
- Instead of
var enemies = pc.node.findByTag("Enemy"); try and replace it with this.enemies = this.app.root.findByTag("Enemy"); . This will make it available in all script methods.
I would advice you to take some Javascript tutorials and study how Object Oriented Javascript works. It will help you a lot in understanding how Playcanvas works.
You can also, take a look at public projects other Playcanvas Developers make. That way you can learn the best practices and how scripts and scenes are being structured.
Thanks for the help. I will try this right away and look into object oriented programming a little further. Thanks again!
1 Like
Okay, I have tried out the code using your guidelines. I know that it was specific to that function, I was hoping for some help with that 
The goal of the script that I am using is to put all entities with the tag enemy into an array. Then on collision it would check that array and see if the collided entity is in that array, meaning it has that tag. If so, then it would send you to the game over screen. The reason the variable wasn’t declared at the top of the script was because of it having to do a process to get the information instead of just calling the information. This would require me to hard code in the list of entities, which is not efficient. In the if statement I was trying to see if the entity had that tag using the .includes() method. However, my script does not recognize this method. Is this method just not supported? Or am I using it wrong? If so, how would I use it to help me in this situation, or should I take another approach on this problem? Thanks in advance.
1 Like
I made some corrections and adjustments to your code and it’s working. Here is the code:
var PlayerCollision = pc.createScript('playerCollision');
PlayerCollision.attributes.add("sceneName", {type: "string", default: "GameOver", title: "Scene Name to Load"});
// initialize code called once per entity
PlayerCollision.prototype.initialize = function () {
this.enemies = this.app.root.findByTag("Enemy");
this.entity.collision.on('collisionstart', this.onCollisionStart, this);
};
PlayerCollision.prototype.onCollisionStart = function (result) {
if (result.other.tags.has("Enemy") === true) {
var self = this;
setTimeout(function (){
self.loadScene(self.sceneName);
}, 100);
}
};
PlayerCollision.prototype.loadScene = function (sceneName) {
// Get a reference to the scene's root object
var oldHierarchy = this.app.root.findByName ('Root');
// Get the path to the scene
var scene = this.app.scenes.find(this.sceneName);
// Load the scenes entity hierarchy
this.app.scenes.loadSceneHierarchy(scene.url, function (err, parent) {
if (!err) {
oldHierarchy.destroy();
} else {
console.error(err);
}
});
};
I’ve also added 2 more controllers into the player movement script so I can move the player forward so it will be able to collide with the enemies and test the code.
1 Like
Instead of .includes() I used has() method from Playcanvas api:
https://developer.playcanvas.com/en/api/pc.Tags.html#has
Thanks so much! I had the enter button have the enemies move toward you, sorry for not explaining .
1 Like
@Leonidas Could you put a link to the project you worked on so I can study it further?