Recently we released isles to Steam to let developers see what can be built by the engine. At the same time, as engine developers, we can also want to experience the whole process of developing games with Cocos Creator to find out the shortcomings and pain points of the engine and provide a reference for future iterations.
After the game was released, many developers and players told us their experiences and suggestions. This article will share some optimization ideas and methods for your reference.
Forced use of discrete graphics cards
Many windows machines have more than two graphics cards. In some cases, the desktop will automatically select the lower-performance integrated graphics card for the game to play on. In gaming applications, we may want the program to run the best graphics all the time to keep the game smooth.
Since iles and many PC games built-in Cocos Creator are based on electron, we have found some solutions to this issue.
- Set SHIM_MCCOMPAT=0x800000001 [1] in the environment variable. The following is the start.cmd file for iles startup.
set SHIM_MCCOMPAT=0x800000001
cd %~dp0
start ... \... \iles.exe
- Add electron startup parameters [2].
app.commandLine.appendSwitch('force_high_performance_gpu')
Check that chromium on the computer supports version 101.0.4923.0 [3]. Electron corresponds to version 19.0.0 onwards [4].
To check the graphics card information of the machine after booting and whether it uses the correct graphics card, we wrote a test program available for free for reference.
Optimize DrawCall and the number of faces
Sea surface
The whole sea level is a large area, and to ensure that the waves move more naturally, more vertices are needed. Still, we don’t want to use a considerable number of vertices for the whole sea level. In theory, we only need more detail in the nearby areas and can have less detail in the outlying areas.
Based on this thinking, we divide the sea into nine regions. Only the middle part keeps a high vertex count. The surrounding models use less vertex count, but in order to ensure that the vertex animation between regions is perfectly connected, the vertex count of the edges of the high and low models also needs to match perfectly.
Here is the process we used to operate with Blender.
- Add a Mesh → Grid.
- Switch the mode to face edit mode, select a face other than an edge, right-click and select un-subdivide.
You can see that there will be much fewer vertices after the optimization.
Trees
There are a lot of trees all over iles, and the original tree is still modeled with a pretty high verticy count, with about 300 vertices in a tree.
This level above has almost 2000 trees and nearly 600,000 vertices. We added lod support to use a finer lod up close and a rougher lower one at a distance, culling out the rendering of this model at some distance away.
Making a rough version in Blender is relatively simple: select the model, add a Decimate type modifier, and adjust the ratio to reduce the vertices to an acceptable level.
Then wrote a relatively simple lod selector, using lod0 if within 10m of the camera, lod1 if within 1000m, anything further away is weeded out. If the creative workshop edit mode wanted to see a bit further away, set it to within 3000m and still see the trees.
Grass
The amount of grass in the game is very high. The larger the walking-space size, the more grass there is, like the large space below where the amount of grass is easily in the tens of thousands.
If we were to render the grass in the normal model way, each traversal would consume a lot of performance. Scene cropping and instance filling are the hardest-hit areas regarding performance consumption.
Here I want to take complete control of the entire instance rendering process for the meadow.
- Divide the whole scene by area. Each area is 555.
- When the scene is loaded, the grass is added to the corresponding InstancedBuffer by region (no actual grass nodes are created). These InstancedBuffer are not modified at runtime after they are filled.
- The scene only needs to be visually cone-culled for regions during runtime. The whole thing is much more efficient without the runtime consumption of populating the InstancedBuffer.
- After testing the grass optimization, the objects all over the seafloor were optimized using the same approach.
All these optimizations add up to a significant performance improvement, with the most extensive scenario having 600,000 vertices before the optimization and being able to keep it under 50,000 vertices after the optimization.
Rendering Pipeline
We have added some pipeline conditional control nodes to try to avoid unnecessary rendering processes. Rendering the whole screen is still very performance intensive.
Optimized start scenes
In the start scene, the camera view is fixed. The camera will only see the front half of the island, and the back half is not visible. You can add a little judgment when generating the bottom objects. Objects in the back half of the island do not need to be generated. This can reduce the runtime overhead.
Rendering Resolution
The rendering resolution of the screen has a significant impact on the consumption of GPU calculations. We found that some users with machines that are not very well equipped but potentially connected to a very high-resolution machine, based on different rendering qualities, we controlled their maximum rendering resolution
let resolution = [1120, 630]
if (renderSetting.realQuality === RenderQulity.High) {
resolution = [1960, 960]
}
else if (renderSetting.realQuality === RenderQulity.Medium) {
resolution = [1334, 750]
}
Improving development efficiency
Cocos Creator 3.6.0 added an editor preview mode. We can run and debug the game in the editor, which helps improve development efficiency. iles upgraded to v3.6.1, and the whole experience is still very good.
Enhancing the gaming experience
In addition to optimizing performance, we have added some game content or modules to enhance the player’s gaming experience.
- Added leaderboard with 10,000 api interface calls per day using leancloud free version.
2. Added a chili pepper prop with flaming effects, which can speed up the run when eaten.
3. Added bouncy mushrooms that bounce chicks up into the air.
4. Added floating wooden boxes to simulate water buoyancy for added fun.
5. Keyboard and joystick controls are supported.
6. Optimize the loading process and add a loading screen.
Resources Download
The source code currently available on the Cocos Store is pre-optimized and built on v3.6.0. The optimized source code, upgraded to v3.6.1, will be uploaded as soon as it is available.
iles Download Experience - Steam
Reference Links
[1] Environment variable settings
[2] Electron documentation
[3] chromium 101.0.4923.0
[4] Electron version download
https://www.electronjs.org/releases/stable?version=19&page=4