I made a React TypeScript web game designed for mobile, which includes pages like the main menu, select character, and the core-game page. I also created a core-game project using Cocos Creator 3 and built it as a mobile web app. Then, I used an iframe to integrate the Cocos index.html file into my core-game page in React. However, I noticed that the FPS of the game is not stable and the game lags more when integrated into the React web app using an iframe compared to running it locally on the Cocos simulator. Are there any better way to integrate the Cocos core-game into my react web app?
You are using the best way. The main problem you are encountering is the FPS issue.
Have you tested your game in the browser on your phone?
Yes, when I tested my Cocos core game on a mobile phone browser (without integrating it into a React web app), the game ran fine. The problem only appears when I integrate it into my React web app and run it on a mobile phone. When I run it on a PC, it still runs smoothly. I think the issue might be related to the performance of the mobile device.
I have seen some web games that also integrate the Cocos canvas into a web app like I do, but they don’t need to use an iframe for the injection.
I think it’s related to the iframe in React.
Many h5 games made with Cocos Creator integrated into app using webview are running fine.
So how about checking the iframe you are using in React?
Thank you, I will check it again.
1 Like