This story was originally published by our Chinese team for developers reading our Chinese WeChat account.
"The Strongest Demon Fighter" by Tencent is one of the first fully-featured game built using Cocos Creator's fully implemented 3D engine coming soon to Cocos Creator 3.0. We had a chance to interview the developers about the planning, operation, and technology used in the creation of the game. The topics included level design, animation effects, character costume design, collision detection, resource management, loading optimization, performance optimization, etc. We believe their work can bring you new thinking and inspiration.
Game highlights
Game design
"The Strongest Demon Fighter" follows the current very hot trend of auto shooters that are in games like Archero. Moving your virtual joystick, you control the character's movement to avoid attacks. When you stop, your fighter will automatically attack the enemies on your screen. The character will fire bullets automatically at the nearest monsters and are given a chance at selecting skills and attacks after leveling up in the game. The gameplay was invented to allow players to play with one hand and be more suitable for a wide range of casual users.
In the player's menu, use the coins won to buy permanently saved equipment and cheats you can use temporarily for each battle. The leveling system allows for quick upgrades and gives the experience of rapid growth with instant satisfaction during the game.
The game uses 2D scenes + 2D bullets + 3D monsters and characters
The design of 2D scenes dramatically reduces the number of vertices on the same screen. On the one hand, it reduces the performance pressure of running on iOS. On the other hand, it also leaves enough performance space to enrich the scene art. So we can see that unlike other bow and arrow games, the scenes in "The Strongest Demon Fighter" are extremely rich in details, with various buildings, farmland, and trees popping up during gameplay.
A 2D bullet layer is a standard practice for shoot 'em up games like this, which can significantly reduce the pressure of collision logic calculations. So the game can carry something like "Triple burst of a crossbow bullets + added frontal bullets + diagonal bullets + side bullets + ricochet bullets + bouncing bullets all at the same time. There could be seven or eight bullet trajectories and collision calculations that are happening at the same time, on the same screen.
Art quality
It's Tencent, so art is going to be impeccably high-quality. There were rumors that after seeing this art quality, many game teams outside the company cut work on their own bow and arrow projects that were in the early stages because of this level of art.
The devil is in the details
In addition to fine art details, "The Strongest Demon Fighter" has also been polished in other areas.
As the first batch of internal testing participants of Cocos Creator 3.0 Beta, Tencent had already set up the project in July 2019. This gave them time to register the name of this game in WeChat Mini Games in August, and it has been polished for a full eight months. Under confidential conditions, the Cocos team also watched the game gradually improve the details to today's level.
For example, the calculation of the knockback of different monsters when hit by different weapons, the different hit recovery time, and attack animation of the melee monster was tested for balance. In terms of sound effects, different monsters have different sound effects when they are hit, which can give the player auditory feedback on which monster was hit beyond the screen. The level design is full of various terrains, angles, and obstacles that make people laugh, discover, and try to solve.
In terms of the skills available in the game, players can choose depending on the way they play. Different sets of skills correspond to different play styles, so players can choose to play with strategy or guns blazing. With the equipment you select, and if you are fortunate in your skill choices, then all the skills in the game are stacked. But if you are very unlucky and the corresponding skills are never given, you're going to have a bad time. So, luck is also the key to determining whether your gameplay is fun and fast, or you're going to be beaten to death.
Therefore, in "The Strongest Demon Fighter," player's equipment + luck + skills found in the game = an excellent balance for a functional core element of the game.
By the way: the developers told us that the in-game skills that are randomly given in the level are not entirely random, so it is not as simple as it seems on the surface.
Interview Time
We sat down with the developers and asked them some questions about the game
How did you improve the efficiency in building so many content-rich levels?
We have a dedicated team to develop a level editor. In addition to achieving the traditional map building and other art editing functions, there is an upper layer of abstraction – through the configuration of the map as well as including some rules, the tool layer helps us to generate other requirements needed to complete levels quickly. This is an important ability to support the production of hundreds of thousands of levels in our game.
How were you able to build the rich animations and effects in the game?
This part benefits from the powerful animation system of Cocos Creator 3.0 itself. All our animations are made in the Creator. The particle system and the timeline animation system can meet all our needs. It is also very convenient to apply to the program.
How was the character appearance system made?
Currently, the appearance of the character is determined by the weapon, so the dressing system is not complicated. The weapon determines the entire model and textures of the character. Besides, the same actions use the same skeletons and animations, which saves quite a bit in resources.
Can you share what optimization strategies were used in collision detection?
In a complex scene, there are seven or eighty bullets and about ten monsters on the same screen. This amount is actually not very large, but because the rendering of the entire scene has consumed half of the memory, coupled with the limited efficiency of JavaScript interpretation and execution under iOS, we still encountered certain challenges.
We didn't use the physics engine for collision detection. To simplify the calculation, we used round and rectangular collision bodies to support the whole game. Obstacles first merge adjacent rectangles to reduce the number of collision bodies and then use quadtrees for spatial planning. For each bullet, only 0-2 obstacles are participating in the calculation each time, so memory consumption is very low.
The main consumption is the collision of bullets and monsters. In addition to the collision algorithm itself being simplified to the extreme, it is more important to reuse the bullet's running path and collision test results from the game design requirements, to achieve a large number of reduction operations.
How to relieve the pressure of rendering performance when there are more bullets and monsters on the same screen?
The monster is the only 3D model. The rendering performance of the engine is already excellent. Also, we have extended support for GPU Instancing. In some cases, it can have certain performance improvements. Currently, on low-end iOS, monster rendering accounts for less than half of the frame time. This is within the acceptable range.
Most of the bullets are 2D sprites. There are hundreds of sprites in the most complicated situation on the same screen. After rationally arranging the level control drawcall below 40, the rendering efficiency of the engine itself is already good.
However, for such a large number of sprites on the same screen, we still did more targeted optimization to avoid the stall caused by a peak in computing.
The main optimization schemes are roughly these:
- Most matrix calculations can be simplified to coordinate additions;
- Implement a simplified active function to optimize the node additions and deletions frequently;
- Use customized SpriteComponent that only supports a simple mode to reduce the amount of dynamic batch calculation;
- Use static batch to optimize the rendering performance of static sprites;
- Use lazy rendering mode to reduce the consumption of sequence frame animation.
Cocos Creator 3.0 Beta already comes with GPU Instancing support, supports not only static models, but also supports instancing batching of skin models.
The overall game is very smooth, can you share some tips for us?
In terms of resource management and loading, we have made in-depth customization. Without changing the native implementation of the engine, we needed to download more than 300 files to enter the novice level, with a total volume of more than 9 MB. After customizing the file organization form and downloading process, when you enter the beginner level, it only requires downloading about 15 files, with a total volume of less than 2 MB.
The main idea of resource customization is to merge a large number of scattered small JSON files into a large JSON, and then compress multiple files into a zip package according to the prefab's dependencies, and download these zip packages for decompression at runtime.
Also, when fighting in the level, we will use the free time to download the zip package of the next level, to achieve a faster switching speed.
Are you satisfied with the performance of Cocos Creator 3D?
At present, the performance of Cocos Creator 3.0 Beta is relatively satisfactory. Some components that are particularly important for performance that previous beta versions lacked have also been supported. It is understood that 3.0 will also support the GPU particle system, which will enormously improve the usability and performance of visual effects made with particles. This is what we particularly look forward to.
As for performance optimization, for large and complex games, even if the general function performance of the engine is even better, it is inevitable to customize the partial implementation. From this perspective, I hope that the Cocos engine will provide better user customization and expansion in the future. Support, which can reduce the user's need to modify the engine source code directly, lower maintenance costs, and become more friendly.
Cocos team: The particle system for 3.0 has begun to support the use of GPU computing power for simulation, which significantly improves the running performance, especially on iOS devices that do not support JIT.
Why did you choose Cocos Creator 3.0 Beta in the end?
Since there are not many complicated 3D game cases on the WeChat mini-game platform, the technical selection of a game engine is something we are particularly cautious about. The project spent nearly a month in the selection phase. We pre-researched several H5 engines that support 3D rendering on the market today and implemented the original Demo with Cocos Creator 2.x version, Cocos Creator 3.0 beta, and LayaBox 2.0 engine. We then did detailed performance tests.
Comparing various aspects of the development process, technical support, and operating performance, we found that Cocos Creator 3.0 beta has obvious advantages over the first two, and performance is basically the same, so it has become our first choice.
Are there plans to release to a native platform?
At present, we have also built the Android app version, which performed very well, but there is no release plan for the time being. From the perspective of capabilities, Cocos Creator 3.0 can meet the needs of cross-platform.
Do you have any suggestions for getting started with Cocos Creator 3.0?
In the Cocos Creator 3.0 beta version stage, the engine and tools have more deficiencies in stability and ease of use. However, as the new versions were released, we can feel that the engine has evolved very quickly, and the response and repair of bugs are very agile.
Now our development team believes that there are not as many problems, and the engine operation level is relatively stable because of the improvements in the stability of the editor. We hope it is further strengthened.
How do you evaluate the overall experience of Cocos Creator 3D?
It is rich in functions, powerful in performance, simple to use, high in IDE integration, supports team collaboration very well, and open-source code is very friendly to performance analysis and optimization. The suggestions are still focused on the editor, hoping to have higher stability and expandability, and further improve development efficiency.
This is all we can share with you today. Thank you very much for the information from the Tencent team. We also hope that more and more developers will be able to create more high-quality games through Cocos Creator 3.0, and hope "The Strongest Demon Fighter" achieves excellent results.
Our CEO, Walzer Wang, have been addicted to this game. If you have WeChat, we recommend searching for " 最强魔斗士" on your WeChat app and start playing "The Strongest Demon Fighter" yourself.
