Cocos 3D open source game case

1. Before and after the production of iles

Cocos is an open-source game engine launched by Xiamen Yaji Software Co., Ltd. It currently supports 2D and 3D game development, but it is best at 2D game development, and 3D-related engine technology is only provided in the last two years. At the beginning of 2021, the Creator 3.0 version was officially released, merging the two sets of 2D and 3D products and starting the engine integration construction. Cocos Creator has carried out several version iterations, based on the 2D application field, while continuing to optimize, it has also made great progress in 3D.

The following is an official open source 3D parkour breakthrough + construction game "iles", click to start the experience . "iles" is mainly developed by me and my Canvas engine team in our spare time. The research and development cycle is nearly 4 months. I am responsible for the construction of the rendering pipeline and the realization of rendering effects. Canvas is responsible for the game framework and gameplay, art model Most of the music and music are outsourced, and the rest are made up by the two of us.

With this case, we hope to allow users to go deeper into the world built by the engine and see more scene details; more importantly, as engine developers, we can also experience the complete process of developing games with Cocos Creator. In this way, the deficiencies and pain points of the engine are found, and the reference for subsequent iterations is provided.

And choose the Steam platform, mainly because Steam is a treasure that we haven't covered much yet. This time, we tested the entire process of launching the game on Steam, including accessing Steam Greenworks, launching Mac + Windows dual platforms, and accessing the creative workshop.

Next, I will focus on three aspects: gameplay design, rendering effects, and release to Steam, and take you behind the scenes of the development of "iles".

2. Simple and fun gameplay

At the beginning of the project, the first question before us was: what type of game do we want to make?

We wanted this case to be light and competitive at the same time. From this point of view, we chose the direction of "parkour and breakthrough", and simplified the game operation as much as possible, allowing the character to run with the mouse. In order to improve the fun of competition, we added a little inertia to the running, making the game operation a little more difficult.

The gameplay of the game is very simple. Players control the character's running and jumping by moving and clicking with the mouse, running fancy parkour on 50 islands, collecting candies and avoiding various traps. After a successful level, the player will be graded according to the number of candies and the time spent. .

In addition to passing levels, "iles" also has a "build" mode. Players can freely build islands and design levels in the level editor. Support for UGC content, access to the creative workshop is to extend the life of "iles" at a minimum cost, and we also want to see what kind of creative maps players can create - Canvas took an Ania out of it .

The protagonist of "iles" is a chicken. The process of determining the character image was both brain- and time-consuming. At that time, we always wanted to make a different image, but we dug a big hole for ourselves. Chickens are still quite difficult to design. Panda suggested that we can “create boldly” and add some exaggerated elements.


After an internal discussion, it was the chicken below that stood out.

I personally prefer its umbrella. This umbrella is an important prop for the protagonist and can fly and glide with the protagonist. If there is a budget, we would like to make this umbrella as a souvenir for everyone.

3. The effect after iteration

We have spent a long time on the realization of the rendering effect of "iles". Let's share with you some of the products in the iterative process to see how the effect presented by the game is made step by step.

In the earliest prototype stage, we used some simple white molds to build the scene, and the subsequent scenes were gradually optimized based on this prototype.

In the realization of the water edge, I have also tried a variety of solutions, such as depth inspection, manual production of model surfaces, ray detection to generate model surfaces, special effects, etc., but these methods have more or less shortcomings and cannot meet the needs of the project. We hope to dynamically generate water ripples according to user edits, and the ripples can extend out of the surface of the object, while ensuring rendering efficiency. In the end, I chose the SDF implementation method. When the user edits, an SDF image will be generated, and when rendering the water surface, the SDF image will be read to generate ripples.

After adding birds, waterfalls, and optimizing the plot, it gradually has a little sea atmosphere.


Then enrich the effect of the seabed. The island plots in the game are constructed and generated by the players themselves, while the underwater land, stones, trees, and corals are automatically generated around the plots. After optimizing the skybox and adding the reflection on the water surface, it is basically what everyone sees in the game now.


