About

CREY is a creative platform where you can create and play games.

With the goal of making game development become easy and accessible to everyone, CREY provide a set of tools which helps user create their own game, without have to touch a line of code.

Joining as Front End Developer at CREY, my responsible were developing, managing and driving features.

Developing

Developing tasks could range from the official website to the CREY Engine UI.

We used React.js for UI development. To make it possible on the CREY C++ Client, we used CEF (Chromium Embedded Framework) to have a layer of JS Frontend, on top of the C++ enviroment. Similar approach also being used by Riot Games, in League of Legends. The advantage are the possibility of using CSS for styling the UI, and other frontend can share the same UI codebase, for example, Design System.

In-Game UI: In order to reflect frequent C++ Client data changes, the UI needs to be developed in such a high performance way. Otherwise, the whole UI will get re-rendered on every frame, results in poor performance. Therefore, knowing all React.js optimizing method is necessary in this case.

Achivements

Problem: There was a re-rendering issue in the core of the UI codebase, presists for more than 1 year. Tons of unecessary UIs re-render happens across the Client, some on every frame, causing the performance to be poor. This blocked some features like complex UI animations, due to the frame drop.

Solution: After few days of digging deep into the code, trial and errors, drawing structure, I managed to find the actual root cause of the issue. It happens at a custom hook, where it use useSelector() to receive specific state from a store. And instead of subscribing to the specific state only, the code subscribe to the whole store itself. This causes the component which received not frequently updated state to re-render whenever the store is updated, which is frequently. Changing to the specific state and some useMemo to seperate child component from parent re-render cycle should improve the performance.

Result: The performance improve significantly by 25-50% (re-render times), across every UI. Complex animation can now be ran smoothly, similar to controled browser enviroment. Contribute to the revamped Loading Screen.

Tech Stacks: