[SOLVED] PlayCanvas + Angular

Help & Support
1

Hi there

First of all, please forgive my amateurish-ness around the subject, just looking into PlayCanvas for the first time (based on a project a colleague has created). Also, apologies for a potentially long first post!

We are trying to merge a PlayCanvas project into an AngularJS project (which needs to work in PhoneGap, no less!) I have been able to get the project to initialise by including the start and load files into my Angular Controller, but I now need to try to pass arguments to the app, which is where I am stuck

From my debug console I an access the PlayCanvas object, but don’t know the structure to be able to access the object I need. The object I need to get to has been created via the following:

pc.script.create('GameManager', function (app) {
/** code goes here **/
})

Now, within this object the basic arguments are being set i.e. this.option = ‘123’. What I was wondering is, from my Angular controller, can I modify these arguments? I believe it’s possible to pass data via Javascript, which is fine for me, I’m just not entirely sure what the best way to do it is.

If anyone is able to help I would be immensely grateful. Additionally if I need to give any more explanations please feel free to ask

Many thanks all

2

Since you are hosting the PlayCanvas application yourself and you are not using an iFrame to embed a published link, it means you have access to the engine so you can do:

var app = pc.Application.getApplication();

to get the ‘app’ that is passed to all the scripts. From that point on you can do whatever suits you best. For example you can find the Entity that has the GameManager script by doing something like

app.root.findByName('GameManager).script.GameManager

or you can also use events to decouple the logic from each individual class. For example you could raise events on the app from your site like so:

app.fire('site:event1', arg1, arg2, ...)

and in your scripts catch it like so:

app.on('site:event1', function (arg1, arg2, ...) {}, this);

and vice versa you can raise events from your scripts on the app and catch them from your site if you need communication from the PlayCanvas app to the site.

3

@vaios

You are an absolute star - in my console I can use those properties to read and write the relevant init values, so I’m halfway there!

Forgive me, but I’m not finished yet! My next question is, where best to place the logic? I need to alter the arguments before the animation begins, however I can only seem to access the object once it has rendered, i.e within the pc.on(‘start’) event

Do you know if it’s possible to alter the object within the preload callback, or even before that, when I create or configure the pc.Application object?

Thanks again, really appreciate your help here

4

Can you be a little more specific as to what you are trying to achieve?

Basically the initialize method of scripts is called right after the application ‘starts’, so right after we fire the start event on the app.

But it would help to know the use case here maybe it’s something simple you want to do.

5

Hi @vaios

Thanks again for taking the time to help out here

Basically, we have a lotto style app where a number of winners are picked via a server side call that we have

So, say for example we are running a game, I need to make a call to our API server to select some random winners, and then pass data from that AJAX call as arguments of the GameManager controller.

To try and give a more basic example of what I want to achieve, here is something I need to update:

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

        this.winnerBallsCount = 3;
        ....
    }
}

What would be great would be if I could alter the value of winnerBallsCount before the configuration is loaded into the canvas.

Hopefully that’s a clear enough explanation? Again, many thanks for your help!

6

Why not store results somewhere globally, and from initialize access those results? :slight_smile:

7

One thing you could do is have an object with various initialization options that you can construct however you want e.g by making a server API call:

pseudocode:

Ajax('api/service', function (result) {
    var config = {
        winnerBallsCount: result.winnerBallsCount
    };

   // initialize app here
})

So basically you could delay the construction and initialization of the playcanvas application until you have all the data necessary. The code that initializes the application is inside the start.js file which you can alter to your liking.

If you don’t necessarily need to have that data before you initialize the app you could get them from the server and raise an event on the PlayCanvas app which can be handled by your scripts. e.g.

var config = {
   winnerBallsCount: 3
};

app.fire('lotto:init', config);

And in your GameManager script

pc.script.create('GameManager', function (app) {
    var GameManager = function (entity) {
        app.on('lotto:init', function (config) {
             this.setWinnerBallsCount(config.winnerBallsCount);
        }, this)
    }
    
})

Basically once you know the order in which things are initialized you can use your imagination to figure out how and when to set properties on your scripts.

If you don’t need data from your server initially you could store them in a global object like the PlayCanvas application or another object on the window and access that object from your scripts.

8

@max - you know what, the simplest solutions are always the best! Doing my AJAX call and then setting those results as variables has worked - a case of me overthinking it of course! Thanks so much for the nudge

@vaios - Again, thanks for you help here - I will probably constuct the config option as suggested then pass that to the GameManger

Thanks both for your help!

1 Like