I was wondering how I could change the text of each of the labels from chrome console?
I have been trying a variety of methods but not having any luck.
// For example:
sphere = pc.app.root.findByName(“Sphere”)
//or
label = pc.app.root.findByName(“Label”)
// Then
sphere.children //Trying to find the child label of the sphere
//or
pc.app.scripts.list()
I can get this working inside the PC editor online but I am developing an interface which is external to playcanvas (Loaded into index.html after exporting my playcanvas app) so I need to be able to talk to PC from my GUI and do all the typical PC stuff from say for example an angular GUI.
I even tried using underscore(external JS library) and a map method to recursively loop through every object and print out the keys to try and find the text attribute that I want to change. I wish I could use the docs but they are pretty (un-searchable/un-accessible) to me. I generally find them to be quite useless but am hoping it will eventually click into place once I understand the scope of the PC application better. You devs arent making it easy though I gotta say
Do I need something like this perhaps???
setParameter(“NameofParameterToChange”, “string”, “updated text here”);
Any help would be appreciated. But I would more than anything like the api docs to be laid out in a way that enables me to test things out there and then … like the gold standard “jquery docs”. I can dream right ?
The really frustrating thing is that I can see how incredible this application is but i’m hampered by the inaccessibility despite being a mid level javascript/3d dev with 10 years experience. Doh !
I’ve actually found the docs to be incredibly helpful, so I’m sorry you’ve had trouble! So if I understand you correctly, you know how to change the text via a script, just not when your PlayCanvas app is embedded in its own page, right?
If so, then you’re in complete control of your application. You can keep a reference to the pc/app object so you can use it/find the entities you need. You can see an example of this in the Github examples.
If you’re using the PlayCanvas export to download a copy of your project and run it, you should still be able to find somewhere where it initializes the app (I can’t say off the top of my head what the project structure looks like when downloaded).
I hope this makes sense. If you need any more information or have any more questions I’m happy to help however I can!
Thanks for attempting to help Omar but that did not answer my question. I already know how to do the things in that github example.
My question is this - What is the method/code needed to change the Label which is a child of a Sphere which contains a text attribute from the example link in my original post. From inside chrome dev tools. - https://playcanvas.com/project/344078/overview/howto-canvas-text
I know how to access the playcanvas api/methods/objects/app via “pc.app.root.findByName(“Sphere”)” for example. I know I am in complete control. But there are hundreds of objects that each return hundreds of functions of which many return more. It’s like looking for a needle in a haystack. I am not spending the 2 free hours I have a day looking through a haystack, I have better things to do.
The user manual and the tutorials are brilliant although there could be 100* more tutorials. But the API docs are very inaccessible in my humble opinion. Very frustrating. I am an interface GUI web designer and 3d developer with 10 years experience and unfortunately although I am a mid level javascript person (Angular/VueJS/React/Jquery/Modernizr/Underscore/Lodash ETC ECT) I just cannot wrap my head around the structure of this application to be able to find things. I think it’s clear that this app is far more advanced than anything else I have ever seen i just wish the API docs had more examples or we had more tutorials.
Perhaps you could do a you tube tutorial on how to use the API docs? Or perhaps a PC dev could? The youtube channel hasn’t been used much for months.
So I think the reason you’re having trouble with the docs is that this is not in the docs. This is specific to that project Will made, not a feature of PlayCanvas.
If you look at the project, you’ll see the text.js script has an initialize and an updateText function. This script is attached via a script component to all the label objects.
So what you want to do is grab the sphere pc.app.root.findByName("Sphere") and then find its child label pc.app.root.findByName("Sphere").findByName("Label"). Now access its script component via .script.text (this is a reference to the text script), then change the text attribute on that. Then call the initialize again (I tried just calling the updateText, but the texture doesn’t seem to update properly then). So a full example would be:
var SphereEntity = pc.app.root.findByName("Sphere");
var SphereLabel = SphereEntity.findByName("Label");
var TextScript = SphereLabel.script.text;
TextScript.text = "Hello!"; // This is the text attribute on the text script
TextScript.initialize(); // Re-run the initialize, to recreate the canvas/texture
Does this do what you need to do?
I think to your point, I know this because I’ve seen examples of other projects (not necessarily the docs) accessing an entity’s components by just doing Entity.Component, in this case it was just Label.script. And I know that once you’re on the script, you can access the attributes (which are defined at the top as pc.script.attribute('text', 'string', 'Hello World'); by just doing this.text).
The rest I figured out by looking at the project’s scripts to see how it was rendering the text to figure out how I can update it.
I’m sure the PlayCanvas staff would appreciate any feedback you have on making the docs more user friendly or any missing content to add! (I’ve been meaning to find the time to contribute some topics)
Yes this appears to be exactly what I was looking for. Thank you so much!
I will have a proper look at it tomorrow but it is working after I download wills project and ran your code through and now the text is updating. Superb
And I do understand that will was creating attributes in his text.js script in this line - Text.attributes.add(‘text’, { type: ‘string’, default: ‘Hello World’}); I know how to do that in the online GUI no problem.
And there is a vague explanation in the API docs here but yea as you said, it does not explain how to do what I needed it to do
So thanks for enlightening me on that, much appreciated!
