Why does a method return an object instead of the data?

Let’s say that I fire an event and it has to returned me some data, I called that method from another script but instead of returning the data (json or string to make tests), returns me an object.

My method in A script

SomeScript.prototype.test = function()
{
    var data = {"SomeItem" : "SomeVal"};
    return data;
};

Script B

SomeScript.prototype.someMethod = function()
{
  var app = this.app;
   var test = app.fire('scriptA:test');
   console.log(test);
};

The result I got:

Instead of: {"SomeItem" : "SomeVal"};

The fire function returns an event handler, not the value you are thinking of (https://developer.playcanvas.com/en/api/pc.EventHandler.html#fire)

What are you trying to do?

Oh! Now I understand!
It’s supposed I have to create a self hosted script inside the index.html of the playcanvas project. Then, I have to call a method that it’s inside the playcanvas project due to we’re going to loading and also getting data from it.

Just to get the full context, what’s the reason for needing code in the index.html? What loading data do you need? Would it be easier to create DOM objects as part of the PlayCanvas project itself instead?

That could it be a good insight, the reason that we wanted to create code outside the playcanvas it’s because we will add our playcanvas project inside a selfhosted project in which we want to load all the assets from a JSON and also we want to get the interactions that the user will have (collisions with certain objects). Sorry for my misspelling and I will learn more about how it can be done, I am new in playcanvas haha.

That sounds like you want to interact with the PlayCanvas app via DOMs on the HTML page?

If that is correct and the app is not iframed, just a canvas DOM object, you can access the entire applications via pc.Application.getApplication() and fire events, find entities etc via it.

Eg.

var app = pc.Application.getApplication();
app.fire('user:buttonpressed', someData);

// Or to get an entity by name
var cubeEntity = app.root.findByName('Entity name');
cubeEntity.setPosition(0, 0, 0);

If can also do the inverse and have the HTML JS code listen for events on the pc.app object or have PlayCanvas look for the DOMs on the page and interact directly.

Yeah, sounds like you want to fire events in both directions, that would look something like this:

Outside PlayCanvas

pc.Application.getApplication().on('listenToPlayCanvas', function(data) {
    console.log('object from PlayCanvas:', data);
    pc.Application.getApplication().fire('talkToPlayCanvas', { more: data });
});

Inside PlayCanvas script

someScript.prototype.initialize = function() {
    this.app.on('listenToVanillaJS', function(data) {
        console.log('object from Vanilla JS:', data);
        this.app.fire('talkToVanillaJS', { evenMore: data, privateObject: this.entity });
    }, this);
};
1 Like

Sorry to bother you, I was trying your example and I have nothing printed in the console, can you give me some feedback?

Outsite PlayCanvas

Inside PlayCanvas


this.app.on('colliders:test', this.test);

image

You’re code looks good to me. I think what might be happening here is you’re creating the .on event handlers before the PlayCanvas app is ready. Maybe if you stick that code inside window.addEventListener('load', function() { /* put the event handlers in here */ });, that’ll give PlayCanvas enough time to initialize and be ready to setup those event handlers. If that still doesn’t work, you could switch that out for maybe a 5-10 second setTimeout just to confirm whether that indeed is the issue.