Hi playcanvas community, So as the title suggest i need help merging react code with playcanvas. But first i should explain what I am trying to do.
So I am making a 2d game and its UI is in react, so I have searched over internet a lot but could not find the exact way how to do it. And the project I am working on isn’t completely a game it is mostly a web app with some 2D games implemented in it. So I really need to know the right way to merge the code of both ends.
Hi @Wali_Ahmad,
If you are looking to add a PlayCanvas editor based project to your React codebase, an easy way is to add it as a child iframe and communicate with messages.
Check this manual page for more:
So with messages can I communicate react code with playcanvas, say touch controls for the game??
Yes, exactly, that’s possible.
Well that’s amazing, thanks for your help I’ll try it right away.
I have a question, do we need to have the npm package of playcanvas installed for communication between react and playcanvas???
It depends on your project setup. If you are using the iframe approach, most likely you don’t need it. Since you will be sending raw data messages from the parent page to the iframe.
If you are developing with the engine directly, and not integrating an editor build to your react project, then you most likely need it.
Right, I have worked with the npm approach and it didn’t work out well so I was going to try iframe and was just wondering if npm was required for communication.
Is there any quick demonstration of setting up react context api with postmessage??, I read that you need
to use context api for it
I would search for something like this on Google:
react post message iframe
And here is a result:
Great I just need to figure this out with playcanvas then
Hey yall so itreid iframeing the playcanvas build and it seemed to work but it is giving me this error
Yes, you are trying to iframe the launch url I assume, that won’t work unless you override Chrome security settings (cross domain iframe / same site cookies, not fully sure you will have to try).
You will have to export a build and self host it on the same server where your React code is running to avoid that error.
Can’t really find the settings for chrome, I found to selfhost you need to install python and then point your browser to http://localhost:8000 or whatever domain you want to point to
SO say I download the build and have it host on a localserver what should I pass in the iframe as src???
I imagine something like this, depending on where you placed the files in your local server and your local server run URL and port:
http://localhost:8000/path/to/iframeI tried adding the path of the playcanvas files like this
https://localhost:3000/C:/Users/Asher/Documents/React Apps/React/to/iframe
itt is giving me invalid response
That’s a local disk path, not a valid path your local server can find. Where is your local server running from?
If for example it’s running in your /React/ folder then truncate the url to:
https://localhost:3000/to/iframe
No it is not running from my react folder. Should I be running it from this folder
Okay my head is going bonkers here. Let me just clear what I am doing
My react project is in the “React” folder and so are the downloaded playcanvas files, I set up the localserver for the playcanvas build to localhost3000 same as the react, now I passed this
https://localhost:3000/to/iframe
to the iframe “src” and am still getting the above problem. I am truly confused now.