At the same time, the advanced effects in "iles" basically rely on this custom rendering pipeline. In order to make it easier to debug and organize this pipeline, I temporarily and quickly implemented a visual editing pipeline function. You can get the source code and explore the inside. Implementation principle. Of course, this is what I did temporarily for "iles". If you want to apply it to your own project, it is more appropriate to customize it according to your own needs after mastering the principle.

In addition, if you want to talk about the single art effect that takes the most time, it is actually the selection interface of the game. We hope that the edited level can be displayed intuitively in the selection interface, and we have tried various solutions for this. The first is to do it in the list in the UI Scroll View.

After that, it is expanded into a mesh structure, and the layout will look better.

We also experimented with arranging each level by parcels to generate simplified 3D models. At the beginning, in order to better reflect the effect of the 3D model, a slanted perspective was used, but it looked a little messy, and the levels farther away were not displayed so clearly.

So we changed back to the top view, and at the suggestion of Miss Engine UI, we changed the dotted line at the bottom of the level to a solid bottom. The final interface finally has our own style. It can be seen that the simplified model has a foam edge, and the commentary and the island name have a refraction effect on the bottom of the water. The technology used here is the same as the surface water effect.

Fourth, release the pit encountered by Steam

We ran through the whole process of game packaging and publishing on Steam, and spent a lot of time in accessing Steam's creative workshop and data interface. The following summarizes the pits and solutions we encountered, for the reference of small partners who also want to release the Steam platform.

Question 1, the uploaded Mac App cannot be opened after being downloaded in Steam.
Previously, we uploaded through the Steam Works web UI, which was not only slow but also interrupted the Electron symlinks in the Mac App. After checking for a long time, we found that we can use the command line to upload, and the command line upload supports incremental upload. , which can greatly shorten the upload time.

Reference link: https://trashmoon.com/blog/2022/automating-steam-releases-for-html-games-with-electron-forge-and-github-actions/

Question 2, when testing the Steam Workshop, when we call the upload interface, it keeps returning upload failure.
At first we thought it was because Steam had not yet opened the permissions or there was a problem with the network. After a while, it still didn’t work. I flipped through the source code and found that it has an ID parameter that must be a String type, and we tested a Number passed. .
Reference link: https://github.com/greenheartgames/greenworks/blob/12392db8e88ec9c0f6a1e244672992b972413e54/src/api/steam_api_workshop.cc#L193

Question 3, the time for listing on Steam.
Steam review takes about a week. Passing the review does not mean that the game can be downloaded from the outside immediately. The store page needs to be displayed as "coming soon" for at least two weeks. During these two weeks, players can search for the game normally. In addition, pay attention to the user registration time. New users can only release the game after they have registered for at least 30 days.

Question 4, Steam overlay must be supported<br>The shortcut key "Shift + Tab" must be supported to open the overlay, the Electron main process will not draw every frame by default, you need to add a command to the startup item to solve this problem.

5. Resource download

Steam experience address: https://store.steampowered.com/app/2001150/iles/
Source code download: https://store.cocos.com/app/detail/4010/

The source code of "iles" has been upgraded to Cocos Creator 3.6. This Friday, you can go to the Cocos Store address above to download some of the core source code of the game, including the entire visual custom rendering pipeline, game character operations, start scenes and other parts and related materials.

Although the store is set to 99 yuan by default, as long as you hit the "Baxstall Holm" level (the 15th level of the main line), a QR code will pop up in the game, and you can scan the code to receive the voucher and exchange the source code for free. The difficulty of customs clearance is not high. You are welcome to experience and give feedback to help us do better!

Last but not least, I would like to take this opportunity to express my gratitude to the friends who helped us during the development of "iles"! I would also like to thank all the developers for their attention and support along the way. I hope "iles" will live up to your expectations.