Downloaded Build into React Component

vacc · March 31, 2021, 3:12pm

Hello,

I’m aware similar questions were asked in the past, but I don’t believe it covers my use case.

I want to integrate a downloaded build PlayCanvas game into a react component.

The tutorial says I need a local webserver to load the index.html file. This is causing some confusion with how to integrate it into a react component.

My question specifically: How to get a downloaded build that can be integrated directly with react componenets.

Thank you in advance!

Leonidas · March 31, 2021, 4:23pm

Hi @vacc,

I haven’t used a build directly in a React component. What I usually do in my React projects is by using an iframe. Check this post, it contains sample code as well:

vacc · March 31, 2021, 6:30pm

hi @Leonidas,

Thanks for the response but I don’t think an iframe would work as I would like to host the PlayCanvas game myself.

Leonidas · March 31, 2021, 6:36pm

Got it, though with an iframe you can host the PlayCanvas build in your project. Download and export the build to a subfolder of your React project, and set a local relative url to the iframe.

vacc · March 31, 2021, 7:08pm

Does that mean the playcanvas subfolder would need to be running in its own webserver as in the tutorial? I’m confused in how to incorporate it as part of the project, and run it when I run the react project.

Also are there any performance considerations with your approach? One reason why I’m shying away from iframes is that the games will be multiplayer, hence the iframe won’t be serving only static content.

Leonidas · March 31, 2021, 7:52pm

Well, the same webserver that will execute your base React index.html can also run the PlayCanvas build files.

I’d say if you are using React for the UI of your game and you will not be exchanging significant amounts of data between React <-> PlayCanvas per frame, there won’t be any performance consideration at all.

If you are still concerned you can use PlayCanvas directly in a React Component. It won’t be easy since you will have to replicate the code that is found in the __start__.js file when exporting a PlayCanvas build. That is the PlayCanvas loader that boots the pc.Application instance.