In today's fast-paced world, we always hope to seize the moment. However, "Rome wasn't built in a day", the work of the engine require a long and firm investment of the development team. Just like the effort to finally open the Cocos Cyberpunk demo on the Cocos Store, this is a Third-person shooter game demo with a cyberpunk-style street scene which we have been building for two years. Now it's freely opened for developers to better understand how we achieve this kind of scene, graphics, visual effects, and gameplay.

 

 

For using Cocos Creator to fully produce such an impressive demo, from graphics algorithm to render pipeline, from the editor experience to required toolset, from cross-platform adaptation to performance scalability adjustment, much effort is needed to pave the way. The continuation of the project will polish the paving stones on this road, make them shine brightly and affecting countless engine users, such as Reflection Probe, Lightmap baker, Marionette animation system, deferred rendering pipeline, IBL environment lighting, post-Bloom processing, custom rendering pipelines, and more.

 

Cocos Cyberpunk project condenses many of the core capabilities of Cocos Creator, and it also poses a significant challenge to Cocos Creator's production workflow. So we hope that its release will show developers Cocos Creator's usability for such high-quality cross-platform 3D games !

 

Now we officially open the complete project through the Cocos Store, including scenes, art assets, source code, etc., hoping to help developers make better use of the engine and develop better projects!

 

Technical Highlights

 

In order for developers to better understand the original intention of our project, there are several excellent technical highlights in the Cocos Cyberpunk Demo that have to be highlighted.

 

High scalability

 

Cocos has always been a mobile-first cross-platform engine. Scalability simply means that the engine can be flexible and stretched for different envrironment. It can help your project achieve high performance and low power consumption on low-end devices and platforms. It can also upgrade the project's graphics quality as much as possible on high-end devices.

 

 

The Cocos Cyberpunk project focuses on performance optimization and adaptation to different devices. We achieve high scalability through different quality levels and pipeline configurations. On the PC platform, we have enabled all rendering features such as bloom, TAA, high resolution, and IBL. On the mobile side, we have made detailed configurations for various mobile chips so that the demo can run on most devices with a stable frame rate of 30FPS. Among the lowest-end devices, we have achieved stable performance on Qualcomm Snapdragon 835 (2017), HiSilicon Kirin 970 (2017) and Apple A10 chip (2016), which means that high-quality games can already cover most of the low-end devices currently on the market. It should be noted that this project uses a deferred rendering pipeline that is only used for most advanced mobile games.

 

You can try different configurations by modifying `href-setting.ts` in the project code.

 

Rendering pipeline customization

 

As engine developers, we care a lot about the different needs of different projects, so engine customization has always been one of our highest prioritized capabilities. After all, there are thousands of studios with different needs, and one formula cannot meet the needs of all developers. Among them, the custom rendering pipeline is the infrastructure with the highest threshold and the most difficult one in the customization capabilities. It's extremely hard to balance the convenience and the flexibility of the rendering pipeline customization. Our engine team has been developing a next-generation custom rendering pipeline since 2021. The latest achievement, Render Graph, is also an engine feature that Cyberpunk demo heavily relies on. It divides different processes in the rendering pipeline into different passes. Developers only need to pay attention to the algorithms, and the input and output resources of each passes, then the engine combine them dynamically into a complete rendering pipeline. The high scalability mentioned above also partially depends on the switch of the pipeline process. For example, functions such as Bloom and TAA only need a simple switch to take effect and can even take effect dynamically at runtime.

 

 

Regarding the details of the custom rendering pipeline, the engine team will participate in GDC 2023 in San Francisco this year for sharing a topic about it, and we will strive to share more about it in the future.

 

Graphics features

 

Regarding graphics features, the demo mainly focused on lighting and post-processing. In terms of lighting, the deferred pipeline is primarily used to support massive dynamic light sources in the scene, which creates the rich artificial lighting feedback in the night scenes. At the same time, IBL is supported through Reflection Probe, and the reflection of neon lights can be seen on the water puddles or the metallic walls in the scene, which enhances the cyberpunk atmosphere. In terms of post-processing, we mainly enabled the engine's default bloom effect, AMD's FSR algorithm is also used to scale up image resolution to improve the fineness of the rendering result. Finally, two anti-aliasing algorithms, TAA and FXAA, are provided to reduce aliased edges.

 

 

Project Introduction

 

Cocos Cyberpunk demo mainly demonstrates the engine's functional features, rendering performance, and cross-platform capabilities. Still, we have also produced a complete third-person shooter gameplay. Players play a cyber warrior in a cyberpunk-style street scene. They need to run through roads, alleys, roofs, and corridors to ensure their own survival, kill incoming enemies, and pick up the glowing collectibles in the scene to get gear, ammo, or health packs.

 

 

Project environment

 

Due to usage of the latest custom rendering pipeline, this project can only be opened in Cocos Creator v3.7.1 and above.

 

Baseline device

 

The main target platforms of Cyberpunk are Android and iOS, but it can also run on Windows, Mac and web browsers. The default adaptive performance parameters can ensure that most mobile devices can run stably at 30 fps. The performance baseline devices we tested were:

 

● Android: Qualcomm Snapdragon 835 (Mi 6)

● iOS: Apple A10 Fusion (iPhone7)

 

We limited the frame rate to 30fps by default, you can unlock the limit by modifying the fps configuration in `href-setting.ts`.

 

Asset Guide

 

● Playable scene (creation of the main scene): assets/scene-game-start.scene

● Cyberpunk city: assets/scene

● Game prefabs: assets/resources/obj

● Game logic: assets/scripts

● Rendering pipeline customization: extensions/pipeline/pipeline

● Feature configurations: extensions/pipeline/pipeline/settings/href-setting.ts

 

Future outlook

 

The Cocos Cyberpunk project has just been opened, and it has verified many important features of the engine. We will continue to iterate the gameplay and rendering performance of this project in the future to further polish new engine features. We will also make some tutorials based on some modules of this demo. I sincerely hope this project can attract more attention from developers to Cocos and make them start trying Cocos Creator. Through this project, we will help developers better understand the use of the engine in big project, I believe more and more awesome projects will be published with Cocos Creator across all sort of platforms !