Salon Talk丨How to quickly build a multiplayer game in Cocos? Easily grasp the construction and optimization of characters + scenes!
Shenzhen Ai Gamify Network Technology Co., Ltd. is a gamification marketing solution service provider. It has long been committed to gamification to empower the whole industry and make brand growth simple and interesting.
Not long ago, Shenzhen Xiaoai Lingdong launched the Metaverse project “Lingdong Yuanjing” based on Cocos Creator, which has exploded the circle of friends of many people.
Sun Chenyang
At the Cocos Shenzhen Salon, Sun Chenyang, the head of Xiaoai Smart’s game content business, shared how to use Cocos Creator to build and tune a multiplayer game quickly. He talked about material optimization, character optimization, scene optimization, performance optimization, and plug-in cooperation. Talk about your own experience and experience. The following is the sharing content.
Demo demonstration effect
Experience address:
Cocos Club
Material optimization
All Demo materials are customized, simplified, and optimized based on Cocos Creator’s Unlit, PBR and Toon materials.
Taking the Unlit material as an example, MainColor is removed in the FS part. If color is required, it can be controlled by the macro switch later.
At the same time, in VS, the TilingOffset is removed from the Offset part, and only Tiling can be used (offset is not used in most cases), and a macro switch is also added.
The PBR material is a general material, and it needs to adapt some parameters for each modeling software, so much of the compatibility processing has been done. For example, the precision parameters such as albedoScale and emissiveScale can be removed through macro switches or comments.
You can further optimize the PBR material if you don’t need to use occlusion or specular intensity. At the same time, the Lightmap part in PBR also has a lot of room for optimization. The optimization of this piece can be decided according to the project.
Character optimization
Character rendering
The overall positioning and rendering of the characters are in a cartoon style. Here, the default Toon material of Cocos Creator is used for optimization and simplification, which reduces the color level of cartoon rendering. While removing the second-order shading, the parameters of the first-order shading are also reduced.
The default Toon material of Cocos is third-order shading, which is BaseColor basic shading + Shade1 + Shade2. Here Shade2 is removed, Shade1 is called first-order shading, and BaseColor is called basic shading.
In addition, a macro switch is set to control the first-order shading.
We can drag the first-order shading more easily by dragging the slider in the material.
Macro switches are added for the highlighted part , and only the glasses, hair, and other components use highlights, reducing the rendering overhead.
Skin, hair, and clothing use rim light. Considering that the character’s color may change, the color of the rim light has also been simplified, and the rim light can be changed when the skin color is changed.
To reduce the number of materials and mesh overhead, the character’s stockings are implemented using detail maps. The configuration of the macro switch is also done here.
Animation optimization
Due to the limited number of uniform vecs in the real-time skeleton system, currently, during the resource import period, it will be split according to the number of bones, which will also affect other systems. Multiple materials often exist, which affects the subsequent batch processing.
If you are sure not to use real-time computing mode (when the useBakedAnimation option of the SkeletalAnimation component is not checked), you can check this option to improve performance. But note that changing this option will affect the generated prefab content, and you need to update the references in the scene accordingly. Subsequent refactorings will remove this process.
The number of fingers is removed here, and the volume size of the animation can also be optimized.
performance optimization
Multi_Texture and the corresponding macro switch are added to the character’s texture, which is convenient for instancing batching.
In the same way, the detail texture of the character can also be set; Multi_Detail_Texture and the corresponding macro switch can be added to reduce the selected attributes through the macro.
Considering that the color of the character’s skin, facial features, and hair must be changed to avoid the batching of the baking animation, it is also used when changing the color.
Random color DrawCall is not interrupted
Other settings
The character’s body and face are set with Blendshapes, which is convenient to support Morph. Morph can support both real-time animation and baked animation.
Because there are many face objects, in order to reduce bone and skin pressure, the face is bound to the head node of the bone in the form of a socket object.
The characters you control using real-time animation, so you can use dynamic skeletons and Crossfade animation transitions for more detailed viewing at close range.
Other characters in the scene use baked animation to facilitate GPU INSTANCING, which has better performance, but the disadvantage is that the volume of the exported animation will increase.
Through the above settings, the DrawCall of a single node of a character can be controlled at 7-8, and the DrawCalls of multiple characters with different colors and different hair and clothes can also be controlled within 10 DrawCalls through instancing.
Scene Optimization
After importing the scene material package into Cocos Creator, export the child nodes of the entire scene to JSON. Repeated objects can be reused using a prefab and then use a single prefab + JSON configuration to restore the original scene.
If you use the entire exported scene, the same object will be a different Mesh, which will not only increase the volume but also cannot perform Instancing batching.
Prefab generation
Lighting optimization
The entire scene uses one directional light and 20 Sphere Lights. The environment material uses the PBR that comes with Cocos, performs lighting baking, and simplifies the lighting baking.
At present, the effect of Sphere Light baking is weak, and we have increased the overall brightness and range by 80% through scripting.
Material Tiling
Use a lot of material Tiling, combine scattered bricks into a patch, and set Tilling in the material to reduce loading time (as mentioned earlier, no offset is used here).
Material Instancing
A large number of the same objects use the same prefab, the same Mesh, and batch instancing.
Scene effects
Use UV animation + frame animation to increase scene details and optimize moving lines. Some materials use Emissive Map’s UV animation + overlay of detail maps.
Occlusion culling
To ensure the integrity of the field of view, the occlusion culling of the camera is added, using ray detection or Trigger detection of colliders to detect colliders within a fixed range, and set the setInstancedAttribute to change the material transparency to ensure that batches will not be interrupted.
Collision optimization
Only complex objects use Mesh Collider, and other objects use 1-2 Box Collider or Cylinder Collider nodes to reduce the amount of rigid body computation. For example, slopes can use Box to change the Euler angle, and several carpets can use a Box Collider for collision and merging.
Scene loading
The scene is roughly divided into the collision layer, the surface layer, the object layer, and the detail layer. In this order, frame-by-frame loading is performed to reduce the lag during loading and instantiation. Each layer has its own JSON configuration file except for the collision layer, and the prefab generates layers according to the configuration.
Performance optimization
Model detection
The GPU model can be obtained from the engine’s piplelineSceneData, and the mobile phone grade can be obtained by comparing the GPU model with the open-source BenchMark information.
Suppose the GPU model is not obtained, or the configuration of the GPU can be changed. In that case, you can use the resolution of the mobile phone as an alternative to obtaining the model configuration of the mobile phone.
Bone optimization
The model has been optimized for bones, and fingers and toes are deleted. This part will account for nearly 50% of the number of bones. While increasing the volume, it will also increase the performance overhead.
State synchronization
The state synchronization framework uses TSRPC to perform state synchronization and room matching and uses tween to interpolate the character’s position and four elements.
Plug-in cooperation
Akeytsu, an animation production software, is currently free to download in the community or educational version. Support one-click shooting of redundant bones and empty bone nodes and one-click skinning of multiple fingers, which is convenient for bone deletion and Mixamo action binding.
The 3D dynamic bone plug-in, out of the box, can easily and quickly bind dynamic bones and realize dynamic bone collision. (Only available for purchase in Chinese store)
https://store.cocos.com/app/detail/3782
KylinsPostEffects, a post-effect solution written by Kylinzi that does not depend on prefab, does not pollute the scene node tree and can be used by simply calling a few parameters. Support a variety of after effects, simple configuration. (Only available for purchase in Chinese store)
https://store.cocos.com/app/detail/3333
BenchMark supports the performance detection of a high, medium, and low mobile phones and the adaptation of mobile phone performance and can provide a high-quality and smooth running solution for high, medium, and low-end models. (Only available for purchase in Chinese store)
Address: 高中低端机型性能适配方案+BenchMark+性能检测 | Cocos Store
Camera screenshots support 3D/2D or hybrid screenshots, easy to operate. (Chinese purchase only)
https://store.cocos.com/app/detail/3812
TSRPC, an open-source RPC framework specially designed for TypeScript, the function and usage can be clicked to view the article "How to achieve God synchronization in real-time multiplayer battle? “How to Realize a Room and Matching System for 100,000 People Online”.
https://store.cocos.com/app/en/detail/3766
Cinestation, a visual smart camera system. Convenient and simple, it supports virtual camera and camera lens movement.
https://store.cocos.com/app/detail/3422
That’s all for this sharing. Anyone interested in brand metaverse cooperation and gamification marketing, please get in touch with us!