Cocos Cyberpunk is a complete open source TPS 3D game launched by the official team of the Cocos engine to demonstrate the engine's heavy-duty 3D game production capabilities and enhance the community's learning motivation. It supports Web, IOS, and Android multi-terminal releases.
This series of articles will interpret the source code from various aspects to improve everyone's learning efficiency. I hope it can help you to go further on the road of 3D game development.
Project source code free download page:
https://store.cocos.com/app/detail/4543
The article written yesterday was sprayed by panda , saying that the content is a bit watery.
So I hurried to review the content of yesterday's article:
- 1. Complete TPS game core logic framework
- 2. A new version of the reusable custom pipeline
- 3. Forward rendering, delayed rendering, post-processing pipeline
- 4. Enhanced environment reflection probe experience and skills
- 5. Static occlusion removal
- 6. Adapt to high-end, high-end and low-end models, so that your 3D games can walk like flying on the elderly machine
Hey, the publicity points are all in place! Is there any dissatisfaction with my entrustment?
We don't dare to guess the boss's mind, and we must go to dry goods next.
Although Qilinzi said that he would do an all-round analysis, even the output speed of the donkeys in the production team may not be able to keep up with everyone's thirst for knowledge.
Therefore, today, Qilinzi will first sort out the project structure to help you quickly find the entry point of the corresponding module.
It's all here, don't you want to play?
Before studying seriously, I recommend that you play for half an hour first.
1. Open scene-game-start , start the game preview, and you can enter the game scene.
2. Click START to enter the game
3. After entering the game, there will be a roaming camera that takes you to roam the entire scene. Click the START button again to start the game.
4. Press ESC on the computer side , and click the setting button on the mobile phone side to view the operation instructions.
Project directory structure
Next, let's look at the project directory structure.
As shown in the figure above, when you open the Cocos Cyberpunk project, you can see the file content in the Assets window in the lower left corner.
Let's explain it from top to bottom.
1、animations
There is only one animation file in this directory, which is used for camera animation of scene roaming
2、LightFX
The lightmap directory is automatically generated and used by the light baking system, and it is not necessary to manually modify the contents inside.
3、res
The resource directory of the entire game, including animations, special effects, models, shaders, UI, sound effects, etc.
4、resources
The resource directory that needs to be dynamically loaded in the game will be stored here. There are not many contents stored at present, but with the improvement of the game, the contents of this directory may increase.
5、scene
A reflection map automatically generated by the environment reflection probe (Reflection Probe). When the reflection probe is baked, a folder corresponding to the scene file name will be generated to store the reflection map. The scene folder here corresponds to the scene scene below.
6、scene-development
Store some scenes used for unit testing during the development process, such as character animation control, bullets, IK, shooting detection lines, etc.
7、scripts
Store all game logic scripts
8、src
Some tests during development, not related to the project
9、test
Some tests during development, not related to the project
10、scene
game main scene
11、scene-game-start
The game startup scene will initialize some UI logic managers, load the main game scene, and display a progress bar. Should start with this.
custom pipeline
In order to facilitate reuse, the custom pipeline is made into the form of an editor extension. If you don't want to do this, you can also move it to the project. pipeline corresponds to the custom pipeline.
To view the visualized pipeline graph, just create a new node in the scene and drag the pipeline/graph/pipeline-graph.ts component to the newly created node.
Check the Edit checkbox to open the picture below.
It is estimated that it will take many articles to explain the content related to the custom pipeline. Kylin will share it in the following articles, and it will not be expanded today.
Interested friends can first view the following files and explore by themselves.
- pipeline/pipeline-manager (entrance)
- pipeline/graph
- pipeline/passes
reflection probe
In the scene scene, find probes, you can find that there are three reflection probes below, and they will generate corresponding images in the assets/scene directory.
It can be seen that a ReflectionUtils script component is also hung on the reflection probe node, which provides the function of updating the probe in real time.
If a friend's project needs a real-time probe, you can refer to this script component to implement it. But be aware that real-time probes are very expensive and are not suitable for scenes with too many renders, nor are they suitable for too many.
In addition to this, the reflection probe in Cocos Cyberpunk also has a SphereProjection correction, so that the reflection can match the object.
The general principle is as follows. The intersection point of the reflection line and the radius of the reflection probe and the center of the reflection probe form a new direction for reflection sampling.
Interested friends can check the pipeline/resources/effects/chunks/lighting_ibl.chunk first, and there will be a special article to analyze this piece later.
static occlusion culling
In the Cocos Cyberpunk project, a simple and easy-to-use PVS mechanism has been implemented.
By storing the visible relationship in the spatial grid in advance, and directly looking up the table to obtain the rendering list during rendering, the efficiency can be greatly improved, and it is most practical for scenes with dense buildings.
In this part, you can view the static-occlusion-culling node in the scene scene.
The general idea is as follows:
- 1. Divide the space into many grids in advance
- 2. Use the ray query method in advance to find out the visible objects of each grid and record their IDs
- 3. When rendering, calculate which grid the camera is in, obtain the list of visible static objects in the corresponding grid, and render only the visible static objects
Please refer to the pipeline/occlusion-culling section for the main logic.
Model Adaptation
Cocos Cyberpunk implements a complete model classification and performance switching strategy. This strategy will use the best rendering effect on high-performance devices, and turn off some effects on lower-level devices to ensure a smooth frame rate.
This part can be said to be used in all 3D projects, and you can move it to your own projects and use it directly.
This part mainly deals with the following two things
- Based on mobile phone GPU information, classify high-end, mid-range, and low-end models (common mobile phone GPU chips have been included)
- Adjust the effect according to the high, medium and low-end models to ensure that the low-end models are still smooth
Please refer to href-settings.ts, gpu.ts and gpu-mobiles.ts
You can see that according to different device scores, more effects are gradually turned off:
let mobileSettings = [
{
score: 2000,
shadingScale: Math.min(1240 / game.canvas.width, 1),
bloom: 0,
fxaa: 0
},
{
score: 1200,
shadingScale: Math.min(1024 / game.canvas.width, 1),
},
{
score: 500,
gpu: [['apple', 'a10']],
fsr: 0,
taa: 0,
maxEnemies: 2,
sceneParticles: 0
}
]
You can manually switch to different levels of effects to quickly check the performance on high, medium and low-end machines.
game logic
Cocos Cyberpunk also contains complete TPS game logic. For those who want to learn shooting games, third-person role games, or develop their own games based on this framework, you can start from the init node of the scene-game-start scene start.
From the figure above, we can see that the init node contains fx, canvas, objects-pool and other nodes. As can be seen from the names, these nodes correspond to special effects, UI, and object pools.
An init.ts script component is hung on the init node. In its start function, we can see that it sets init as a resident node.
In this way, when the main scene is loaded and switched to the main scene, the init node will not be destroyed, and the game logic will continue to be maintained.
From the next article, Qilinzi will give an introduction to the source code related to the game logic, so stay tuned.
study group
Less than three hours after the last article was published, many friends chatted with me privately, asking to establish a Cocos Cyberpunk study and research group.
Now that this group has been established, everyone can chat privately with Qilinzi, send screenshots of the Cocos Cyberpunk project that they have opened, and then they can join the group.