Cocos3.6 has been online for 3 weeks, whether the new Surface Shader material, or the CSM cascade shadow, or the new DCC material system, and the animation state machine! !
I haven’t used any of these features yet! ! !
So I am going to spend 4 days to make a simple game ! A jare chiken game, which allows everyone to enjoy the scene and collect coins in it!
Demo Address : Jare‘s World! Free Giveaways!!!
1.0 Scene design
With the idea, the next step is the scene design. There needs to be a big moon in the scene to demonstrate the reflection of skybox, and with many buildings to show the power of CSM, and there needs to be a lot obstacles as well! Players need to jump to the floors to collect the coins, the design drawing is as follows!
Character selection
Jare Chiken(Cocos’s PM Director!) is quite similar to the chicks in the design drawing!
DCC material adaptation
The scene chose the Asian Buildings Collection form Noyou on Sketchfab, which has a lot buidings in the scene and plenties of obstacles!(CC: Ancient Chinese courtyard Park - Download Free 3D model by noyou (@zsm123) [55d8371] - Sketchfab)
With the latest Dcc material adaptation from Cocos, this scene can exported into Cocos without additional config!.
Then set up the character and buildings in thescene, and add a full moon skybox.
Compared with the design drawing, which is quite similar!
Finally, draw a coin with moon in Blender, and adapt it through the Dcc material, the whole scene is complete!
Considering that the game scene has more than 1 million verts and the terrain is relatively irregular.
The cost of using Bullet+Mesh Collider wll be quite high, so the project decided to use a plug-in CollisionMaster from the store (Cocos Store)
-
It is only a few tens of KB in size
-
The built-in octree is optimized for large scenes
-
Supporting ray detection, which is enough to write the logic of eating moon cakes
2.0 Features Used
CSM Cascading Shadows
When CSM is turned off(right in the picture), the edges of the shadow are severely jagged. The reason is the low resolution of the shadow map, when sampling the shadow map, multiple different vertices sample the same pixel, resulting in aliasing.
After CSM is turned on, multiple shadow maps are used, fine shadow maps are used near the camera, and rough shadow maps are used far away from the camera, which not only optimizes the shadow effect, but also ensures rendering efficiency. This feature in 3.6 is souseful!
Animation State Machine
Player needs to control the chicken to jump up and down, and there are many states to be added. If we simply use skeletal animation, a lot codes have to be done!
By using the Marionette animation, the main logic can be handed over to the state machine.
It only needs to identify whether the character is on the ground or jumping through a few simple states, and then the character action can be switched easily with few codes!
In the game, you only need to switch the state through ray detection. When the water surface or the ground is detected, we can tell the current state to the state machine without additional codes!
Water reflection
The water surface material extends the Standard PBR, and adds the UV flow of the Normal Map, and the IBL of the sky box.
The edge of the water is smoothed by AlbedoMap, (it will be unnatural to adjust the transparency of the edge by SmoothStep)
**My drawing for the water edge! **
Object Detection
Since collisionmaster does not support physical triggers for colliders, rays can be used for object trigger detection.
Here, a ray is emitted from the top of the head to the foot. When the grouping of the coins is detected, the distance from the coins will be returned in the result of the ray detection, and various logics can be written through the distance.
Jump Detection
Jump detection also uses two rays, the blue one is used for roof collision detection, and the red one is used for ground collision detection.
When the blue detection distance is too low, the upward movement speed of the character is reduced. When the red detection is close to the ground, the downward movement speed is reduced, and the animation state is switched to walking or idle.
Limited time ONLY!!
Free source code Giveaways!!
During this week, until September 18th, the top 10 player with highest scores can get Jare’s Demo for free!
In order to ensure the fairness of the game, please send the screenshots of your scores to the comment area to participate in the competition!
How to participate
Upload your own game screenshots in the comment area ** (** ** Please do not cheat** **, ** ** There are verification methods hehe ** **), ** ** can participate This event ** **! **
Discord Server(Feedback in this Server!)
Demo Address : Jare Collects Coins! Click to jion the event!
